/* ---------------------------------------------------------------- select
 * templates/ui/select.html, static/js/controls.js. The one select of the
 * portal (WEB-KOM-03, K-28): every native select becomes this button and
 * list, the native one stays hidden as the form field (.cc-dd-native). A
 * choice of several is the same component with checkboxes (.cc-dd--checks).
 * A field (WEB-BAR-10): silver frame, graphite bottom edge, steel on
 * hover and while open, the chevron at its right; 36 px, 30 px in a bar
 * (--ctl-h). In a bar or toolbar it sizes to its longest entry, measured in
 * the real font, so choosing never changes its width (WEB-KOM-06). */
@layer ui {
/* Out of sight whatever a page rule sizes the select to (subnav, fields). */
.cc-dd-native { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.cc-dd { position: relative; display: inline-flex; max-width: 100%; }
.cc-dd--block { display: flex; width: 100%; }
.cc-dd--block .cc-dd__btn { width: 100%; min-width: 0; }
/* A long entry ends in «…» in the button, never widens the page. */
.cc-dd--block, .cc-dd__value { min-width: 0; }
.cc-dd--block .cc-dd__value { flex: 1 1 0; width: 0; }
.cc-dd__btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between;
  gap: .5rem; height: var(--ctl-h); max-width: 100%; margin: 0; padding: 0 var(--ctl-px); font: inherit;
  font-size: var(--t-small); line-height: 1; white-space: nowrap; text-align: left; cursor: pointer;
  color: var(--text-primary); background: var(--surface-page); border: 1px solid var(--rule-control); border-bottom-color: var(--rule-medium);
  border-radius: 0; }
.cc-dd__btn:hover, .cc-dd.is-open .cc-dd__btn { border-color: var(--steel); border-bottom-color: var(--rule-medium); }
.cc-dd__btn:focus-visible { outline: 2px solid var(--rule-brand); outline-offset: 1px; }
/* Disabled (WEB-ZUS-07, ENT-346): label, value and chevron in text-disabled
   (silver), the frame in rule-fine, full opacity, the same width. */
.cc-dd__btn[disabled], .cc-dd__btn[disabled]:hover { color: var(--text-disabled); border-color: var(--rule-fine);
  cursor: default; }
.cc-dd__btn[disabled] .cc-dd__label, .cc-dd__btn[disabled] .cc-dd__value { color: var(--text-disabled); }
.cc-dd__btn[disabled]::after { border-color: var(--rule-control); }
/* The chevron, drawn: down while closed, up while open. */
.cc-dd__btn::after { content: ""; flex: none; width: 6px; height: 6px; margin: -3px 1px 0 .15em;
  border-right: 1px solid var(--slate); border-bottom: 1px solid var(--slate); transform: rotate(45deg); }
.cc-dd.is-open .cc-dd__btn::after { margin-top: 3px; transform: rotate(-135deg); }
.cc-dd__label { color: var(--text-secondary); white-space: nowrap; }
.cc-dd__value { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
.cc-dd.is-placeholder .cc-dd__label { color: var(--slate); }
/* In a form the select takes the field's width. */
.field .cc-dd { width: 100%; }
/* The width the script measured, as data (static/js/controls.js). */
.cc-dd .cc-dd__btn { min-width: var(--dd-min, 0); }
.cc-dd .cc-dd__btn[data-fixed] { width: var(--dd-w); }

/* The value never loses its descenders. The button sets line-height 1 and the
   value clips for its ellipsis, so the p of «Sep '23» and the J of
   «Jun '26» were cut at the bottom (WEB-KOM-06). */
.cc-dd__value, .cc-dd__label { line-height: 1.4; }

/* The list. It was as narrow as its button: in the «Eigener …» panel a
   list of quarters showed a search field cut to «Searc», entries running
   out of the panel and the browser's grey scrollbar (WEB-KOM-06,
   WEB-LAY-12). Now the panel is at least as wide as its button and as
   wide as its longest entry, capped to the screen; the search field stays
   on top and only the entries scroll, on a thin silver bar. */
.cc-dd__pop { box-sizing: border-box; width: max-content; min-width: 100%;
  max-width: min(24rem, calc(100vw - 3rem)); overflow: hidden; }
.cc-dd__pop:not([hidden]) { display: flex; flex-direction: column; }
.cc-dd__pop:has(.cc-dd__search) { min-width: max(100%, 14rem); }
/* Opened near the right edge of the screen, the list aligns with the
   button's right edge instead (static/js/controls.js). */
.cc-dd__pop.is-flip { left: auto; right: 0; }
.cc-dd__list { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--silver) transparent; }
.cc-dd__list::-webkit-scrollbar { width: 6px; }
.cc-dd__list::-webkit-scrollbar-track { background: transparent; }
.cc-dd__list::-webkit-scrollbar-thumb { background: var(--silver); }
.cc-dd__list [role="option"] { overflow: hidden; text-overflow: ellipsis; }
/* The search field is the portal's field (ui/field.css): silver frame,
   steel on hover, the red rule while it has the focus. */
.cc-dd__search { flex: none; box-sizing: border-box; width: auto; margin: 0 var(--s-3) var(--s-2);
  height: var(--ctl-h); padding: 0 var(--ctl-px); font-size: var(--t-small); border: 1px solid var(--rule-control);
  border-bottom-color: var(--rule-medium); }
.cc-dd__search:hover { border-color: var(--steel); border-bottom-color: var(--rule-medium); }
.cc-dd__search:focus { border-color: var(--rule-brand); box-shadow: inset 0 -2px 0 var(--corum); outline: none; }

/* The checklist (compare with, indicators, ratios, column filters): the
   same frame and panel, a box per row, the rows scroll under the search. */
.cc-dd--checks .cc-dd__pop { overflow-y: auto; max-height: 24rem; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--silver) transparent; }
.cc-dd--checks .cc-dd__pop:has(.cc-dd__search) { min-width: max(100%, 19rem); }
.cc-dd--checks .cc-dd__search { position: sticky; top: 0; z-index: 1; }
.cc-dd__check { display: flex; align-items: center; gap: .5rem; margin: 0; padding: var(--s-1) var(--s-4);
  font-size: var(--t-small); color: var(--text-primary); white-space: nowrap; cursor: pointer; }
.cc-dd__check:hover { background: var(--surface-subtle); }
.cc-dd__check:has(input:disabled) { color: var(--text-disabled); cursor: default; }
.cc-dd__check:has(input:disabled):hover { background: transparent; }
.cc-dd__check > input { margin: 0; }
.cc-dd__check:has(input:focus-visible) { background: var(--surface-subtle); }
.cc-dd__pop > .cc-dd__note { margin: var(--s-2) var(--s-4) 0; font-size: var(--t-micro); color: var(--text-secondary); }
p.cc-dd__group { margin: var(--s-2) 0 0; }

/* A list toolbar on the phone: the selects take their grid cell. */
@media (max-width: 720px) {
  .toolbar .cc-dd { display: flex; width: 100%; }
  .toolbar .cc-dd .cc-dd__btn { width: 100%; min-width: 0; }
}

/* Lists stay on the screen (K-08, WEB-LAY-12). At 375 px «Compare with»
   and the peers' «Ratios» reached 501 and 559 px and the page scrolled
   sideways (K-08). A list is at most the screen less the two
   compact gutters (web.layout.gutter-compact 1.5rem, .cc-dd__pop above);
   near the right edge it opens from the trigger's right edge (.is-flip,
   controls.js); long entries wrap. */
.cc-dd__check { white-space: normal; overflow-wrap: anywhere; }
.cc-dd--checks .cc-dd__pop { min-width: min(15rem, calc(100vw - 3rem)); }
.cc-dd--checks .cc-dd__pop:has(.cc-dd__search) { min-width: min(19rem, calc(100vw - 3rem)); }
/* Below web.breakpoint.compact the open list takes the full content width
   under its bar: the bar, not the trigger, is its anchor. */
@media (max-width: 720px) {
  :is(.ctl-bar, .toolbar):has(.cc-dd.is-open) { position: relative; }
  :is(.ctl-bar, .toolbar) .ctl:has(> .cc-dd.is-open),
  :is(.ctl-bar, .toolbar) :not(.ctl-pop) > .cc-dd.is-open { position: static; }
  :is(.ctl-bar, .toolbar) :not(.ctl-pop) > .cc-dd.is-open > .cc-dd__pop {
    left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
}
}  /* @layer ui */