/* Milanko select (select.js). Arcilla amable by default; a page can retune it through the --cs-* variables
   (the 3D globe does, for its dark panel). Fallbacks keep it right on pages without the portal's tokens. */
.cs {
  --cs-field: var(--surface-2, #eef3ff);
  --cs-field-hover: var(--surface-3, #e3ebff);
  --cs-pop: var(--surface, #ffffff);
  --cs-ink: var(--ink, #23305a);
  --cs-ink-2: var(--ink-2, #3c4a78);
  --cs-line: var(--line, #d4def5);
  --cs-go: var(--go, #1f8455);
  --cs-row: var(--surface-2, #eef3ff);
  --cs-row-on: var(--surface-3, #e3ebff);
  --cs-lip: var(--clay, #b9c8ea);
  --cs-font: var(--sans, "Nunito Sans", system-ui, sans-serif);
  position: relative; display: block; width: 100%; min-width: 0;
}
.cs__native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none; }

.cs__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px 6px 10px;
  border: 0; border-radius: 16px; background: var(--cs-field); color: var(--cs-ink);
  box-shadow: inset 0 0 0 1px var(--cs-line), 0 3px 0 var(--cs-lip);
  font: 700 16px/1.25 var(--cs-font); text-align: left; cursor: pointer;
  transition: background-color 150ms cubic-bezier(.2,.8,.2,1), box-shadow 150ms cubic-bezier(.2,.8,.2,1), translate 100ms cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) { .cs__btn:not(:disabled):hover { background: var(--cs-field-hover); } }
.cs__btn:not(:disabled):active { translate: 0 2px; box-shadow: inset 0 0 0 1px var(--cs-line), 0 1px 0 var(--cs-lip); }
.cs__btn:focus-visible { outline: 3px solid var(--cs-go); outline-offset: 3px; }
.cs.is-open .cs__btn { background: var(--cs-pop); box-shadow: inset 0 0 0 2px var(--cs-go), 0 3px 0 var(--cs-lip); }
.cs__btn.is-empty .cs__val { color: var(--cs-ink-2); font-weight: 500; }
.cs__btn:disabled { cursor: not-allowed; opacity: .55; box-shadow: inset 0 0 0 1px var(--cs-line); }
.cs__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs__chev { flex: none; width: 18px; height: 18px; color: var(--cs-ink-2); transition: rotate 200ms cubic-bezier(.2,.8,.2,1); }
.cs.is-open .cs__chev { rotate: 180deg; }

/* The list: a clay card under the field (or above it near the bottom of the screen). */
.cs__list {
  position: fixed; z-index: 1000; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  max-width: min(440px, calc(100vw - 16px)); border-radius: 20px; background: var(--cs-pop); color: var(--cs-ink);
  box-shadow: 0 0 0 1px var(--cs-line), 0 6px 0 var(--cs-lip), 0 18px 40px rgba(35, 48, 90, .18);
  font-family: var(--cs-font);
  animation: cs-in 160ms cubic-bezier(.2,.8,.2,1);
}
.cs__list.is-up { animation-name: cs-in-up; }
@keyframes cs-in { from { opacity: 0; translate: 0 -6px; } }
@keyframes cs-in-up { from { opacity: 0; translate: 0 6px; } }
.cs__list [role="option"] {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px 6px 8px; border-radius: 14px;
  font: 600 16px/1.3 var(--cs-font); cursor: pointer; scroll-margin: 6px;
}
.cs__list [role="option"].is-active { background: var(--cs-row); box-shadow: inset 0 0 0 2px var(--cs-go); }
.cs__list [role="option"][aria-selected="true"] { background: var(--cs-row-on); font-weight: 800; }
.cs__list [role="option"][aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cs__t { flex: 1; min-width: 0; }
/* Builder labels are sentence pieces ("la temperatura"); in the list they read as items. */
.cs__t::first-letter, .cs__val::first-letter { text-transform: uppercase; }
.cs__tick { flex: none; width: 18px; height: 18px; color: var(--cs-go); visibility: hidden; }
[aria-selected="true"] > .cs__tick { visibility: visible; }

/* Icon tiles: the theme's family colour, the same pairs the case files use. */
.cs__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--cs-row); color: var(--cs-ink-2); }
.cs__btn .cs__ic { width: 32px; height: 32px; border-radius: 10px; }
.cs__ic .ic { width: 20px; height: 20px; }
.cs__ic--temperature { background: var(--block-rose, #ffeeeb); color: var(--t-temperature, #b23a2a); }
.cs__ic--water { background: var(--block-tide, #d6eafc); color: var(--t-water, #1f5fa8); }
.cs__ic--vegetation { background: var(--block-sage, #e3f4ea); color: var(--t-vegetation, #17603e); }
.cs__ic--ice { background: var(--block-ice, #e3ecff); color: var(--t-water, #1f5fa8); }
.cs__ic--earth { background: var(--block-stone, #ece4ff); color: var(--cs-ink-2); }

@media (prefers-reduced-motion: reduce) { .cs__list { animation: none; } .cs__chev { transition: none; } }
@media (forced-colors: active) {
  .cs__btn { border: 1px solid ButtonText; }
  .cs__list { border: 1px solid CanvasText; }
  .cs__list [role="option"].is-active { outline: 2px solid Highlight; }
  .cs__list [role="option"][aria-selected="true"] { outline: 1px solid CanvasText; }
}