/*
 * emporia-components — CSS dei componenti cotton
 *
 * Ordine di caricamento: bootstrap.css → CSS dello style (emporia-styles) → questo file.
 *
 * Regole:
 *   - solo var(--clb-*), zero colori letterali;
 *   - i token fuori dal set comune a tutti gli style hanno sempre un fallback,
 *     es. var(--clb-shadow-sm, none);
 *   - classi con prefisso .ec-* : gli override Bootstrap restano allo style.
 */

/* ============================================================
 *  Field
 * ============================================================ */
.ec-field__required {
  margin-left: 0.15em;
  color: var(--clb-color-danger);
}
/* legend come una label: :where() tiene la specificità al minimo, così batte il
   reboot di Bootstrap (legend { font-size: 1.5rem; float: left }) ma perde contro
   le regole .form-label dello style */
:where(.ec-field--choices) > legend {
  float: none;
  width: auto;
  font-size: var(--bs-body-font-size);
}

/* ============================================================
 *  Messages
 * ============================================================ */
.ec-messages--stack {
  position: fixed;
  right: var(--clb-space-4);
  bottom: var(--clb-space-4);
  z-index: 1090; /* sopra modal (1055) e offcanvas (1045) */
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-2);
  width: min(26rem, calc(100vw - 2 * var(--clb-space-4)));
  pointer-events: none;
}
.ec-messages--stack:empty { display: none; }
.ec-messages--stack .ec-message {
  margin: 0;
  pointer-events: auto;
  box-shadow: var(--clb-shadow-lg);
}
/* Il toast galleggia sul contenuto: la tinta del tono (negli style spesso semitrasparente,
   es. rgba(…, .10)) si stende sopra un fondo pieno, altrimenti il testo della pagina si legge
   attraverso. Stessa tinta dello style, ma opaca. */
.ec-messages--stack .ec-message {
  --ec-message-tint: transparent;
  background: linear-gradient(var(--ec-message-tint), var(--ec-message-tint)),
              var(--clb-color-surface, var(--bs-body-bg));
}
.ec-messages--stack .alert-success   { --ec-message-tint: var(--clb-color-success-bg, var(--bs-success-bg-subtle)); }
.ec-messages--stack .alert-info      { --ec-message-tint: var(--clb-color-info-bg, var(--bs-info-bg-subtle)); }
.ec-messages--stack .alert-warning   { --ec-message-tint: var(--clb-color-warning-bg, var(--bs-warning-bg-subtle)); }
.ec-messages--stack .alert-danger    { --ec-message-tint: var(--clb-color-danger-bg, var(--bs-danger-bg-subtle)); }
.ec-messages--stack .alert-primary   { --ec-message-tint: var(--clb-color-accent-bg, var(--bs-primary-bg-subtle)); }
.ec-messages--stack .alert-secondary { --ec-message-tint: var(--clb-color-surface-2, var(--bs-secondary-bg-subtle)); }
.ec-messages--inline {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-2);
}
.ec-messages--inline:empty { display: none; }
.ec-messages--inline .ec-message { margin: 0; }

/* ============================================================
 *  Empty state
 * ============================================================ */
.ec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--clb-space-2);
  padding: var(--clb-space-10) var(--clb-space-4);
  text-align: center;
  color: var(--clb-color-text-2);
}
.ec-empty--compact { padding: var(--clb-space-6) var(--clb-space-3); }
.ec-empty--panel {
  border: 1px dashed var(--clb-color-border-strong);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface-sunk);
}
.ec-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--clb-space-1);
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface-2);
  color: var(--clb-color-text-3);
  font-size: var(--clb-text-lg);
}
.ec-empty--compact .ec-empty__icon { width: 2.25rem; height: 2.25rem; font-size: var(--clb-text-md); }
.ec-empty__title {
  margin: 0;
  font-weight: 600;
  color: var(--clb-color-text);
}
.ec-empty__text {
  margin: 0;
  max-width: 36rem;
  font-size: var(--clb-text-sm);
}
.ec-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--clb-space-2);
  margin-top: var(--clb-space-2);
}
.ec-empty-row > td { padding: 0; }
.ec-empty-row:hover > td { --bs-table-bg-state: transparent; }

/* ============================================================
 *  Pagination
 * ============================================================ */
.ec-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-3);
}
.ec-pagination__info {
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
  font-variant-numeric: tabular-nums;
}
.ec-pagination .pagination { flex-wrap: wrap; }
.ec-pagination .page-link { font-variant-numeric: tabular-nums; }

/* ============================================================
 *  Sortable table header
 * ============================================================ */
.ec-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.ec-sort:hover,
.ec-sort:focus-visible { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-sort__icon::after {
  content: "↕";
  font-family: var(--clb-font-sans);
  font-size: 0.85em;
  opacity: 0.4;
}
.ec-sort--asc .ec-sort__icon::after  { content: "↑"; opacity: 1; color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-sort--desc .ec-sort__icon::after { content: "↓"; opacity: 1; color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.text-end > .ec-sort { flex-direction: row-reverse; }

/* ============================================================
 *  Page header
 * ============================================================ */
.ec-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-2);
  margin-bottom: var(--clb-space-6);
}
.ec-page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--clb-space-3) var(--clb-space-4);
}
.ec-page-header__text { min-width: 0; }
.ec-page-header__eyebrow {
  margin: 0 0 var(--clb-space-1);
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clb-color-text-3);
}
.ec-page-header__title { margin: 0; }
.ec-page-header__subtitle {
  margin: var(--clb-space-1) 0 0;
  color: var(--clb-color-text-2);
}
.ec-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-2);
}
.ec-breadcrumb .breadcrumb { font-size: var(--clb-text-sm); }

/* ============================================================
 *  Badge
 *  La forma (radius, font, padding) la decide lo style su .badge;
 *  qui solo i colori per tono.
 * ============================================================ */
.ec-badge {
  --ec-badge-fg: var(--clb-color-text-2);
  --ec-badge-bg: var(--clb-color-surface-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ec-badge-fg);
  background-color: var(--ec-badge-bg);
  font-weight: 600; /* testo piccolo su fondo colorato: il peso conta quanto il contrasto */
  border: 1px solid color-mix(in srgb, var(--ec-badge-fg) 25%, transparent);
}
.ec-badge--accent  { --ec-badge-fg: var(--clb-color-accent-text, var(--clb-color-accent));  --ec-badge-bg: var(--clb-color-accent-bg); }
.ec-badge--success { --ec-badge-fg: var(--clb-color-success); --ec-badge-bg: var(--clb-color-success-bg); }
.ec-badge--warning { --ec-badge-fg: var(--clb-color-warning); --ec-badge-bg: var(--clb-color-warning-bg); }
.ec-badge--danger  { --ec-badge-fg: var(--clb-color-danger);  --ec-badge-bg: var(--clb-color-danger-bg); }
.ec-badge--info    { --ec-badge-fg: var(--clb-color-info);    --ec-badge-bg: var(--clb-color-info-bg); }
/* il pallino usa ::before: se lo style ne disegna già uno su .badge (es. stratigraph)
   i due coincidono invece di sommarsi */
.ec-badge--dot::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
 *  Stat / KPI
 * ============================================================ */
.ec-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ec-stat-min, 12rem), 100%), 1fr));
  gap: var(--clb-space-4);
}
.ec-stat { height: 100%; }
.ec-stat--link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ec-stat--link:hover,
.ec-stat--link:focus-visible {
  border-color: var(--clb-color-accent);
  box-shadow: var(--clb-shadow-md, var(--clb-shadow-lg));
}
.ec-stat__body {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-1);
}
.ec-stat__head {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
}
.ec-stat__icon {
  display: inline-flex;
  color: var(--clb-color-text-3);
}
.ec-stat__label {
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clb-color-text-2);
}
.ec-stat__value {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  margin: 0;
  font-family: var(--clb-font-display);
  font-size: var(--clb-text-2xl);
  line-height: var(--clb-leading-tight);
  color: var(--clb-color-text);
}
.ec-stat__number { font-variant-numeric: tabular-nums; }
.ec-stat__unit {
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-3);
}
.ec-stat__note {
  margin: 0;
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
}
.ec-stat--accent  { --ec-stat-tone: var(--clb-color-accent); }
.ec-stat--success { --ec-stat-tone: var(--clb-color-success); }
.ec-stat--warning { --ec-stat-tone: var(--clb-color-warning); }
.ec-stat--danger  { --ec-stat-tone: var(--clb-color-danger); }
.ec-stat--info    { --ec-stat-tone: var(--clb-color-info); }
.ec-stat:is(.ec-stat--accent, .ec-stat--success, .ec-stat--warning, .ec-stat--danger, .ec-stat--info) {
  border-top: var(--clb-border-width-strong, 3px) solid var(--ec-stat-tone);
}
.ec-stat:is(.ec-stat--accent, .ec-stat--success, .ec-stat--warning, .ec-stat--danger, .ec-stat--info) .ec-stat__note {
  color: var(--ec-stat-tone);
}
/* il filetto usa l'accent, il testo la sua versione leggibile */
.ec-stat--accent .ec-stat__note { color: var(--clb-color-accent-text, var(--clb-color-accent)); }

/* ============================================================
 *  Modal / confirm
 * ============================================================ */
.ec-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  color: var(--clb-color-text-3);
}
.ec-confirm .modal-body {
  color: var(--clb-color-text-2);
  white-space: pre-line;
}
/* un <form> che avvolge header/body/footer non deve rompere il flex di .modal-content */
.modal-content > form { display: contents; }

/* ============================================================
 *  v0.2 — Table
 * ============================================================ */
.ec-table { overflow: hidden; }
/* solo scorrimento orizzontale: 1px di bordo arrotondato basterebbe a far comparire la barra verticale */
.ec-table > .table-responsive { overflow-y: hidden; }
.ec-table__toolbar,
.ec-table__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-3);
  padding: var(--clb-space-3) var(--clb-space-4);
}
.ec-table__toolbar { border-bottom: 1px solid var(--clb-color-border-hair); }
.ec-table__footer { border-top: 1px solid var(--clb-color-border-hair); }
.ec-table:not(.card) > .ec-table__footer { padding-inline: 0; border-top: 0; }
/* riga cliccabile: tutta la riga porta al dettaglio */
.ec-table tr[data-ec-href],
tr[data-ec-href].ec-row-link { cursor: pointer; }
.ec-table tr[data-ec-href]:focus-visible {
  outline: 2px solid var(--clb-color-accent);
  outline-offset: -2px;
}

/* ============================================================
 *  v0.2 — Copy
 * ============================================================ */
.ec-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.ec-copy__icon { flex: none; }
.ec-copy.is-copied { color: var(--clb-color-success); border-color: var(--clb-color-success); }

/* ============================================================
 *  v0.2 — Submit con spinner
 * ============================================================ */
.ec-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.ec-submit__spinner,
.ec-submit__loading { display: none; }
.ec-submit.is-loading .ec-submit__spinner { display: inline-block; }
.ec-submit.is-loading:has(.ec-submit__loading) .ec-submit__label { display: none; }
.ec-submit.is-loading .ec-submit__loading { display: inline; }
.ec-submit.is-loading { cursor: progress; }

/* ============================================================
 *  v0.2 — Actions menu
 * ============================================================ */
.ec-actions__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
.ec-actions__toggle:not(.dropdown-toggle) { padding-inline: 0.55em; }
.ec-actions__form { margin: 0; }
.ec-actions__item {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
}
.ec-actions__icon { display: inline-flex; width: 1.1em; justify-content: center; opacity: 0.8; }

/* ============================================================
 *  v0.2 — Filter bar
 * ============================================================ */
.ec-filter-bar { margin-bottom: var(--clb-space-4); }
.ec-filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* campi con label (<c-field>): i controlli restano sulla stessa riga */
  gap: var(--clb-space-2);
}
.ec-filter-bar__search {
  position: relative;
  flex: 1 1 16rem;
  max-width: 28rem;
}
.ec-filter-bar__search .form-control { padding-left: 2.25rem; }
.ec-filter-bar__search-icon {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  transform: translateY(-50%);
  color: var(--clb-color-text-3);
  pointer-events: none;
}
.ec-filter-bar__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--clb-space-2);
}
.ec-filter-bar__fields > .form-select,
.ec-filter-bar__fields > .form-control { width: auto; min-width: 10rem; }
.ec-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
  margin-left: auto;
}
.ec-filter-bar__reset { text-decoration: none; white-space: nowrap; }
.ec-filter-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  margin-left: 0.2em;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-size: var(--clb-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ec-filter-bar__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clb-space-3);
  margin-top: var(--clb-space-3);
  padding: var(--clb-space-4);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface-sunk);
}
.ec-filter-bar__more[hidden] { display: none; }
/* selezione attiva evidenziata: si vede subito quali filtri stanno lavorando */
.ec-filter-bar .form-select.is-filled,
.ec-filter-bar .form-control.is-filled:not([type="search"]) {
  border-color: var(--clb-color-accent);
}

/* ============================================================
 *  v0.2 — Dropzone
 * ============================================================ */
.ec-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--clb-space-1);
  width: 100%;
  min-height: 9rem;
  padding: var(--clb-space-6) var(--clb-space-4);
  border: 2px dashed var(--clb-color-border-strong);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface-sunk);
  color: var(--clb-color-text-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ec-dropzone:hover { border-color: var(--clb-color-accent); }
.ec-dropzone:focus-within { border-color: var(--clb-color-accent); box-shadow: var(--clb-focus-ring, 0 0 0 3px var(--clb-color-accent-bg)); }
.ec-dropzone.is-dragover {
  border-color: var(--clb-color-accent);
  border-style: solid;
  background: var(--clb-color-accent-bg);
}
.ec-dropzone.is-invalid { border-color: var(--clb-color-danger); }
/* input reale sopra l'area ma invisibile: resta raggiungibile da tastiera e da screen reader */
.ec-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ec-dropzone__icon { font-size: 1.75rem; color: var(--clb-color-text-3); line-height: 1; }
.ec-dropzone.is-dragover .ec-dropzone__icon { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-dropzone__label { font-weight: 600; color: var(--clb-color-text); }
.ec-dropzone__browse { font-weight: 400; color: var(--clb-color-accent-text, var(--clb-color-accent)); text-decoration: underline; text-underline-offset: 3px; }
.ec-dropzone__hint { font-size: var(--clb-text-xs); color: var(--clb-color-text-3); }
.ec-dropzone__files {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--clb-space-1) var(--clb-space-2);
  margin-top: var(--clb-space-2);
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text);
}
.ec-dropzone__files:empty { display: none; }
.ec-dropzone__file {
  padding: 2px 10px;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border);
}
.ec-dropzone__busy { display: none; align-items: center; gap: 0.5em; margin-top: var(--clb-space-2); color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-dropzone.is-busy .ec-dropzone__busy,
.htmx-request .ec-dropzone__busy { display: inline-flex; }

/* ============================================================
 *  v0.2 — Tabs
 * ============================================================ */
.ec-tabs__nav { margin-bottom: var(--clb-space-4); }
.ec-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.ec-tabs__count {
  font-size: var(--clb-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--clb-color-text-2);
  background: var(--clb-color-surface-2);
}
.ec-tabs__tab.active .ec-tabs__count { color: var(--clb-color-accent-text, var(--clb-color-accent)); background: var(--clb-color-accent-bg); }
.ec-tabs__panel:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 4px; border-radius: var(--clb-radius-sm); }

/* ============================================================
 *  Modal trascinabili e ridimensionabili
 * ============================================================ */
.ec-modal[data-ec-modal-drag] .modal-header {
  cursor: move;
  user-select: none;
  touch-action: none;
}
.ec-modal[data-ec-modal-drag] .modal-header button,
.ec-modal[data-ec-modal-drag] .modal-header a { cursor: pointer; }
.ec-modal__resize {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
  z-index: 1;
  color: var(--clb-color-text-3);
  opacity: 0.55;
  /* tre tratti diagonali, disegnati col colore del testo */
  background:
    linear-gradient(135deg, transparent 0 46%, currentColor 46% 54%, transparent 54% 64%, currentColor 64% 72%, transparent 72% 82%, currentColor 82% 90%, transparent 90%);
  transition: opacity 0.15s ease;
}
.ec-modal__resize:hover,
.ec-modal--resizing .ec-modal__resize { opacity: 1; color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-modal--dragging,
.ec-modal--resizing { user-select: none; }
.ec-modal--dragging .modal-content { box-shadow: var(--clb-shadow-lg); }
/* staccato da Bootstrap: niente centratura né altezza minima del dialog centrato */
.modal-dialog.ec-modal--floating { min-height: 0; height: auto; transition: none; }
/* ridimensionato: il corpo scorre, header e footer restano fermi */
.ec-modal--sized .modal-content { max-height: none; }
.ec-modal--sized .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
@media (max-width: 575.98px) {
  .ec-modal__resize { display: none; }
  .ec-modal[data-ec-modal-drag] .modal-header { cursor: auto; }
}

/* ============================================================
 *  v0.3 — Combobox / multiselect
 * ============================================================ */
.ec-combo { position: relative; }
/* select vera: invisibile ma presente (valore nel form, validazione del browser) */
.ec-combo__native {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ec-combo__control {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-1);
  padding-right: 2.5rem;
  cursor: text;
}
.ec-combo.is-open .ec-combo__control,
.ec-combo__control:focus-within {
  border-color: var(--clb-color-accent);
  box-shadow: var(--clb-focus-ring, 0 0 0 3px var(--clb-color-accent-bg));
}
.ec-combo.is-invalid .ec-combo__control { border-color: var(--clb-color-danger); }
.ec-combo__input {
  flex: 1 1 6rem;
  min-width: 4rem;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.ec-combo__input::placeholder { color: var(--clb-color-text-3); }
.ec-combo__caret {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 1.5px solid var(--clb-color-text-3);
  border-bottom: 1.5px solid var(--clb-color-text-3);
  transform: rotate(45deg);
  pointer-events: none;
  transition: transform 0.15s ease;
}
.ec-combo.is-open .ec-combo__caret { transform: rotate(225deg); margin-top: -0.1rem; }
.ec-combo__clear {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--clb-color-text-3);
  font-size: 1.15em;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}
.ec-combo__clear:hover { color: var(--clb-color-text); }
.ec-combo__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 1px 4px 1px 9px;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-size: var(--clb-text-sm);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.ec-combo__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.ec-combo__chip-remove:hover { opacity: 1; background: var(--clb-color-surface); }
.ec-combo__list {
  z-index: 1090; /* sopra modal e offcanvas */
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ec-combo__option { cursor: pointer; }
/* lista virtuale: righe ad altezza fissa, posizionate sopra uno spaziatore alto quanto il totale */
.ec-combo__list { position: fixed; }
.ec-combo__spacer { display: block; list-style: none; pointer-events: none; }
.ec-combo__row {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ec-combo__group.ec-combo__row { padding-top: 0; padding-bottom: 0; }
/* intestazione del gruppo: text-2 (>= 4.5 per contratto), non il grigio di .dropdown-header */
/* un solo margine per voci, intestazioni e messaggi: tutto allineato sullo stesso bordo
   (gli style danno a .dropdown-item e .dropdown-header margini diversi) */
.ec-combo__list { --ec-combo-pad: var(--clb-space-3); }
.ec-combo__list .ec-combo__option,
.ec-combo__list .ec-combo__group { padding-inline: var(--ec-combo-pad); }
.ec-combo--multi .ec-combo__list .ec-combo__option { padding-left: 2rem; }
.ec-combo__group { color: var(--clb-color-text-2); }
.ec-combo__placeholder,
.ec-combo__hint {
  padding: 0 var(--ec-combo-pad);
  color: var(--clb-color-text-3);
  font-size: var(--clb-text-sm);
}
.ec-combo__hint { font-style: italic; }
.ec-combo__option mark {
  padding: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--clb-color-accent);
  text-underline-offset: 2px;
}
.ec-combo--multi .ec-combo__option { padding-left: 2rem; }
.ec-combo--multi .ec-combo__option::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.425rem;
  border: 1.5px solid var(--clb-color-border-strong);
  border-radius: min(var(--clb-radius-sm), 4px); /* casella, non radio: anche con style dai raggi larghi */
  background: var(--clb-color-surface);
}
.ec-combo--multi .ec-combo__option.is-selected::before {
  border-color: var(--clb-color-accent);
  background: var(--clb-color-accent);
  box-shadow: inset 0 0 0 2px var(--clb-color-surface);
}
.ec-combo:not(.ec-combo--multi) .ec-combo__option.is-selected { font-weight: 600; }
.ec-combo__message {
  padding: var(--clb-space-2) var(--ec-combo-pad);
  color: var(--clb-color-text-3);
  font-size: var(--clb-text-sm);
}

/* ============================================================
 *  v0.5 — Datepicker
 * ============================================================ */
.ec-date { position: relative; }
/* senza JS: resta il calendario del browser; col JS l'input vero si nasconde
   (valore nel form e validazione del browser) e compare il campo gg/mm/aaaa */
.ec-date__control { display: none; }
.ec-date.is-ready .ec-date__native {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.ec-date.is-ready .ec-date__control {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 2.75rem;
  cursor: text;
}
.ec-date.is-open .ec-date__control,
.ec-date__control:focus-within {
  border-color: var(--clb-color-accent);
  box-shadow: var(--clb-focus-ring, 0 0 0 3px var(--clb-color-accent-bg));
}
.ec-date.is-invalid .ec-date__control { border-color: var(--clb-color-danger); }
/* niente icona di errore di Bootstrap: al suo posto c'è il calendario */
.ec-date.is-ready .ec-date__control.is-invalid {
  padding-right: 2.75rem;
  background-image: none;
}
.ec-filter-bar .ec-date:has(.ec-date__native.is-filled) .ec-date__control { border-color: var(--clb-color-accent); }
.ec-filter-bar__fields .ec-date-field { margin-bottom: 0; }
.ec-filter-bar__fields .ec-date__control { width: 11rem; }
.ec-date__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.ec-date__input::placeholder { color: var(--clb-color-text-3); }
.ec-date__toggle,
.ec-date__clear {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: min(var(--clb-radius-sm, 4px), 6px);
  background: transparent;
  color: var(--clb-color-text-3);
  transform: translateY(-50%);
  cursor: pointer;
}
.ec-date__toggle { right: 0.5rem; }
.ec-date__clear { right: 2.3rem; }
.ec-date__clear[hidden] { display: none; }
.ec-date__toggle:hover,
.ec-date__clear:hover { color: var(--clb-color-text); }
.ec-date.is-open .ec-date__toggle { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-date__toggle svg,
.ec-date__clear svg { display: block; }

/* calendario */
.ec-date__pop {
  position: fixed;
  z-index: 1090; /* sopra modal e offcanvas */
  width: 18.5rem;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: var(--clb-space-3);
}
.ec-date__head {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: var(--clb-space-1);
  margin-bottom: var(--clb-space-2);
}
.ec-date__nav,
.ec-date__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 var(--clb-space-2);
  border: 0;
  border-radius: min(var(--clb-radius-md, 6px), 8px);
  background: transparent;
  color: var(--clb-color-text);
  cursor: pointer;
}
.ec-date__nav { width: 2rem; padding: 0; color: var(--clb-color-text-2); }
.ec-date__nav svg { display: block; }
.ec-date__title {
  font-weight: 600;
  text-transform: capitalize;
  font-variant-numeric: tabular-nums;
}
.ec-date__nav:hover:not(:disabled),
.ec-date__title:hover:not(:disabled) { background: var(--clb-color-surface-sunk); color: var(--clb-color-text); }
.ec-date__nav:disabled { opacity: 0.35; cursor: default; }
.ec-date__title:disabled { cursor: default; opacity: 1; }

.ec-date__grid { display: grid; gap: 2px; }
.ec-date__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ec-date__grid--wide .ec-date__row { grid-template-columns: repeat(3, 1fr); gap: var(--clb-space-1); }
.ec-date__grid--wide { gap: var(--clb-space-1); }
.ec-date__row > [role="gridcell"] { display: flex; }
.ec-date__weekday {
  padding: var(--clb-space-1) 0;
  color: var(--clb-color-text-3);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  text-align: center;
}
.ec-date__day,
.ec-date__cell {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: min(var(--clb-radius-md, 6px), 8px);
  background: transparent;
  color: var(--clb-color-text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ec-date__day {
  height: 2.25rem;
  font-size: var(--clb-text-sm);
}
.ec-date__cell {
  height: 2.75rem;
  font-size: var(--clb-text-sm);
  text-transform: capitalize;
}
.ec-date__day.is-weekend { color: var(--clb-color-text-2); }
.ec-date__day.is-outside { color: var(--clb-color-text-3); }
.ec-date__day:hover,
.ec-date__cell:hover,
/* la data che si sta scrivendo nel campo (il focus è ancora lì, non nella griglia) */
.ec-date__pop:not(:focus-within) .is-cursor:not(.is-selected) { background: var(--clb-color-surface-sunk); }
.ec-date__day.is-today,
.ec-date__cell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--clb-color-accent);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-weight: 600;
}
.ec-date__day.is-selected,
.ec-date__cell.is-selected,
.ec-date__day.is-selected:hover,
.ec-date__cell.is-selected:hover {
  background: var(--clb-color-accent);
  box-shadow: none;
  color: var(--clb-color-on-accent, var(--clb-color-accent-fg));
  font-weight: 600;
}
.ec-date__day.is-disabled,
.ec-date__cell.is-disabled {
  background: transparent;
  color: var(--clb-color-text-3);
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}
.ec-date__nav:focus-visible,
.ec-date__title:focus-visible,
.ec-date__day:focus-visible,
.ec-date__cell:focus-visible,
.ec-date__action:focus-visible {
  outline: 2px solid var(--clb-color-accent);
  outline-offset: 1px;
}
.ec-date__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--clb-space-2);
  padding-top: var(--clb-space-2);
  border-top: 1px solid var(--clb-color-border-hair);
}
.ec-date__action {
  padding: var(--clb-space-1) var(--clb-space-2);
  border: 0;
  border-radius: min(var(--clb-radius-sm, 4px), 6px);
  background: transparent;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-size: var(--clb-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.ec-date__action:hover:not(:disabled) { background: var(--clb-color-accent-bg); }
.ec-date__action:disabled { color: var(--clb-color-text-3); opacity: 0.6; cursor: default; }

/* ============================================================
 *  v0.3 — Dropdown generico
 * ============================================================ */
.ec-dropdown__toggle { display: inline-flex; align-items: center; gap: 0.45em; }
.ec-dropdown__icon { display: inline-flex; }
.ec-dropdown__badge {
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ec-dropdown__panel {
  width: var(--ec-dropdown-w, auto);
  min-width: 14rem;
  max-width: calc(100vw - 2 * var(--clb-space-4));
  padding: var(--clb-space-4);
}
.ec-dropdown__loading {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--clb-color-text-3);
  font-size: var(--clb-text-sm);
}

/* ============================================================
 *  v0.3 — Segmented + chips
 * ============================================================ */
.ec-segmented { flex-wrap: wrap; }
.ec-segmented__option { white-space: nowrap; }
.ec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clb-space-2);
}
.ec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 5px 14px;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  font-size: var(--clb-text-sm);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ec-chip:hover { border-color: var(--clb-color-border-strong); }
.btn-check:checked + .ec-chip {
  border-color: var(--clb-color-accent);
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}
.btn-check:checked + .ec-chip::before {
  content: "";
  width: 0.45em;
  height: 0.75em;
  margin-right: 0.1em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.btn-check:focus-visible + .ec-chip { box-shadow: var(--clb-focus-ring, 0 0 0 3px var(--clb-color-accent-bg)); }

/* ============================================================
 *  Colonne ridimensionabili
 * ============================================================ */
table[data-ec-resizable] > thead > tr > th { position: relative; }
.ec-col-resize {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 2;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
}
/* filetto visibile solo al passaggio: la tabella a riposo resta pulita */
.ec-col-resize::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 4px;
  width: 1px;
  background: var(--clb-color-border-strong);
  opacity: 0;
  transition: opacity 0.15s ease;
}
table[data-ec-resizable] > thead:hover .ec-col-resize::after { opacity: 1; }
.ec-col-resize:hover::after,
.ec-table--resizing .ec-col-resize::after {
  top: 0;
  bottom: 0;
  width: 2px;
  opacity: 1;
  background: var(--clb-color-accent);
}
.ec-table--resizing { cursor: col-resize; user-select: none; }
/* larghezze fissate: il testo lungo si tronca invece di allargare la colonna */
table.ec-table--sized { table-layout: fixed; }
table.ec-table--sized > thead > tr > th,
table.ec-table--sized > tbody > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* menu e dropdown nelle celle non vanno tagliati */
table.ec-table--sized > tbody > tr > td:has(.dropdown) { overflow: visible; }

/* ============================================================
 *  Righe per pagina
 * ============================================================ */
.ec-pagination__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-2) var(--clb-space-4);
}
.ec-pagination__size {
  display: inline-flex;
  align-items: center;
  gap: var(--clb-space-2);
  margin: 0;
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
}
/* spazio esplicito per la freccia: alcuni style azzerano il padding destro di .form-select-sm */
.ec-pagination__size .form-select {
  width: auto;
  min-width: 4.75rem;
  padding: 0.25rem 2rem 0.25rem 0.65rem;
  background-position: right 0.6rem center;
}



/* ============================================================
 *  Scrollbar nei pannelli dei componenti: sottile, colori dello style
 * ============================================================ */
/* Firefox: proprietà standard. Chrome/Edge/Safari usano ::-webkit-scrollbar qui sotto
   (con le proprietà standard Chrome ignorerebbe quegli stili e mostrerebbe le frecce). */
@supports not selector(::-webkit-scrollbar) {
  .ec-combo__list,
  .ec-dropdown__panel,
  .ec-actions__menu,
  .ec-modal--sized .modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--clb-color-border-strong) transparent;
  }
}
.ec-combo__list::-webkit-scrollbar,
.ec-dropdown__panel::-webkit-scrollbar,
.ec-actions__menu::-webkit-scrollbar,
.ec-modal--sized .modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
.ec-combo__list::-webkit-scrollbar-track,
.ec-dropdown__panel::-webkit-scrollbar-track,
.ec-actions__menu::-webkit-scrollbar-track,
.ec-modal--sized .modal-body::-webkit-scrollbar-track { background: transparent; }
.ec-combo__list::-webkit-scrollbar-thumb,
.ec-dropdown__panel::-webkit-scrollbar-thumb,
.ec-actions__menu::-webkit-scrollbar-thumb,
.ec-modal--sized .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--clb-color-border-strong);
  border: 3px solid transparent;
  border-radius: var(--clb-radius-pill, 999px);
  background-clip: padding-box;
}
.ec-combo__list::-webkit-scrollbar-thumb:hover,
.ec-dropdown__panel::-webkit-scrollbar-thumb:hover { background-color: var(--clb-color-text-3); }
.ec-combo__list::-webkit-scrollbar-button,
.ec-dropdown__panel::-webkit-scrollbar-button,
.ec-actions__menu::-webkit-scrollbar-button,
.ec-modal--sized .modal-body::-webkit-scrollbar-button { display: none; }
.ec-combo__list::-webkit-scrollbar-corner,
.ec-dropdown__panel::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
 *  v0.4 — Movimento
 *  Gli elementi già visibili al caricamento non vengono mai nascosti (niente
 *  sfarfallio): il JS "arma" solo quelli sotto la piega.
 * ============================================================ */
[data-ec-reveal].is-armed {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--ec-delay, 0ms);
}
[data-ec-reveal].is-armed:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
[data-ec-parallax] {
  transform: translate3d(0, var(--ec-parallax-y, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-ec-reveal].is-armed:not(.is-in) { opacity: 1; transform: none; }
  [data-ec-parallax] { transform: none; }
}

/* ============================================================
 *  v0.4 — Sezioni e intestazioni
 *  Ritmo verticale: tre misure (tight, default, lg) per tutte le
 *  sezioni. L'eyebrow porta un filetto: è la firma dei blocchi.
 * ============================================================ */
.ec-section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--clb-color-bg);
  color: var(--clb-color-text);
}
.ec-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ec-section--lg { padding-block: clamp(5rem, 12vw, 10rem); }
.ec-section--tint { background: var(--clb-color-surface-2); }
.ec-section--surface { background: var(--clb-color-surface); }
.ec-section--accent { background: var(--clb-color-accent-bg); }
/* --strong: la sezione porta data-bs-theme="dark", quindi riceve i token scuri dello style */
.ec-section--strong { background: var(--clb-color-bg); }

/* eyebrow con filetto: intestazioni, hero, CTA, FAQ */
.ec-section-header__eyebrow,
.ec-hero__eyebrow,
.ec-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--clb-space-5);
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}
.ec-section-header__eyebrow::before,
.ec-hero__eyebrow::before,
.ec-cta__eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}
.ec-section-header__number { font-family: var(--clb-font-mono); letter-spacing: 0.04em; color: var(--clb-color-text-2); }

.ec-section-header {
  display: grid;
  gap: var(--clb-space-6) var(--clb-space-10);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.ec-section-header__title {
  max-width: 22ch;
  margin: 0;
  font-family: var(--clb-font-display);
  font-size: clamp(2rem, 1.15rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ec-section-header__side { display: grid; gap: var(--clb-space-5); justify-items: start; }
.ec-section-header__subtitle {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(var(--clb-text-base), 0.95rem + 0.3vw, var(--clb-text-md));
  line-height: var(--clb-leading-relaxed, 1.6);
  color: var(--clb-color-text-2);
  text-wrap: pretty;
}
.ec-section-header__actions { display: flex; flex-wrap: wrap; gap: var(--clb-space-2); }
/* --center: tutto in asse, filetto da entrambi i lati */
.ec-section-header--center { justify-items: center; text-align: center; }
.ec-section-header--center .ec-section-header__title { margin-inline: auto; }
.ec-section-header--center .ec-section-header__side { justify-items: center; }
.ec-section-header--center .ec-section-header__eyebrow::after { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
/* --split: titolo a sinistra, testo e azioni a destra allineati in basso */
@media (min-width: 992px) {
  .ec-section-header--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .ec-section-header--split .ec-section-header__side { padding-bottom: 0.4rem; }
}

/* ============================================================
 *  v0.4 — Hero
 *  Varianti: cover · cover-left · form (media di sfondo con velo)
 *            editorial · frame · collage (media in colonna)
 * ============================================================ */
.ec-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--clb-color-bg);
  color: var(--clb-color-text);
}
.ec-hero--cover,
.ec-hero--cover-left { min-height: calc(100svh - var(--ec-nav-h, 0px)); }
.ec-hero--form { min-height: 88svh; }
.ec-hero--screen { min-height: calc(100svh - var(--ec-nav-h, 0px)); }
.ec-hero--tall { min-height: 78svh; }
.ec-hero--auto { min-height: 0; }
.ec-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* più alto del riquadro: lo spazio per la parallasse */
.ec-hero__bg-inner { position: absolute; inset: -12% 0; }
.ec-hero__img,
.ec-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ec-hero__img--kenburns { animation: ec-kenburns 16s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes ec-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
/* velo: si fonde con il fondo dello style (scuro per overlay="dark", chiaro per "light") */
.ec-hero--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--clb-color-bg) 62%, transparent);
}
.ec-hero--cover-left.ec-hero--media::after {
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--clb-color-bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--clb-color-bg) 82%, transparent) 50%,
    color-mix(in srgb, var(--clb-color-bg) 50%, transparent) 100%);
}
.ec-hero--form.ec-hero--media::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--clb-color-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--clb-color-bg) 76%, transparent) 50%,
    color-mix(in srgb, var(--clb-color-bg) 45%, transparent) 100%);
}
@media (max-width: 767.98px) {
  .ec-hero--form.ec-hero--media::after { background: color-mix(in srgb, var(--clb-color-bg) 80%, transparent); }
}
.ec-hero__container { position: relative; }
.ec-hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.ec-hero__title {
  margin: 0;
  font-family: var(--clb-font-display);
  font-size: clamp(2.5rem, 1.3rem + 4.2vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.ec-hero__subtitle {
  max-width: 38rem;
  margin: var(--clb-space-6) 0 0;
  font-size: clamp(var(--clb-text-md), 0.95rem + 0.55vw, var(--clb-text-lg));
  line-height: var(--clb-leading-relaxed, 1.55);
  color: var(--clb-color-text-2);
  text-wrap: pretty;
}
/* sopra foto e video niente testo secondario: i grigi e l'accent non reggono sui pixel
   chiari dell'immagine; la gerarchia la fanno dimensione e peso */
.ec-hero--media .ec-hero__eyebrow,
.ec-hero--media .ec-hero__subtitle,
.ec-cta--image .ec-cta__eyebrow,
.ec-cta--image .ec-cta__body { color: var(--clb-color-text); }
.ec-hero__body { margin-top: var(--clb-space-6); }
.ec-hero__actions { display: flex; flex-wrap: wrap; gap: var(--clb-space-3); margin-top: var(--clb-space-10); }
.ec-hero__below { position: relative; margin-top: clamp(3rem, 7vw, 5.5rem); }
.ec-hero__media { position: relative; margin: 0; }
.ec-hero__media > img,
.ec-hero__media > video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--clb-radius-lg); }
.ec-hero__badge {
  position: absolute;
  left: var(--clb-space-4);
  bottom: var(--clb-space-4);
  max-width: 17rem;
  padding: var(--clb-space-5) var(--clb-space-6);
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-md);
  box-shadow: var(--clb-shadow-lg);
  color: var(--clb-color-text);
}
.ec-hero__aside {
  padding: clamp(var(--clb-space-6), 3vw, var(--clb-space-10));
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
  box-shadow: var(--clb-shadow-lg);
}

/* --cover: tutto in asse, al centro dello schermo */
.ec-hero--cover .ec-hero__inner { justify-items: center; text-align: center; }
.ec-hero--cover .ec-hero__text { max-width: 56rem; }
.ec-hero--cover .ec-hero__subtitle { margin-inline: auto; }
.ec-hero--cover .ec-hero__actions { justify-content: center; }

/* --cover-left: testo in basso a sinistra, come una copertina */
.ec-hero--cover-left { justify-content: flex-end; padding-bottom: clamp(3rem, 6vw, 5rem); }
.ec-hero--cover-left .ec-hero__text { max-width: 60rem; }
.ec-hero--cover-left .ec-hero__title { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.25rem); }

/* --editorial: niente sfondo, titolo enorme, sottotitolo e azioni affiancati, media in fascia */
.ec-hero--editorial .ec-hero__text { display: grid; gap: 0 var(--clb-space-10); }
.ec-hero--editorial .ec-hero__title { font-size: clamp(3rem, 1rem + 7.5vw, 8rem); line-height: 0.94; letter-spacing: -0.05em; }
.ec-hero--editorial .ec-hero__eyebrow { justify-self: start; }
@media (min-width: 992px) {
  .ec-hero--editorial .ec-hero__text {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "eyebrow eyebrow" "title title" "sub actions" "body body";
  }
  .ec-hero--editorial .ec-hero__eyebrow { grid-area: eyebrow; }
  .ec-hero--editorial .ec-hero__title { grid-area: title; }
  .ec-hero--editorial .ec-hero__subtitle { grid-area: sub; margin-top: var(--clb-space-10); }
  .ec-hero--editorial .ec-hero__body { grid-area: body; }
  .ec-hero--editorial .ec-hero__actions { grid-area: actions; align-self: end; justify-content: flex-end; }
}
.ec-hero--editorial .ec-hero__media { aspect-ratio: 21 / 9; }
@media (max-width: 767.98px) { .ec-hero--editorial .ec-hero__media { aspect-ratio: 4 / 3; } }

/* --frame e --collage: testo a sinistra, media in colonna */
@media (min-width: 992px) {
  .ec-hero--frame .ec-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .ec-hero--collage .ec-hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ec-hero--form .ec-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .ec-hero--frame .ec-hero__badge { left: calc(var(--clb-space-8) * -1); bottom: var(--clb-space-8); }
}
.ec-hero--frame .ec-hero__media { aspect-ratio: 4 / 5; }
/* da desktop la foto 4:5 non deve spingere la hero oltre lo schermo: altezza al massimo quella
   della finestra meno barra e respiro, la foto si ritaglia (object-fit) invece di allungarsi */
@media (min-width: 992px) {
  .ec-hero--frame { padding-block: clamp(3rem, 6vw, 5rem); }
  .ec-hero--frame .ec-hero__media {
    max-height: max(24rem, calc(100svh - var(--ec-nav-h, 4.5rem) - 2 * clamp(3rem, 6vw, 5rem)));
    margin-inline-start: auto; /* se si stringe resta allineata al bordo destro del contenuto */
  }
}
/* collage: la prima immagine alta a sinistra, le altre due a destra sfalsate */
.ec-hero--collage .ec-hero__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--clb-space-4);
  height: clamp(24rem, 48vw, 38rem);
}
.ec-hero--collage .ec-hero__media > * { min-height: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--clb-radius-lg); }
.ec-hero--collage .ec-hero__media > :first-child { grid-row: 1 / 3; }
.ec-hero--collage .ec-hero__media > :nth-child(2) { transform: translateY(var(--clb-space-8)); }
.ec-hero--collage .ec-hero__media > :nth-child(3) { transform: translateY(var(--clb-space-8)); }

.ec-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--clb-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--clb-space-2);
  transform: translateX(-50%);
  color: var(--clb-color-text);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.ec-hero--cover-left .ec-hero__scroll { left: auto; right: var(--clb-space-8); transform: none; }
.ec-hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 2.5rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--clb-color-text) 25%, transparent);
}
.ec-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clb-color-text);
  transform: translateY(-100%);
  animation: ec-scroll-line 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ec-scroll-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
/* ingresso a cascata, solo animazione CSS (fill backwards: lo stato finale resta libero) */
@media (prefers-reduced-motion: no-preference) {
  .ec-hero__text > *,
  .ec-hero__media,
  .ec-hero__aside { animation: ec-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .ec-hero__text > :nth-child(2) { animation-delay: 0.1s; }
  .ec-hero__text > :nth-child(3) { animation-delay: 0.2s; }
  .ec-hero__text > :nth-child(4) { animation-delay: 0.3s; }
  .ec-hero__text > :nth-child(5) { animation-delay: 0.4s; }
  .ec-hero__media, .ec-hero__aside { animation-delay: 0.25s; }
}
@keyframes ec-hero-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .ec-hero__img--kenburns, .ec-hero__scroll-line::after { animation: none; }
}

/* ============================================================
 *  v0.4 — Statistiche "inline" (stat.grid/inline)
 *  Numeri grandi senza card, filetto sopra, etichetta sotto.
 * ============================================================ */
.ec-stat-grid--inline { gap: var(--clb-space-8) var(--clb-space-10); }
.ec-stat-grid--inline .ec-stat {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--clb-color-border-strong);
  border-radius: 0;
  box-shadow: none;
}
.ec-stat-grid--inline .ec-stat::before { display: none; }
.ec-stat-grid--inline .ec-stat__body { display: flex; flex-direction: column; padding: var(--clb-space-5) 0 0; }
.ec-stat-grid--inline .ec-stat__head { order: 2; margin-top: var(--clb-space-2); }
.ec-stat-grid--inline .ec-stat__label { font-size: var(--clb-text-sm); letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--clb-color-text-2); }
.ec-stat-grid--inline .ec-stat__value { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); letter-spacing: -0.03em; }
.ec-stat-grid--inline .ec-stat__note { order: 3; }
.ec-hero--media .ec-stat-grid--inline .ec-stat__label { color: var(--clb-color-text); }

/* ============================================================
 *  v0.4 — Feature (feature.grid)
 *  Varianti: icons · cards · numbered · list · bento
 * ============================================================ */
.ec-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ec-grid-min, 15rem), 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem) var(--clb-space-8);
}
.ec-feature { position: relative; display: flex; flex-direction: column; gap: var(--clb-space-5); color: inherit; text-decoration: none; }
.ec-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--clb-radius-md);
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-size: 1.35rem;
  line-height: 1;
}
.ec-feature__number {
  font-family: var(--clb-font-display);
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-variant-numeric: tabular-nums;
}
.ec-feature__title {
  margin: 0 0 var(--clb-space-3);
  font-family: var(--clb-font-display);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.ec-feature__arrow { display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.4em; vertical-align: -0.05em; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.ec-feature__text { margin: 0; font-size: var(--clb-text-md); line-height: var(--clb-leading-relaxed, 1.6); color: var(--clb-color-text-2); text-wrap: pretty; }
.ec-feature__extra { margin-top: var(--clb-space-4); }
.ec-feature__body > :last-child { margin-bottom: 0; }
.ec-feature--link:hover .ec-feature__title { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-feature--link:hover .ec-feature__arrow { transform: translateX(4px); }

/* --cards: ogni voce in un riquadro */
.ec-feature-grid--cards { gap: var(--clb-space-5); }
.ec-feature-grid--cards .ec-feature {
  padding: clamp(var(--clb-space-6), 3vw, var(--clb-space-8));
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
  transition: border-color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ec-feature-grid--cards .ec-feature--link:hover { border-color: var(--clb-color-accent); transform: translateY(-2px); }

/* --numbered: numeri grandi automatici (01, 02…) e filetto sopra */
.ec-feature-grid--numbered { counter-reset: ec-feature; grid-template-columns: minmax(0, 1fr); gap: 0 var(--clb-space-12, 3rem); }
@media (min-width: 768px) { .ec-feature-grid--numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ec-feature-grid--numbered .ec-feature {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--clb-space-5);
  padding-block: var(--clb-space-8);
  border-top: 1px solid var(--clb-color-border-strong);
  counter-increment: ec-feature;
}
.ec-feature-grid--numbered .ec-feature::before {
  content: counter(ec-feature, decimal-leading-zero);
  font-family: var(--clb-font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-variant-numeric: tabular-nums;
}
.ec-feature-grid--numbered .ec-feature__icon,
.ec-feature-grid--numbered .ec-feature__number { display: none; }

/* --list: elenco compatto su due colonne, icona piccola e divisori */
.ec-feature-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0 var(--clb-space-12, 3rem); }
@media (min-width: 768px) { .ec-feature-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ec-feature-grid--list .ec-feature {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--clb-space-4);
  padding-block: var(--clb-space-5);
  border-bottom: 1px solid var(--clb-color-border);
}
.ec-feature-grid--list .ec-feature__icon { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.ec-feature-grid--list .ec-feature__title { margin-bottom: var(--clb-space-1); font-family: var(--clb-font-body); font-size: var(--clb-text-md); }
.ec-feature-grid--list .ec-feature__text { font-size: var(--clb-text-sm); }

/* --bento: riquadri di misure diverse (span="2" sulle colonne, rows="2" sulle righe) */
.ec-feature-grid--bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(15rem, auto); gap: var(--clb-space-4); }
@media (min-width: 768px) { .ec-feature-grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ec-feature-grid--bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ec-feature-grid--bento .ec-feature {
  overflow: hidden;
  padding: clamp(var(--clb-space-6), 2.5vw, var(--clb-space-8));
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
}
.ec-feature-grid--bento .ec-feature__body { margin-top: auto; }
@media (min-width: 768px) {
  .ec-feature-grid--bento .ec-feature--span-2 { grid-column: span 2; }
  .ec-feature-grid--bento .ec-feature--rows-2 { grid-row: span 2; }
}
.ec-feature__media { margin: 0; overflow: hidden; border-radius: var(--clb-radius-md); }
.ec-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ec-feature-grid--bento .ec-feature__media { flex: 1 1 8rem; min-height: 8rem; }
.ec-feature-grid:not(.ec-feature-grid--bento) .ec-feature__media { aspect-ratio: 4 / 3; }
.ec-feature--link:hover .ec-feature__media img { transform: scale(1.04); }

/* ============================================================
 *  v0.4 — Media card
 *  Varianti: stack · overlay · row · minimal · listing
 * ============================================================ */
.ec-media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
  color: var(--clb-color-text);
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.ec-media-card--link:hover { transform: translateY(-3px); border-color: var(--clb-color-border); box-shadow: var(--clb-shadow-lg); }
.ec-media-card__media {
  position: relative;
  flex: none;
  aspect-ratio: var(--ec-ratio, 4 / 3);
  overflow: hidden;
  background: var(--clb-color-surface-sunk);
}
.ec-media-card__img { display: block; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ec-media-card__img--cover { object-fit: cover; }
.ec-media-card__img--contain { object-fit: contain; padding: var(--clb-space-4); }
.ec-media-card--link:hover .ec-media-card__img--cover { transform: scale(1.04); }
.ec-media-card__badges { position: absolute; top: var(--clb-space-4); left: var(--clb-space-4); z-index: 1; display: flex; flex-wrap: wrap; gap: var(--clb-space-2); }
.ec-media-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--clb-space-2);
  padding: var(--clb-space-6);
}
.ec-media-card__eyebrow {
  margin: 0;
  font-size: var(--clb-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}
.ec-media-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--clb-space-3);
  margin: 0;
  font-family: var(--clb-font-display);
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ec-media-card__arrow { flex: none; width: 1rem; height: 1rem; color: var(--clb-color-text-2); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease; }
.ec-media-card--link:hover .ec-media-card__arrow { transform: translateX(4px); color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-media-card__text { margin: 0; font-size: var(--clb-text-base); line-height: var(--clb-leading-relaxed, 1.55); color: var(--clb-color-text-2); }
.ec-media-card__facts { display: flex; flex-wrap: wrap; gap: var(--clb-space-1) var(--clb-space-4); margin: var(--clb-space-1) 0 0; padding: 0; list-style: none; font-size: var(--clb-text-sm); color: var(--clb-color-text-2); }
.ec-media-card__facts li + li::before { content: "·"; margin-right: var(--clb-space-4); color: var(--clb-color-text-3); }
.ec-media-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-3);
  margin-top: auto;
  padding-top: var(--clb-space-4);
  font-size: var(--clb-text-sm);
}
.ec-media-card__meta { color: var(--clb-color-text-2); }
.ec-media-card__price { font-family: var(--clb-font-display); font-size: var(--clb-text-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--clb-color-text); font-variant-numeric: tabular-nums; }

/* --overlay: testo sopra la foto, velo dal basso (la card porta data-bs-theme="dark") */
.ec-media-card--overlay { display: grid; border: 0; background: var(--clb-color-bg); }
.ec-media-card--overlay > * { grid-area: 1 / 1; }
.ec-media-card--overlay .ec-media-card__media { aspect-ratio: var(--ec-ratio, 4 / 5); }
.ec-media-card--overlay .ec-media-card__body {
  z-index: 1;
  align-self: end;
  /* la sfumatura sta tutta nel padding alto: il testo resta sulla parte densa */
  padding-top: var(--clb-space-12, 3rem);
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--clb-color-bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--clb-color-bg) 88%, transparent) 72%,
    transparent 100%);
}
.ec-media-card--overlay .ec-media-card__eyebrow,
.ec-media-card--overlay .ec-media-card__text,
.ec-media-card--overlay .ec-media-card__meta,
.ec-media-card--overlay .ec-media-card__arrow { color: var(--clb-color-text); }
.ec-media-card--overlay .ec-media-card__foot { margin-top: var(--clb-space-2); }

/* --row: immagine a sinistra */
@media (min-width: 576px) {
  .ec-media-card--row { flex-direction: row; }
  .ec-media-card--row .ec-media-card__media { width: 42%; aspect-ratio: auto; min-height: 12rem; }
}

/* --minimal: niente riquadro, solo immagine e testo */
.ec-media-card--minimal { overflow: visible; background: transparent; border: 0; border-radius: 0; }
.ec-media-card--minimal.ec-media-card--link:hover { transform: none; box-shadow: none; }
.ec-media-card--minimal .ec-media-card__media { border-radius: var(--clb-radius-lg); }
.ec-media-card--minimal .ec-media-card__body { padding: var(--clb-space-5) 0 0; }
.ec-media-card--minimal.ec-media-card--link:hover .ec-media-card__title { color: var(--clb-color-accent-text, var(--clb-color-accent)); }

/* --listing: dati in riga e prezzo in evidenza (immobili, prodotti, corsi) */
.ec-media-card--listing .ec-media-card__foot { padding-top: var(--clb-space-4); margin-top: auto; border-top: 1px solid var(--clb-color-border-hair); }
.ec-media-card--listing .ec-media-card__body { gap: var(--clb-space-3); }
@media (prefers-reduced-motion: reduce) {
  .ec-media-card--link:hover, .ec-media-card--link:hover .ec-media-card__img--cover { transform: none; }
}

/* ============================================================
 *  v0.4 — Citazioni / testimonianze (quote)
 *  Varianti: card · large · plain
 * ============================================================ */
.ec-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--ec-grid-min, 18rem), 100%), 1fr)); gap: var(--clb-space-5); }
.ec-quote { display: flex; flex-direction: column; gap: var(--clb-space-6); margin: 0; color: var(--clb-color-text); }
.ec-quote__mark { width: 2rem; height: auto; color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-quote__text { margin: 0; font-size: var(--clb-text-md); line-height: var(--clb-leading-relaxed, 1.6); }
.ec-quote__text > :last-child { margin-bottom: 0; }
.ec-quote__author { display: flex; align-items: center; gap: var(--clb-space-3); margin-top: auto; }
.ec-quote__avatar { flex: none; width: 3rem; height: 3rem; border-radius: var(--clb-radius-pill, 999px); object-fit: cover; }
.ec-quote__name { display: block; font-weight: 600; }
.ec-quote__role { display: block; font-size: var(--clb-text-sm); color: var(--clb-color-text-2); }
.ec-quote--card {
  height: 100%;
  padding: clamp(var(--clb-space-6), 3vw, var(--clb-space-8));
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
}
.ec-quote--large { align-items: center; text-align: center; }
.ec-quote--large .ec-quote__mark { width: 3rem; }
.ec-quote--large .ec-quote__text {
  max-width: 52rem;
  font-family: var(--clb-font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ec-quote--plain { padding-left: var(--clb-space-6); border-left: 2px solid var(--clb-color-accent); }
.ec-quote--plain .ec-quote__mark { display: none; }
.ec-quote--plain .ec-quote__text { font-size: var(--clb-text-lg); }

/* ============================================================
 *  v0.4 — Split media + testo
 *  Varianti: plain · offset (riquadro tinto sfalsato dietro al media)
 * ============================================================ */
.ec-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.ec-split--start { align-items: start; }
@media (min-width: 992px) {
  .ec-split--66 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ec-split--57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ec-split--75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ec-split--reverse .ec-split__media { order: 2; }
}
.ec-split__media { position: relative; margin: 0; }
.ec-split__media img,
.ec-split__media video { display: block; width: 100%; height: auto; border-radius: var(--clb-radius-lg); object-fit: cover; }
.ec-split__caption {
  display: flex;
  align-items: center;
  gap: var(--clb-space-3);
  margin-top: var(--clb-space-4);
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
}
.ec-split__caption::before { content: ""; flex: none; width: 1.25rem; height: 1px; background: var(--clb-color-border-strong); }
.ec-split__text { max-width: 36rem; }
.ec-split__text > :last-child { margin-bottom: 0; }
.ec-split--offset .ec-split__media { isolation: isolate; }
.ec-split--offset .ec-split__media::before {
  content: "";
  position: absolute;
  inset: var(--clb-space-8) calc(var(--clb-space-6) * -1) calc(var(--clb-space-6) * -1) var(--clb-space-8);
  z-index: -1;
  background: var(--clb-color-accent-bg);
  /* il bordo lo stacca anche da una sezione tinta, dove accent-bg si confonde col fondo */
  border: 1px solid color-mix(in srgb, var(--clb-color-accent) 45%, transparent);
  border-radius: var(--clb-radius-lg);
}
.ec-split--offset.ec-split--reverse .ec-split__media::before { inset: var(--clb-space-8) var(--clb-space-8) calc(var(--clb-space-6) * -1) calc(var(--clb-space-6) * -1); }
.ec-split--offset .ec-split__caption { position: relative; }
/* a una colonna la decorazione sporgerebbe oltre il bordo dello schermo: la foto le lascia spazio */
@media (max-width: 991.98px) {
  .ec-split--offset .ec-split__media { margin-inline-end: var(--clb-space-6); }
  .ec-split--offset.ec-split--reverse .ec-split__media { margin-inline: var(--clb-space-6) 0; }
}

/* ============================================================
 *  v0.4 — FAQ
 *  Varianti: split · stack · cards · grid
 * ============================================================ */
.ec-faq { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 992px) {
  .ec-faq--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--clb-space-16, 4rem); }
  .ec-faq--split .ec-faq__aside { position: sticky; top: var(--clb-space-12, 3rem); align-self: start; }
}
.ec-faq--stack .ec-faq__aside { text-align: center; }
.ec-faq--stack .ec-faq__aside .ec-section-header__eyebrow::after { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
.ec-faq--stack .ec-faq__list,
.ec-faq--cards .ec-faq__list { width: 100%; max-width: 50rem; margin-inline: auto; }
.ec-faq--cards .ec-faq__aside { text-align: center; }
.ec-faq__title {
  margin: 0;
  font-family: var(--clb-font-display);
  font-size: clamp(2rem, 1.15rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ec-faq__subtitle { max-width: 34rem; margin: var(--clb-space-5) 0 0; font-size: var(--clb-text-md); line-height: var(--clb-leading-relaxed, 1.6); color: var(--clb-color-text-2); }
.ec-faq--stack .ec-faq__subtitle, .ec-faq--cards .ec-faq__subtitle { margin-inline: auto; }
.ec-faq__list { border-top: 1px solid var(--clb-color-border); }
.ec-faq__item { border-bottom: 1px solid var(--clb-color-border); interpolate-size: allow-keywords; }
.ec-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-6);
  padding: var(--clb-space-6) 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
}
.ec-faq__question::-webkit-details-marker { display: none; }
.ec-faq__question:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 4px; border-radius: var(--clb-radius-sm); }
/* "+" disegnato in un cerchio: diventa "−" ad aperto */
.ec-faq__icon {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--clb-color-border-strong);
  border-radius: var(--clb-radius-pill, 999px);
  color: var(--clb-color-text);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ec-faq__icon::before,
.ec-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.375rem;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ec-faq__icon::after { transform: rotate(90deg); }
/* su accent pieno: on-accent se lo style lo definisce (in alcuni accent-fg è "accent come testo") */
.ec-faq__item[open] .ec-faq__icon { border-color: var(--clb-color-accent); background: var(--clb-color-accent); color: var(--clb-color-on-accent, var(--clb-color-accent-fg)); }
.ec-faq__item[open] .ec-faq__icon::after { transform: rotate(0deg); }
.ec-faq__answer { max-width: 62ch; padding-bottom: var(--clb-space-6); font-size: var(--clb-text-md); line-height: var(--clb-leading-relaxed, 1.6); color: var(--clb-color-text-2); }
.ec-faq__answer > :last-child { margin-bottom: 0; }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .ec-faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.35s allow-discrete;
    }
    .ec-faq__item[open]::details-content { block-size: auto; }
  }
}
/* --cards: ogni domanda in un riquadro */
.ec-faq--cards .ec-faq__list { display: grid; gap: var(--clb-space-3); border: 0; }
.ec-faq--cards .ec-faq__item {
  padding-inline: var(--clb-space-6);
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-md);
  transition: border-color 0.2s ease;
}
.ec-faq--cards .ec-faq__item[open] { border-color: var(--clb-color-border-strong); }
/* --grid: domande e risposte tutte aperte, su due colonne */
.ec-faq--grid .ec-faq__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--clb-space-10) var(--clb-space-12, 3rem);
  border: 0;
}
.ec-faq--grid .ec-faq__qa { padding-top: var(--clb-space-6); border-top: 1px solid var(--clb-color-border-strong); }
.ec-faq--grid .ec-faq__question { display: block; margin: 0 0 var(--clb-space-3); padding: 0; cursor: auto; }
.ec-faq--grid .ec-faq__answer { padding: 0; }

/* ============================================================
 *  v0.4 — CTA
 *  Varianti: box · band · image · split · minimal
 * ============================================================ */
.ec-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
  border-radius: var(--clb-radius-xl, var(--clb-radius-lg));
  color: var(--clb-color-text);
}
.ec-cta__inner { display: grid; gap: var(--clb-space-8); align-items: center; }
@media (min-width: 768px) { .ec-cta__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.ec-cta__title {
  max-width: 24ch;
  margin: 0;
  font-family: var(--clb-font-display);
  font-size: clamp(1.85rem, 1rem + 2.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ec-cta__body { max-width: 40rem; margin: var(--clb-space-5) 0 0; font-size: var(--clb-text-md); line-height: var(--clb-leading-relaxed, 1.6); color: var(--clb-color-text-2); }
.ec-cta__actions { display: flex; flex-wrap: wrap; gap: var(--clb-space-3); }
.ec-cta--box { background: var(--clb-color-accent-bg); border: 1px solid color-mix(in srgb, var(--clb-color-accent) 22%, transparent); }
/* --band: fascia scura, tutto in asse */
.ec-cta--band { background: var(--clb-color-bg); text-align: center; }
.ec-cta--band .ec-cta__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ec-cta--band .ec-cta__title, .ec-cta--band .ec-cta__body { margin-inline: auto; }
.ec-cta--band .ec-cta__actions { justify-content: center; }
.ec-cta--band .ec-cta__eyebrow::after { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
/* --image: foto con velo */
.ec-cta--image { background: var(--clb-color-bg); }
.ec-cta__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ec-cta--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--clb-color-bg) 90%, transparent), color-mix(in srgb, var(--clb-color-bg) 72%, transparent));
}
/* --split: testo e azioni a sinistra, foto a destra nello stesso riquadro */
.ec-cta--split { padding: 0; background: var(--clb-color-surface); border: 1px solid var(--clb-color-border-hair); }
.ec-cta--split .ec-cta__inner { gap: 0; align-items: stretch; }
@media (min-width: 768px) { .ec-cta--split .ec-cta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ec-cta--split .ec-cta__text { padding: clamp(2rem, 5vw, 4rem); }
.ec-cta--split .ec-cta__actions { margin-top: var(--clb-space-8); }
.ec-cta__media { position: relative; min-height: 16rem; margin: 0; }
/* la foto riempie la colonna: l'altezza la decide il testo, non la foto */
.ec-cta__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* --minimal: niente fondo, filetto sopra, titolo grande */
.ec-cta--minimal { padding: clamp(2.5rem, 5vw, 4rem) 0 0; border-top: 1px solid var(--clb-color-border-strong); border-radius: 0; }
.ec-cta--minimal .ec-cta__inner { align-items: end; }
.ec-cta--minimal .ec-cta__title { max-width: 18ch; font-size: clamp(2.25rem, 1rem + 4.4vw, 4.75rem); line-height: 0.98; letter-spacing: -0.04em; }

/* ============================================================
 *  v0.4 — Steps
 *  Varianti: timeline (linea che si riempie allo scroll) · columns · cards
 * ============================================================ */
.ec-steps-block--aside { display: grid; gap: var(--clb-space-10); }
@media (min-width: 992px) {
  .ec-steps-block--aside { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--clb-space-16, 4rem); }
  .ec-steps-block--sticky .ec-steps-block__aside { position: sticky; top: var(--clb-space-12, 3rem); align-self: start; }
}
.ec-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.ec-step { position: relative; }
.ec-step__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.ec-step__meta {
  margin: 0 0 var(--clb-space-2);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}
.ec-step__title {
  margin: 0 0 var(--clb-space-3);
  font-family: var(--clb-font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ec-step__text { font-size: var(--clb-text-md); line-height: var(--clb-leading-relaxed, 1.6); color: var(--clb-color-text-2); }
.ec-step__text > :last-child { margin-bottom: 0; }

/* --timeline */
.ec-steps--timeline { padding-left: 4.25rem; }
.ec-steps__rail {
  position: absolute;
  top: 1.375rem;
  bottom: 1.375rem;
  left: calc(1.375rem - 1px);
  width: 2px;
  background: var(--clb-color-border);
}
/* si riempie con lo scroll: --ec-progress lo scrive il motore */
.ec-steps__fill {
  position: absolute;
  inset: 0;
  background: var(--clb-color-accent);
  transform: scaleY(var(--ec-progress, 0));
  transform-origin: top;
}
.ec-steps--timeline .ec-step { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ec-steps--timeline .ec-step:last-child { padding-bottom: 0; }
.ec-steps--timeline .ec-step__marker {
  position: absolute;
  top: 0;
  left: -4.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--clb-color-border-strong);
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-bg);
  color: var(--clb-color-text-2);
  font-size: var(--clb-text-sm);
  font-weight: 700;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ec-steps--timeline .ec-step__body { padding-top: 0.55rem; }
.ec-step.is-reached .ec-step__marker { border-color: var(--clb-color-accent); background: var(--clb-color-accent); color: var(--clb-color-on-accent, var(--clb-color-accent-fg)); }

/* --columns: tappe affiancate, numero grande e filetto */
.ec-steps--columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--clb-space-10) var(--clb-space-8);
}
.ec-steps--columns .ec-step { padding-top: var(--clb-space-6); border-top: 1px solid var(--clb-color-border-strong); }
.ec-steps--columns .ec-step__marker,
.ec-steps--cards .ec-step__marker {
  margin-bottom: var(--clb-space-6);
  font-family: var(--clb-font-display);
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}

/* --cards: tappe in riquadri */
.ec-steps--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--clb-space-5);
}
.ec-steps--cards .ec-step {
  padding: clamp(var(--clb-space-6), 3vw, var(--clb-space-8));
  background: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
}

/* ============================================================
 *  v0.4 — Carousel
 * ============================================================ */
.ec-carousel { --ec-gap: var(--clb-space-6); position: relative; }
.ec-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--ec-per-view, 3) - 1) * var(--ec-gap)) / var(--ec-per-view, 3));
  gap: var(--ec-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.ec-carousel__track::-webkit-scrollbar { display: none; }
.ec-carousel__track > * { min-width: 0; scroll-snap-align: start; }
.ec-carousel__track:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 4px; border-radius: var(--clb-radius-sm); }
@media (max-width: 991.98px) { .ec-carousel__track { grid-auto-columns: calc((100% - var(--ec-gap)) / 2); } }
@media (max-width: 575.98px) { .ec-carousel__track { grid-auto-columns: 84%; } }
.ec-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-4);
  margin-top: var(--clb-space-5);
}
.ec-carousel__dots { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-text-3);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.ec-carousel__dot[aria-current="true"] { width: 24px; background: var(--clb-color-accent); }
.ec-carousel__arrows { display: flex; gap: var(--clb-space-2); margin-left: auto; }
.ec-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--clb-color-border-strong);
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  line-height: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ec-carousel__arrow:hover:not(:disabled) {
  border-color: var(--clb-color-accent);
  background: var(--clb-color-accent-bg, var(--clb-color-surface-2));
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}
.ec-carousel__arrow:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 2px; }
/* disabilitata: resta la stessa forma, si spegne solo il contenuto */
.ec-carousel__arrow:disabled { border-color: var(--clb-color-border); background: transparent; color: var(--clb-color-text-3); cursor: default; }
/* chevron disegnato (non un carattere): centrato a prescindere dal font dello style */
.ec-carousel__chevron { display: block; width: 1.125rem; height: 1.125rem; }

/* ============================================================
 *  v0.4 — Marquee
 * ============================================================ */
.ec-marquee {
  overflow: hidden;
  /* la maschera usa solo la trasparenza: currentColor vale come "pieno" */
  -webkit-mask-image: linear-gradient(90deg, transparent, currentColor 8%, currentColor 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, currentColor 8%, currentColor 92%, transparent);
}
.ec-marquee__track { display: flex; width: max-content; }
.ec-marquee.is-running .ec-marquee__track { animation: ec-marquee var(--ec-marquee-duration, 30s) linear infinite; }
.ec-marquee:hover .ec-marquee__track { animation-play-state: paused; }
@keyframes ec-marquee { to { transform: translate3d(var(--ec-marquee-shift, -50%), 0, 0); } }
.ec-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--clb-space-10);
  margin: 0;
  padding: 0 var(--clb-space-10) 0 0;
  list-style: none;
}
.ec-marquee__group > li {
  white-space: nowrap;
  font-family: var(--clb-font-display);
  font-size: var(--clb-text-lg);
  color: var(--clb-color-text-2);
}
.ec-marquee__group img { display: block; height: 2rem; width: auto; filter: grayscale(1); opacity: 0.75; }
.ec-marquee.is-static { -webkit-mask-image: none; mask-image: none; }
.ec-marquee.is-static .ec-marquee__track,
.ec-marquee.is-static .ec-marquee__group { flex-wrap: wrap; width: auto; justify-content: center; row-gap: var(--clb-space-4); }

/* ============================================================
 *  v0.4 — Video
 * ============================================================ */
.ec-video {
  aspect-ratio: var(--ec-ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface-sunk);
}
.ec-video__el { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
 *  v0.4 — Scroll-video
 *  La sezione è alta N schermi; lo stage resta incollato e il video avanza
 *  con lo scroll (--ec-progress lo scrive il motore). Senza JS o con
 *  riduzione delle animazioni: poster e didascalie in colonna.
 *  Varianti: captions · split · expand · center
 * ============================================================ */
.ec-scrollvid { position: relative; background: var(--clb-color-bg); color: var(--clb-color-text); }
.ec-scrollvid.is-live { height: calc(var(--ec-screens, 3) * 100svh); }
.ec-scrollvid__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: hidden;
}
.ec-scrollvid.is-live .ec-scrollvid__stage { position: sticky; top: 0; height: 100svh; }
.ec-scrollvid__frame { position: absolute; inset: 0; overflow: hidden; }
.ec-scrollvid__poster,
.ec-scrollvid__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec-scrollvid__video { opacity: 0; transition: opacity 0.5s ease; }
.ec-scrollvid.is-ready .ec-scrollvid__video { opacity: 1; }
.ec-scrollvid__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--clb-color-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--clb-color-bg) 80%, transparent) 40%,
    color-mix(in srgb, var(--clb-color-bg) 35%, transparent) 72%,
    transparent 100%);
}
/* senza movimento le didascalie sono in colonna su tutta l'altezza: velo uniforme */
.ec-scrollvid:not(.is-live) .ec-scrollvid__veil { background: color-mix(in srgb, var(--clb-color-bg) 80%, transparent); }
.ec-scrollvid__captions {
  position: relative;
  display: grid;
  gap: var(--clb-space-8);
  padding-block: clamp(var(--clb-space-12, 3rem), 12vh, var(--clb-space-24, 6rem));
}
.ec-scrollvid.is-live .ec-scrollvid__captions { gap: 0; }
/* una didascalia alla volta: quella che esce sparisce subito, la nuova entra un attimo dopo */
.ec-scrollvid.is-live:not(.ec-scrollvid--split) .ec-scrollvid__caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.22s ease, transform 0.3s ease;
}
.ec-scrollvid.is-live:not(.ec-scrollvid--split) .ec-scrollvid__caption.is-active {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease 0.2s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.ec-scrollvid__eyebrow {
  margin: 0 0 var(--clb-space-3);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clb-color-text);
}
.ec-scrollvid__title {
  margin: 0;
  max-width: 44rem;
  font-family: var(--clb-font-display);
  font-size: clamp(var(--clb-text-2xl), 1.2rem + 3.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ec-scrollvid__text { margin-top: var(--clb-space-4); max-width: 36rem; font-size: var(--clb-text-md); color: var(--clb-color-text); }
.ec-scrollvid__text > :last-child { margin-bottom: 0; }
.ec-scrollvid__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 3px;
  background: color-mix(in srgb, var(--clb-color-text) 15%, transparent);
}
.ec-scrollvid:not(.is-live) .ec-scrollvid__progress { display: none; }
.ec-scrollvid__progress > span {
  display: block;
  height: 100%;
  background: var(--clb-color-accent);
  transform: scaleX(var(--ec-progress, 0));
  transform-origin: left;
}

/* --center: titoli grandi in asse, velo uniforme */
.ec-scrollvid--center .ec-scrollvid__stage { align-items: center; }
.ec-scrollvid--center .ec-scrollvid__veil { background: color-mix(in srgb, var(--clb-color-bg) 58%, transparent); }
.ec-scrollvid--center .ec-scrollvid__captions { justify-items: center; text-align: center; }
.ec-scrollvid--center .ec-scrollvid__title { max-width: 18ch; font-size: clamp(2.5rem, 1.2rem + 5vw, 5.5rem); line-height: 1; letter-spacing: -0.04em; }
.ec-scrollvid--center .ec-scrollvid__text { margin-inline: auto; }
.ec-scrollvid--center .ec-scrollvid__eyebrow { margin-bottom: var(--clb-space-5); }

/* --expand: il video parte come riquadro e si allarga a tutto schermo nel primo terzo dello scroll */
.ec-scrollvid--expand.is-live .ec-scrollvid__frame {
  --ec-k: min(1, calc(var(--ec-progress, 0) * 3));
  clip-path: inset(calc((1 - var(--ec-k)) * 14%) calc((1 - var(--ec-k)) * 18%) round calc((1 - var(--ec-k)) * 1.75rem));
}

/* --split: testi che scorrono a sinistra, video fermo in cornice a destra (tema dello style, niente velo) */
.ec-scrollvid--split .ec-scrollvid__split { display: grid; gap: var(--clb-space-10); }
.ec-scrollvid--split .ec-scrollvid__stage { min-height: 0; align-items: center; overflow: visible; }
.ec-scrollvid--split .ec-scrollvid__frame { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--clb-radius-lg); }
.ec-scrollvid--split .ec-scrollvid__captions { gap: var(--clb-space-10); padding-block: clamp(3rem, 8vw, 6rem); }
.ec-scrollvid--split .ec-scrollvid__eyebrow { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-scrollvid--split .ec-scrollvid__title { font-size: clamp(var(--clb-text-xl), 1rem + 2.4vw, 3rem); }
.ec-scrollvid--split .ec-scrollvid__text { color: var(--clb-color-text-2); }
@media (min-width: 992px) {
  .ec-scrollvid--split .ec-scrollvid__split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--clb-space-16, 4rem); }
  .ec-scrollvid--split.is-live .ec-scrollvid__split { height: 100%; }
  /* ogni didascalia occupa la sua fetta di scroll; quella attiva è piena, le altre attenuate */
  .ec-scrollvid--split.is-live .ec-scrollvid__captions { grid-auto-rows: 1fr; gap: 0; padding-block: 0; }
  .ec-scrollvid--split.is-live .ec-scrollvid__caption { align-self: center; opacity: 0.28; transition: opacity 0.4s ease; }
  .ec-scrollvid--split.is-live .ec-scrollvid__caption.is-active { opacity: 1; }
  .ec-scrollvid--split.is-live .ec-scrollvid__stage { height: 100svh; }
}
@media (max-width: 991.98px) {
  /* su telefono: video in cima e incollato, testi sotto che scorrono */
  .ec-scrollvid--split .ec-scrollvid__split { grid-template-rows: auto 1fr; }
  .ec-scrollvid--split .ec-scrollvid__stage { order: -1; }
  .ec-scrollvid--split.is-live .ec-scrollvid__stage { top: var(--clb-space-4); height: auto; padding-top: var(--clb-space-4); z-index: 1; background: var(--clb-color-bg); }
  .ec-scrollvid--split.is-live .ec-scrollvid__caption { min-height: 60svh; }
}

/* ============================================================
 *  v0.4 — Sfondi animati (backdrop), solo CSS
 *  <c-backdrop variant="…"> o <c-hero backdrop="…">.
 *  Varianti: aurora · gradient · grid · dots · rings · beams
 *  Solo token dello style, intensità bassa: il testo sopra resta sul fondo.
 * ============================================================ */
.ec-backdrop { position: relative; isolation: isolate; overflow: hidden; }
.ec-backdrop__content { position: relative; }
.ec-backdrop__layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* aurora: tre macchie sfocate che si spostano lente */
.ec-backdrop--aurora > span {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.85;
  animation: ec-aurora 26s ease-in-out infinite alternate;
}
.ec-backdrop--aurora > span:nth-child(1) { top: -30vmax; left: -15vmax; background: radial-gradient(circle, color-mix(in srgb, var(--clb-color-accent) 50%, transparent), transparent 65%); }
.ec-backdrop--aurora > span:nth-child(2) { top: -10vmax; right: -25vmax; background: radial-gradient(circle, color-mix(in srgb, var(--clb-color-accent-bg) 90%, transparent), transparent 65%); animation-duration: 32s; animation-delay: -8s; }
.ec-backdrop--aurora > span:nth-child(3) { bottom: -35vmax; left: 20%; background: radial-gradient(circle, color-mix(in srgb, var(--clb-color-info, var(--clb-color-accent)) 30%, transparent), transparent 65%); animation-duration: 38s; animation-delay: -16s; }
@keyframes ec-aurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); }
  100% { transform: translate3d(-6vmax, 10vmax, 0) scale(0.95); }
}

/* gradient: sfumatura che scorre fra fondo, accent tenue e superficie */
.ec-backdrop--gradient {
  background: linear-gradient(120deg,
    var(--clb-color-bg) 0%,
    var(--clb-color-accent-bg) 30%,
    var(--clb-color-surface-2) 55%,
    color-mix(in srgb, var(--clb-color-accent-bg) 70%, var(--clb-color-bg)) 80%,
    var(--clb-color-bg) 100%);
  background-size: 300% 300%;
  animation: ec-gradient-pan 22s ease-in-out infinite alternate;
}
@keyframes ec-gradient-pan { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* grid: griglia da tavolo da disegno che scorre, sfumata ai bordi */
.ec-backdrop--grid {
  background-image:
    linear-gradient(var(--clb-color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--clb-color-border) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, currentColor 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, currentColor 30%, transparent 100%);
  animation: ec-grid-pan 14s linear infinite;
}
@keyframes ec-grid-pan { to { background-position: 56px 56px, 56px 56px; } }

/* dots: trama di punti in deriva diagonale */
.ec-backdrop--dots {
  background-image: radial-gradient(circle, var(--clb-color-border-strong) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, currentColor 25%, currentColor 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, currentColor 25%, currentColor 75%, transparent);
  animation: ec-dots-drift 18s linear infinite;
}
@keyframes ec-dots-drift { to { background-position: 44px 22px; } }

/* rings: cerchi concentrici che si allargano dal centro */
@property --ec-ring {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.ec-backdrop--rings {
  background: repeating-radial-gradient(circle at 50% 55%,
    color-mix(in srgb, var(--clb-color-accent) 22%, transparent) calc(var(--ec-ring) - 64px),
    color-mix(in srgb, var(--clb-color-accent) 22%, transparent) calc(var(--ec-ring) - 63px),
    transparent calc(var(--ec-ring) - 62px),
    transparent var(--ec-ring));
  -webkit-mask-image: radial-gradient(circle at 50% 55%, currentColor 10%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 55%, currentColor 10%, transparent 70%);
  animation: ec-rings 6s linear infinite;
}
@keyframes ec-rings { from { --ec-ring: 0px; } to { --ec-ring: 64px; } }

/* beams: fasci di luce diagonali che attraversano lenti */
.ec-backdrop--beams::before,
.ec-backdrop--beams::after {
  content: "";
  position: absolute;
  inset: -50% -20%;
  background: repeating-linear-gradient(105deg,
    transparent 0 12%,
    color-mix(in srgb, var(--clb-color-accent) 12%, transparent) 14% 16%,
    transparent 18% 30%);
  filter: blur(18px);
  animation: ec-beams 20s ease-in-out infinite alternate;
}
.ec-backdrop--beams::after { opacity: 0.6; animation-duration: 31s; animation-direction: alternate-reverse; }
@keyframes ec-beams { from { transform: translateX(-15%); } to { transform: translateX(15%); } }

@media (prefers-reduced-motion: reduce) {
  .ec-backdrop--aurora > span,
  .ec-backdrop--gradient,
  .ec-backdrop--grid,
  .ec-backdrop--dots,
  .ec-backdrop--rings,
  .ec-backdrop--beams::before,
  .ec-backdrop--beams::after { animation: none; }
}

/* contatore su c-stat */
.ec-stat__affix { font-variant-numeric: tabular-nums; }
/* prefisso e suffisso attaccati al numero ("240+", "€12"); il gap resta per l'unità */
.ec-stat__affix + .ec-stat__number,
.ec-stat__number + .ec-stat__affix { margin-inline-start: -0.25em; }

/* ============================================================
 *  v0.6 — Skeleton
 *  Ossa in tinta col testo a bassa opacità: si vedono su ogni fondo e tema.
 * ============================================================ */
.ec-skeleton {
  --ec-sk-bone: color-mix(in srgb, var(--clb-color-text) 9%, transparent);
  --ec-sk-shine: color-mix(in srgb, var(--clb-color-surface) 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  width: var(--ec-sk-w, 100%);
  max-width: 100%;
}
.ec-skeleton__bone {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: min(var(--clb-radius-sm, 4px), 6px);
  background: var(--ec-sk-bone);
}
/* riflesso che scorre: un solo gradiente per osso, solo transform */
.ec-skeleton__bone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--ec-sk-shine), transparent);
  transform: translateX(-100%);
  animation: ec-skeleton-shine 1.6s ease-in-out infinite;
}
.ec-skeleton.is-still .ec-skeleton__bone::after { content: none; }
@keyframes ec-skeleton-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ec-skeleton__bone::after { content: none; }
}
.ec-skeleton__line { height: 0.75em; }
.ec-skeleton__line:last-child:not(:first-child),
.ec-skeleton__line--mid { width: 72%; }
.ec-skeleton__line--short { width: 40%; }
.ec-skeleton__heading { height: 1.4em; width: 55%; }
.ec-skeleton__number { height: 2.2em; width: 45%; }
.ec-skeleton__circle {
  flex: none;
  width: var(--ec-sk-h, 2.5rem);
  height: var(--ec-sk-h, 2.5rem);
  border-radius: 50%;
}
.ec-skeleton__media {
  width: 100%;
  height: var(--ec-sk-h, auto);
  aspect-ratio: var(--ec-sk-ratio, 16 / 9);
  border-radius: min(var(--clb-radius-md, 6px), 12px);
}
.ec-skeleton--avatar { width: auto; }
.ec-skeleton--card {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface);
}
.ec-skeleton--card .ec-skeleton__media { border-radius: 0; }
.ec-skeleton__body {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: var(--clb-space-4);
}
.ec-skeleton--list { gap: var(--clb-space-4); }
.ec-skeleton__item { display: flex; align-items: center; gap: var(--clb-space-3); }
.ec-skeleton__stack { flex: 1; display: flex; flex-direction: column; gap: 0.5em; }
.ec-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(var(--ec-sk-cols, 4), minmax(0, 1fr));
  gap: var(--clb-space-4) var(--clb-space-6);
}
.ec-skeleton__cell { height: 0.75em; }
.ec-skeleton__cell:nth-child(4n + 2) { width: 70%; }
.ec-skeleton__cell:nth-child(4n + 3) { width: 85%; }
.ec-skeleton__cell.ec-skeleton__cell--head { height: 0.6em; width: 50%; }

/* ============================================================
 *  v0.6 — Loader
 * ============================================================ */
.ec-loader {
  --ec-loader-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: var(--clb-space-2);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  vertical-align: middle;
}
.ec-loader--sm { --ec-loader-size: 1rem; }
.ec-loader--lg { --ec-loader-size: 2.5rem; }
.ec-loader__mark { display: inline-flex; flex: none; }
.ec-loader__label { color: var(--clb-color-text-2); font-size: var(--clb-text-sm); }
.ec-loader__ring {
  display: block;
  width: var(--ec-loader-size);
  height: var(--ec-loader-size);
  animation: ec-loader-spin 0.9s linear infinite;
}
.ec-loader__track { stroke: currentColor; opacity: 0.18; }
.ec-loader__arc { stroke: currentColor; stroke-dasharray: 28 100; }
@keyframes ec-loader-spin { to { transform: rotate(360deg); } }
.ec-loader__dots { display: inline-flex; gap: calc(var(--ec-loader-size) * 0.18); }
.ec-loader__dots i {
  width: calc(var(--ec-loader-size) * 0.28);
  height: calc(var(--ec-loader-size) * 0.28);
  border-radius: 50%;
  background: currentColor;
  animation: ec-loader-dot 1.1s ease-in-out infinite;
}
.ec-loader__dots i:nth-child(2) { animation-delay: 0.15s; }
.ec-loader__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ec-loader-dot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.ec-loader--bar { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.ec-loader__bar {
  position: relative;
  display: block;
  width: 100%;
  min-width: 6rem;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.ec-loader__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: currentColor;
  animation: ec-loader-bar 1.3s ease-in-out infinite;
}
@keyframes ec-loader-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* senza movimento il loader deve comunque dire "sto lavorando": solo più lento e senza scatti */
@media (prefers-reduced-motion: reduce) {
  .ec-loader__ring { animation-duration: 2.4s; }
  .ec-loader__dots i { animation: none; opacity: 0.6; }
  .ec-loader__bar i { animation-duration: 3s; }
}
/* sopra un'area (il contenitore deve avere position: relative) */
.ec-loader--overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  justify-content: center;
  flex-direction: column;
  border-radius: inherit;
  background: color-mix(in srgb, var(--clb-color-bg) 72%, transparent);
}
.ec-loader--overlay .ec-loader__label { color: var(--clb-color-text); }
/* con htmx: visibile solo durante la richiesta (htmx gestisce l'opacità); fuori non blocca i click */
.ec-loader.htmx-indicator { visibility: hidden; }
.htmx-request .ec-loader.htmx-indicator,
.htmx-request.ec-loader.htmx-indicator { visibility: visible; }
/* barra di pagina */
.ec-loader--page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1095;
  display: block;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.ec-loader--page .ec-loader__bar { height: 3px; min-width: 0; border-radius: 0; background: transparent; }
.ec-loader--page.is-active { opacity: 1; }

/* ============================================================
 *  v0.6 — Tooltip
 *  Fondo inverso: testo e fondo della pagina scambiati.
 * ============================================================ */
.ec-tooltip-wrap { display: inline-flex; }
.ec-tooltip-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--clb-color-text-3);
  vertical-align: middle;
  cursor: help;
}
.ec-tooltip-info:hover,
.ec-tooltip-info[aria-describedby] { color: var(--clb-color-text); }
.ec-tooltip-info svg { display: block; }
.ec-tooltip {
  position: fixed;
  z-index: 1100; /* sopra modal, tendine e calendario */
  max-width: min(18rem, calc(100vw - 16px));
  padding: 0.4rem 0.65rem;
  border-radius: min(var(--clb-radius-sm, 4px), 6px);
  /* fondo e testo della pagina scambiati: è l'unica coppia col contrasto garantito in ogni
     style e tema (text-inv non lo è: in alcuni style resta bianco anche nel tema scuro) */
  background: var(--clb-color-text);
  color: var(--clb-color-bg);
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-sm);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  box-shadow: var(--clb-shadow-md, none);
  opacity: 0;
  transform: translateY(var(--ec-tip-shift, 4px));
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.ec-tooltip.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.ec-tooltip[data-placement="bottom"] { --ec-tip-shift: -4px; }
.ec-tooltip[data-placement="left"],
.ec-tooltip[data-placement="right"] { --ec-tip-shift: 0; }
.ec-tooltip[hidden] { display: none; }
/* freccia: quadratino ruotato dello stesso fondo */
.ec-tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
}
.ec-tooltip[data-placement="top"] .ec-tooltip__arrow { bottom: -4px; left: calc(var(--ec-tip-arrow, 50%) - 4px); }
.ec-tooltip[data-placement="bottom"] .ec-tooltip__arrow { top: -4px; left: calc(var(--ec-tip-arrow, 50%) - 4px); }
.ec-tooltip[data-placement="left"] .ec-tooltip__arrow { right: -4px; top: calc(var(--ec-tip-arrow, 50%) - 4px); }
.ec-tooltip[data-placement="right"] .ec-tooltip__arrow { left: -4px; top: calc(var(--ec-tip-arrow, 50%) - 4px); }
@media (prefers-reduced-motion: reduce) {
  .ec-tooltip { transition: none; transform: none; }
}

/* ============================================================
 *  v0.7 — Icone (file e cartelle) e Tree
 * ============================================================ */
.ec-icon { display: block; flex: none; }

.ec-tree { --ec-tree-indent: 1.15rem; font-size: var(--clb-text-sm); }
.ec-tree__filter { margin-bottom: var(--clb-space-2); }
.ec-tree__root,
.ec-tree__group { margin: 0; padding: 0; list-style: none; }
.ec-tree__group[hidden] { display: none; }
.ec-tree__item { outline: 0; }
.ec-tree__row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.15rem var(--clb-space-2) 0.15rem calc(0.25rem + (var(--ec-tree-level, 1) - 1) * var(--ec-tree-indent));
  border-radius: min(var(--clb-radius-sm, 4px), 6px);
  color: var(--clb-color-text);
  cursor: pointer;
  user-select: none;
}
.ec-tree__row:hover { background: var(--clb-color-surface-sunk); }
.ec-tree__item:focus-visible > .ec-tree__row {
  outline: 2px solid var(--clb-color-accent);
  outline-offset: -2px;
}
.ec-tree__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--clb-color-text-3);
}
.ec-tree__toggle svg { transition: transform 0.15s ease; }
.ec-tree__item[aria-expanded="true"] > .ec-tree__row .ec-tree__toggle svg { transform: rotate(90deg); }
.ec-tree__icon { display: inline-flex; color: var(--clb-color-text-2); }
/* cartella chiusa / aperta: due icone, se ne vede una */
.ec-tree__icon .ec-icon--folder-open,
.ec-tree__item[aria-expanded="true"] > .ec-tree__row .ec-icon--folder { display: none; }
.ec-tree__item[aria-expanded="true"] > .ec-tree__row .ec-icon--folder-open { display: block; }
.ec-tree__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
a.ec-tree__label:hover { text-decoration: underline; text-underline-offset: 2px; }
.ec-tree__badge {
  flex: none;
  padding: 0 0.45em;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface-sunk);
  color: var(--clb-color-text-2);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
/* voce corrente (navigazione) e voce scelta (scelta singola) */
.ec-tree__item[aria-current="page"] > .ec-tree__row,
.ec-tree__item[aria-selected="true"] > .ec-tree__row {
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-weight: 600;
}
.ec-tree__item[aria-current="page"] > .ec-tree__row .ec-tree__icon,
.ec-tree__item[aria-selected="true"] > .ec-tree__row .ec-tree__icon { color: inherit; }
/* casella a tre stati, disegnata (niente input: la voce intera è il controllo) */
.ec-tree__check {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--clb-color-border-strong);
  border-radius: min(var(--clb-radius-sm, 4px), 4px);
  background: var(--clb-color-surface);
}
.ec-tree__item[aria-checked="true"] > .ec-tree__row .ec-tree__check,
.ec-tree__item[aria-checked="mixed"] > .ec-tree__row .ec-tree__check {
  border-color: var(--clb-color-accent);
  background: var(--clb-color-accent);
}
.ec-tree__item[aria-checked="true"] > .ec-tree__row .ec-tree__check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--clb-color-on-accent, var(--clb-color-accent-fg));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ec-tree__item[aria-checked="mixed"] > .ec-tree__row .ec-tree__check::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: calc(50% - 1px);
  height: 2px;
  border-radius: 1px;
  background: var(--clb-color-on-accent, var(--clb-color-accent-fg));
}
.ec-tree__item.is-disabled > .ec-tree__row { color: var(--clb-color-text-3); cursor: not-allowed; }
.ec-tree__item.is-disabled > .ec-tree__row:hover { background: transparent; }
.ec-tree__item.is-match > .ec-tree__row .ec-tree__label { font-weight: 600; }
.ec-tree__loading,
.ec-tree__error {
  padding: 0.25rem var(--clb-space-2) 0.25rem calc(1.6rem + var(--ec-tree-indent));
  list-style: none;
  color: var(--clb-color-text-2);
}
.ec-tree__error { color: var(--clb-color-danger); }
.ec-tree__empty { margin: var(--clb-space-2) 0 0; color: var(--clb-color-text-2); }
@media (prefers-reduced-motion: reduce) {
  .ec-tree__toggle svg { transition: none; }
}

/* ============================================================
 *  v0.7 — File explorer
 * ============================================================ */
.ec-explorer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--ec-explorer-h, 34rem);
  overflow: hidden;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
}
.ec-explorer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-2) var(--clb-space-4);
  padding: var(--clb-space-2) var(--clb-space-3);
  border-bottom: 1px solid var(--clb-color-border-hair);
}
.ec-explorer__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--clb-text-sm);
}
.ec-explorer__crumbs li { display: inline-flex; align-items: center; }
.ec-explorer__crumbs li + li::before {
  content: "/";
  margin: 0 0.45rem;
  color: var(--clb-color-text-3);
}
.ec-explorer__crumbs a {
  padding: 0.15rem 0.3rem;
  border-radius: min(var(--clb-radius-sm, 4px), 6px);
  color: var(--clb-color-text-2);
  text-decoration: none;
}
.ec-explorer__crumbs a:hover { color: var(--clb-color-text); background: var(--clb-color-surface-sunk); }
.ec-explorer__crumbs [aria-current] { padding: 0.15rem 0.3rem; font-weight: 600; }
.ec-explorer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--clb-space-2); }
.ec-explorer__search { width: 12rem; }
.ec-explorer__views .btn { display: inline-flex; align-items: center; padding-inline: 0.5rem; }
.ec-explorer__views .btn[aria-pressed="true"] {
  background: var(--clb-color-accent-bg);
  border-color: var(--clb-color-accent);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}
.ec-explorer__selbar {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
  padding: var(--clb-space-2) var(--clb-space-3);
  border-bottom: 1px solid var(--clb-color-border-hair);
  /* fondo neutro: sopra ci sono bottoni coi colori semantici (Elimina), garantiti solo sulla superficie */
  background: var(--clb-color-surface);
  box-shadow: inset 3px 0 0 var(--clb-color-accent);
}
.ec-explorer__selbar[hidden] { display: none; }
.ec-explorer__count {
  margin-right: auto;
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-size: var(--clb-text-sm);
  font-weight: 600;
}
.ec-explorer__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
}
.ec-explorer__side {
  overflow: auto;
  padding: var(--clb-space-2);
  border-right: 1px solid var(--clb-color-border-hair);
  background: var(--clb-color-surface-sunk);
}
.ec-explorer__main { position: relative; overflow: auto; }
@media (max-width: 767.98px) {
  .ec-explorer__body { grid-template-columns: minmax(0, 1fr); }
  .ec-explorer__side { display: none; }
  .ec-explorer__search { width: 100%; }
  .ec-explorer__tools { width: 100%; }
}

/* elenco: una griglia di colonne condivisa da intestazione e righe */
.ec-explorer__head,
.ec-explorer__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 9.5rem 6.5rem 2.75rem;
  align-items: center;
  column-gap: var(--clb-space-2);
  padding: 0 var(--clb-space-2);
}
.ec-explorer__head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 2.25rem;
  border-bottom: 1px solid var(--clb-color-border-hair);
  background: var(--clb-color-surface);
  color: var(--clb-color-text-2);
  font-size: var(--clb-text-xs);
  font-weight: 600;
}
.ec-explorer__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: start;
  padding: 0.2rem 0.25rem;
  border: 0;
  border-radius: min(var(--clb-radius-sm, 4px), 6px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ec-explorer__sort:hover { color: var(--clb-color-text); }
.ec-explorer__sort.is-active { color: var(--clb-color-text); }
.ec-explorer__arrow {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0;
  transform: rotate(45deg) translateY(-2px);
}
.ec-explorer__sort[data-dir="asc"] .ec-explorer__arrow { opacity: 1; transform: rotate(-135deg) translate(-1px, -1px); }
.ec-explorer__sort[data-dir="desc"] .ec-explorer__arrow { opacity: 1; }
.ec-explorer__head .ec-explorer__c-size,
.ec-explorer__item .ec-explorer__c-size { justify-self: end; text-align: right; }
.ec-explorer__list { margin: 0; padding: 0; list-style: none; }
.ec-explorer__item {
  min-height: 2.75rem;
  border-bottom: 1px solid var(--clb-color-border-hair);
  font-size: var(--clb-text-sm);
}
.ec-explorer__item:hover { background: var(--clb-color-surface-sunk); }
.ec-explorer__item.is-selected { background: var(--clb-color-accent-bg); }
.ec-explorer__item[hidden] { display: none; }
.ec-explorer__item.is-dragging { opacity: 0.5; }
.ec-explorer__item.is-droptarget,
.ec-explorer__crumbs a.is-droptarget,
.ec-explorer__tree .ec-tree__row.is-droptarget {
  outline: 2px dashed var(--clb-color-accent);
  outline-offset: -2px;
  background: var(--clb-color-accent-bg);
}
.ec-explorer__c-check { display: flex; justify-content: center; }
.ec-explorer__c-check .form-check-input { margin: 0; }
/* "seleziona tutto" a metà: i colori dello style, non il blu di Bootstrap */
.ec-explorer .form-check-input:indeterminate {
  border-color: var(--clb-color-accent);
  background: linear-gradient(var(--clb-color-on-accent, var(--clb-color-accent-fg)), var(--clb-color-on-accent, var(--clb-color-accent-fg))) center / 55% 2px no-repeat, var(--clb-color-accent);
}
.ec-explorer__c-name { display: flex; align-items: center; gap: var(--clb-space-2); min-width: 0; }
.ec-explorer__name {
  min-width: 0;
  overflow: hidden;
  color: var(--clb-color-text);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
a.ec-explorer__name:hover { text-decoration: underline; text-underline-offset: 2px; }
.ec-explorer__item.is-dir .ec-explorer__name { font-weight: 600; }
.ec-explorer__item--up .ec-explorer__name { color: var(--clb-color-text-2); }
.ec-explorer__c-date,
.ec-explorer__c-size { color: var(--clb-color-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-explorer__c-actions { display: flex; justify-content: flex-end; }
.ec-explorer__c-actions .ec-actions__toggle { border-color: transparent; background: transparent; }
.ec-explorer__item:hover .ec-explorer__c-actions .ec-actions__toggle,
.ec-explorer__c-actions .ec-actions__toggle[aria-expanded="true"],
.ec-explorer__c-actions .ec-actions__toggle:focus-visible { border-color: var(--clb-color-border); }
@media (max-width: 767.98px) {
  .ec-explorer__head,
  .ec-explorer__item { grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem; }
  .ec-explorer__c-date,
  .ec-explorer__c-size { display: none; }
}

/* icone per tipo: colori semantici dello style (segni, contrasto grafico) */
.ec-explorer__icon { display: inline-flex; flex: none; color: var(--clb-color-text-2); }
.ec-explorer__icon--folder { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-explorer__icon--pdf { color: var(--clb-color-danger); }
.ec-explorer__icon--sheet { color: var(--clb-color-success); }
.ec-explorer__icon--image,
.ec-explorer__icon--video { color: var(--clb-color-info); }
.ec-explorer__icon--zip,
.ec-explorer__icon--audio { color: var(--clb-color-warning); }

/* nuova cartella e rinomina in riga */
.ec-explorer__new {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
  padding: var(--clb-space-2) var(--clb-space-2) var(--clb-space-2) calc(2.25rem + 2 * var(--clb-space-2));
  border-bottom: 1px solid var(--clb-color-border-hair);
  background: var(--clb-color-surface-sunk);
}
.ec-explorer__new[hidden] { display: none; }
.ec-explorer__new .form-control { max-width: 20rem; }
.ec-explorer__rename { max-width: 22rem; height: 2rem; }

/* stati: vuoto, nessun risultato, rilascio, avanzamento */
.ec-explorer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--clb-space-1);
  padding: var(--clb-space-10) var(--clb-space-4);
  color: var(--clb-color-text-2);
  text-align: center;
}
.ec-explorer__empty-icon { color: var(--clb-color-text-3); }
.ec-explorer__empty-icon .ec-icon { width: 2.5rem; height: 2.5rem; }
.ec-explorer__empty-title { margin: var(--clb-space-2) 0 0; color: var(--clb-color-text); font-weight: 600; }
.ec-explorer__empty-text { margin: 0; font-size: var(--clb-text-sm); }
.ec-explorer__nomatch { margin: 0; padding: var(--clb-space-6) var(--clb-space-4); color: var(--clb-color-text-2); text-align: center; }
.ec-explorer__drop {
  position: absolute;
  inset: var(--clb-space-2);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--clb-color-accent);
  border-radius: var(--clb-radius-md);
  background: color-mix(in srgb, var(--clb-color-surface) 88%, transparent);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-weight: 600;
  pointer-events: none;
}
.ec-explorer.is-dropping .ec-explorer__drop { display: flex; }
.ec-explorer__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--clb-color-accent) 18%, transparent);
}
.ec-explorer__progress[hidden] { display: none; }
.ec-explorer__progress-bar {
  display: block;
  height: 100%;
  background: var(--clb-color-accent);
  transform-origin: left;
  transform: scaleX(var(--ec-progress, 0));
  transition: transform 0.2s ease;
}

/* griglia: stesse voci, a tessere */
/* in griglia l'intestazione è una riga "ordina per": casella, poi i tre criteri affiancati */
.ec-explorer.is-grid .ec-explorer__head { display: flex; justify-content: flex-start; gap: var(--clb-space-3); padding-inline: var(--clb-space-3); }
.ec-explorer.is-grid .ec-explorer__head .ec-explorer__c-check { position: static; width: auto; }
.ec-explorer.is-grid .ec-explorer__head .ec-explorer__sort { display: inline-flex; flex-direction: row; width: auto; }
.ec-explorer.is-grid .ec-explorer__head .ec-explorer__c-actions { display: none; }
.ec-explorer.is-grid .ec-explorer__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--clb-space-3);
  padding: var(--clb-space-3);
}
.ec-explorer.is-grid .ec-explorer__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--clb-space-1);
  min-height: 0;
  padding: var(--clb-space-4) var(--clb-space-2) var(--clb-space-3);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-md);
  text-align: center;
}
.ec-explorer.is-grid .ec-explorer__c-name { flex-direction: column; width: 100%; }
.ec-explorer.is-grid .ec-explorer__icon .ec-icon { width: 2.5rem; height: 2.5rem; }
.ec-explorer.is-grid .ec-explorer__name { max-width: 100%; }
.ec-explorer.is-grid .ec-explorer__c-date { display: none; }
.ec-explorer.is-grid .ec-explorer__c-size { justify-self: auto; font-size: var(--clb-text-xs); }
.ec-explorer.is-grid .ec-explorer__c-check { position: absolute; top: var(--clb-space-2); left: var(--clb-space-2); }
.ec-explorer.is-grid .ec-explorer__c-actions { position: absolute; top: var(--clb-space-1); right: var(--clb-space-1); }
.ec-explorer.is-grid .ec-explorer__item--up .ec-explorer__c-size { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ec-explorer__progress-bar { transition: none; }
}

/* ============================================================
 *  Testo dell'AI (ec_markdown)
 * ============================================================ */
.ec-md { overflow-wrap: anywhere; line-height: var(--clb-leading-relaxed, 1.6); }
.ec-md > * { margin: 0 0 .625em; }
.ec-md > :last-child { margin-bottom: 0; }
.ec-md ul, .ec-md ol { padding-left: 1.25rem; }
.ec-md li + li { margin-top: .25em; }
.ec-md .ec-md__h { margin-top: .875em; }
.ec-md .ec-md__h:first-child { margin-top: 0; }
.ec-md a { color: var(--clb-color-accent-text, var(--clb-color-accent)); text-decoration: underline; text-underline-offset: 2px; }
.ec-md code {
  font-family: var(--clb-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: .875em;
  color: var(--clb-color-text);
  background: var(--clb-color-surface-sunk);
  border-radius: var(--clb-radius-sm);
  padding: .1em .35em;
}
.ec-md .ec-md__code {
  font-size: var(--clb-text-sm);
  background: var(--clb-color-surface-sunk);
  border: 1px solid var(--clb-color-border-hair);
  border-radius: var(--clb-radius-md);
  padding: .75rem 1rem;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
}
.ec-md .ec-md__code code { background: none; padding: 0; font-size: inherit; }
.ec-md blockquote {
  border-left: 3px solid var(--clb-color-border-strong);
  padding-left: .75rem;
  color: var(--clb-color-text-2);
}

/* ============================================================
 *  Chat
 * ============================================================ */
.ec-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--ec-chat-h, 34rem);
  overflow: hidden;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
}
.ec-chat__head {
  display: flex;
  align-items: center;
  gap: var(--clb-space-3);
  padding: var(--clb-space-3) var(--clb-space-4);
  border-bottom: 1px solid var(--clb-color-border-hair);
}
.ec-chat__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ec-chat__title { font-weight: 600; }
.ec-chat__subtitle { font-size: var(--clb-text-xs); color: var(--clb-color-text-2); }
.ec-chat__reset { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: .375rem; }

.ec-chat__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
  font-size: var(--clb-text-xs);
  font-weight: 600;
}

.ec-chat__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-4);
  padding: var(--clb-space-4);
}
.ec-chat__log:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: -2px; box-shadow: none; }

.ec-chat__welcome {
  margin: auto;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--clb-space-3);
  text-align: center;
}
.ec-chat__welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-accent-text, var(--clb-color-accent));
}
.ec-chat__welcome-icon svg { width: 22px; height: 22px; }
.ec-chat__welcome-text { margin: 0; font-size: var(--clb-text-md); color: var(--clb-color-text); }
.ec-chat__suggestions, .ec-ai__suggestions { display: flex; flex-wrap: wrap; gap: var(--clb-space-2); }
.ec-chat__suggestions { justify-content: center; }
.ec-chat__suggestion, .ec-ai__suggestion {
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  font-size: var(--clb-text-sm);
  line-height: 1.3;
  padding: .375rem .875rem;
  text-align: left;
}
.ec-chat__suggestion:hover, .ec-ai__suggestion:hover { border-color: var(--clb-color-border-strong); background: var(--clb-color-surface-sunk); }
.ec-chat__suggestion:focus-visible, .ec-ai__suggestion:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 2px; box-shadow: none; }

.ec-chat__day {
  display: flex;
  align-items: center;
  gap: var(--clb-space-3);
  font-size: var(--clb-text-xs);
  color: var(--clb-color-text-2);
}
.ec-chat__day::before, .ec-chat__day::after { content: ""; flex: 1; border-top: 1px solid var(--clb-color-border-hair); }

.ec-chat__msg { display: flex; align-items: flex-start; gap: var(--clb-space-3); }
.ec-chat__body { min-width: 0; display: flex; flex-direction: column; }
.ec-chat__msg--assistant .ec-chat__body, .ec-chat__msg--error .ec-chat__body { flex: 1 1 auto; max-width: 46rem; }
.ec-chat__msg--assistant .ec-chat__bubble { padding-top: .25rem; }
.ec-chat__msg--user { justify-content: flex-end; }
.ec-chat__msg--user .ec-chat__body { max-width: min(80%, 36rem); align-items: flex-end; }
.ec-chat__msg--user .ec-chat__bubble {
  background: var(--clb-color-accent-bg);
  color: var(--clb-color-text);
  border-radius: var(--clb-radius-lg) var(--clb-radius-lg) var(--clb-radius-sm) var(--clb-radius-lg);
  padding: .5rem .875rem;
  overflow-wrap: anywhere;
}
.ec-chat__msg--error .ec-chat__avatar { background: var(--clb-color-danger-bg); color: var(--clb-color-danger); }
.ec-chat__msg--error .ec-chat__bubble {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-1) var(--clb-space-3);
  background: var(--clb-color-danger-bg);
  color: var(--clb-color-danger);
  border-radius: var(--clb-radius-md);
  padding: .5rem .875rem;
  align-self: flex-start;
}
.ec-chat__retry {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ec-chat__retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: none; border-radius: 2px; }
.ec-chat__note { margin: 0; text-align: center; font-size: var(--clb-text-xs); color: var(--clb-color-text-2); }

.ec-chat__meta {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
  min-height: 1.75rem;
  font-size: var(--clb-text-xs);
  color: var(--clb-color-text-2);
}
.ec-chat__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--clb-radius-sm);
  background: none;
  color: var(--clb-color-text-2);
}
.ec-chat__copy:hover { background: var(--clb-color-surface-sunk); color: var(--clb-color-text); }
.ec-chat__copy:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 0; box-shadow: none; }
.ec-chat__copied-icon, .ec-chat__copy.is-copied .ec-chat__copy-icon { display: none; }
.ec-chat__copy.is-copied .ec-chat__copied-icon { display: inline-flex; color: var(--clb-color-success); }
@media (hover: hover) {
  .ec-chat__msg:not(:hover):not(:focus-within) .ec-chat__copy:not(.is-copied) { opacity: 0; }
}

.ec-chat__typing { display: inline-flex; gap: .3rem; padding: .5rem 0; }
.ec-chat__typing i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--clb-color-text-2);
  animation: ec-chat-dot 1.2s ease-in-out infinite;
}
.ec-chat__typing i:nth-child(3) { animation-delay: .15s; }
.ec-chat__typing i:nth-child(4) { animation-delay: .3s; }
@keyframes ec-chat-dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ec-chat__typing i { animation: none; opacity: .7; }
}

.ec-chat__jump {
  position: absolute;
  left: 50%;
  bottom: 6.25rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .875rem;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  font-size: var(--clb-text-sm);
  box-shadow: var(--clb-shadow-lg);
  z-index: 2;
}
.ec-chat__jump[hidden] { display: none; }
.ec-chat__jump:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 2px; }

.ec-chat__composer,
.ec-ai__box {
  border: 1px solid var(--clb-color-border-strong);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ec-chat__composer:focus-within,
.ec-ai__box:focus-within {
  border-color: var(--clb-color-accent);
  box-shadow: var(--clb-focus-ring, 0 0 0 3px var(--clb-color-accent-bg));
}
.ec-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: var(--clb-space-2);
  margin: var(--clb-space-3) var(--clb-space-4) 0;
  padding: .3125rem .3125rem .3125rem .875rem;
}
.ec-chat__input, .ec-ai__input {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--clb-color-text);
  font: inherit;
  line-height: 1.5;
  overflow-y: auto;
}
.ec-chat__input { flex: 1 1 auto; min-width: 0; padding: .375rem 0; max-height: 10rem; }
.ec-chat__input::placeholder, .ec-ai__input::placeholder { color: var(--clb-color-text-3); opacity: 1; }
.ec-chat__send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--clb-radius-md);
}
.ec-chat__hint {
  margin: 0;
  padding: var(--clb-space-1) var(--clb-space-4) var(--clb-space-3);
  font-size: var(--clb-text-xs);
  color: var(--clb-color-text-2);
}
/* chat stretta (telefono, colonna laterale): solo l'icona per «Nuova conversazione», niente suggerimento sui tasti */
.ec-chat { container-type: inline-size; }
@container (max-width: 30rem) {
  .ec-chat__hint { display: none; }
  .ec-chat__composer { margin-bottom: var(--clb-space-3); }
  .ec-chat__jump { bottom: 4.75rem; }
  .ec-chat__reset { padding: 0; width: 2rem; height: 2rem; justify-content: center; }
  .ec-chat__reset-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ec-chat__head { padding-inline: var(--clb-space-3); }
  .ec-chat__log { padding: var(--clb-space-3); }
  .ec-chat__msg--user .ec-chat__body { max-width: 88%; }
}

/* ============================================================
 *  Richiesta all'AI
 * ============================================================ */
.ec-ai { display: grid; gap: var(--clb-space-3); color: var(--clb-color-text); }
.ec-ai__box { padding: var(--clb-space-3) var(--clb-space-4); background: var(--clb-color-surface); }
.ec-ai__label {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
  margin-bottom: var(--clb-space-1);
  font-size: var(--clb-text-sm);
  font-weight: 600;
}
.ec-ai__label svg { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-ai__input { padding: .25rem 0; max-height: 16rem; }
.ec-ai__suggestions { margin: var(--clb-space-2) 0 var(--clb-space-1); }
.ec-ai__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--clb-space-2) var(--clb-space-3);
  margin-top: var(--clb-space-2);
  padding-top: var(--clb-space-2);
  border-top: 1px solid var(--clb-color-border-hair);
}
.ec-ai__foot > :first-child { margin-right: auto; }
.ec-ai__extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--clb-space-2); }
.ec-ai__hint, .ec-ai__count { font-size: var(--clb-text-xs); color: var(--clb-color-text-2); }
.ec-ai__count { font-variant-numeric: tabular-nums; }
.ec-ai__count.is-near { color: var(--clb-color-text); font-weight: 600; }
.ec-ai__hint kbd {
  font-family: inherit;
  font-size: .6875rem;
  color: var(--clb-color-text);
  background: var(--clb-color-surface-sunk);
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-sm);
  padding: .05rem .3rem;
  box-shadow: none;
}
.ec-ai__go, .ec-ai__stop, .ec-ai__actions .btn { display: inline-flex; align-items: center; gap: .375rem; }
.ec-ai__go[hidden], .ec-ai__stop[hidden] { display: none; }
.ec-ai__result:empty { display: none; }
.ec-ai__answer, .ec-ai__wait {
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface);
  padding: var(--clb-space-4);
}
.ec-ai__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-2);
  margin-top: var(--clb-space-4);
  padding-top: var(--clb-space-3);
  border-top: 1px solid var(--clb-color-border-hair);
}
.ec-ai__note { margin-left: auto; font-size: var(--clb-text-xs); color: var(--clb-color-text-2); }
.ec-ai:not([data-ec-ai-target]) [data-ec-ai-use] { display: none; }
.ec-ai__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-2) var(--clb-space-3);
  padding: .75rem 1rem;
  border-radius: var(--clb-radius-md);
  background: var(--clb-color-danger-bg);
  color: var(--clb-color-danger);
}
.ec-ai__error-icon { display: inline-flex; }
.ec-ai__error-text { flex: 1 1 12rem; }
.ec-ai__error .btn { background: var(--clb-color-surface); color: var(--clb-color-text); border-color: var(--clb-color-border-strong); }
.ec-ai__stopped { margin: 0; font-size: var(--clb-text-sm); color: var(--clb-color-text-2); }
.ec-ai-filled { animation: ec-ai-filled 1.6s ease-out; }
@keyframes ec-ai-filled {
  0%, 40% { box-shadow: 0 0 0 3px var(--clb-color-accent-bg); border-color: var(--clb-color-accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
 *  Mappa (standard mappe Emporia)
 *  leaflet.css arriva dopo questo foglio: dove serve si raddoppia la classe.
 *  Nessun filtro CSS sul tilePane: il tema scuro è uno stile scuro vero.
 * ============================================================ */
.ec-map {
  position: relative;
  height: var(--ec-map-h, 24rem);
  overflow: hidden;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface-sunk);
  color: var(--clb-color-text);
  isolation: isolate;
}
.ec-map__canvas { position: absolute; inset: 0; }
.ec-map .leaflet-container.leaflet-container {
  background: var(--clb-color-surface-sunk);
  font-family: inherit;
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text);
}
.ec-map .leaflet-container.leaflet-container:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: -2px; }

.ec-map__status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  margin: 0;
  padding: .375rem .875rem;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text-2);
  font-size: var(--clb-text-sm);
  pointer-events: none;
  text-align: center;
}
.ec-map.is-ready .ec-map__status { display: none; }
.ec-map.is-slow .ec-map__status { top: auto; bottom: var(--clb-space-3); transform: translateX(-50%); max-width: calc(100% - 2rem); }
.ec-map.is-failed .ec-map__status { top: var(--clb-space-4); transform: translateX(-50%); color: var(--clb-color-text); border: 1px solid var(--clb-color-border); }

/* i luoghi, per chi usa lo screen reader; si vedono se la mappa non parte */
.ec-map__places {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
.ec-map.is-failed .ec-map__places {
  inset: 4rem var(--clb-space-4) var(--clb-space-4);
  width: auto;
  height: auto;
  clip-path: none;
  white-space: normal;
  overflow: auto;
  z-index: 500;
  list-style: none;
  display: grid;
  align-content: start;
  gap: var(--clb-space-2);
  font-size: var(--clb-text-sm);
}
.ec-map.is-failed .ec-map__places a { color: var(--clb-color-accent-text, var(--clb-color-accent)); }

/* segnaposto: goccia nel colore d'accento, punto interno nel suo colore di contrasto */
.ec-map .ec-map__marker.ec-map__marker { background: none; border: 0; }
.ec-map__pin {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--clb-color-accent);
  border: 2px solid var(--clb-color-bg);
  box-shadow: var(--clb-shadow-sm, none);
}
.ec-map__pin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--clb-color-on-accent, var(--clb-color-accent-fg));
}
.ec-map__marker--picked .ec-map__pin { background: var(--clb-color-text); }
.ec-map__marker--picked .ec-map__pin::after { background: var(--clb-color-bg); }
.ec-map .ec-map__marker:focus-visible { outline: 0; }
.ec-map .ec-map__marker:focus-visible .ec-map__pin { box-shadow: 0 0 0 3px var(--clb-color-bg), 0 0 0 5px var(--clb-color-accent); }

.ec-map .ec-map__cluster-icon.ec-map__cluster-icon { background: none; border: 0; }
.ec-map__cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--clb-color-accent);
  color: var(--clb-color-on-accent, var(--clb-color-accent-fg));
  border: 3px solid var(--clb-color-bg);
  box-shadow: var(--clb-shadow-sm, none);
  font-weight: 700;
  font-size: var(--clb-text-sm);
  font-variant-numeric: tabular-nums;
}

.ec-map .leaflet-popup-content-wrapper,
.ec-map .leaflet-popup-tip {
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  box-shadow: var(--clb-shadow-lg);
}
.ec-map .leaflet-popup-content-wrapper { border-radius: var(--clb-radius-md); }
.ec-map .leaflet-popup-content { margin: .75rem 2rem .75rem .875rem; font-size: var(--clb-text-sm); line-height: 1.45; }
.ec-map .leaflet-container a.leaflet-popup-close-button { color: var(--clb-color-text-2); }
.ec-map .leaflet-container a.leaflet-popup-close-button:hover { color: var(--clb-color-text); }
.ec-map__popup { display: grid; gap: .25rem; }
.ec-map__popup-title { font-weight: 600; }
.ec-map__popup-text { color: var(--clb-color-text-2); }
.ec-map .ec-map__popup-link.ec-map__popup-link { color: var(--clb-color-accent-text, var(--clb-color-accent)); font-weight: 600; }

.ec-map .leaflet-bar.leaflet-bar { border: 1px solid var(--clb-color-border); box-shadow: none; border-radius: var(--clb-radius-md); overflow: hidden; }
.ec-map .leaflet-bar.leaflet-bar a {
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  border-bottom-color: var(--clb-color-border-hair);
}
.ec-map .leaflet-bar.leaflet-bar a:hover { background: var(--clb-color-surface-sunk); }
.ec-map .leaflet-bar.leaflet-bar a.leaflet-disabled { color: var(--clb-color-text-3); background: var(--clb-color-surface); }
.ec-map .leaflet-control-attribution.leaflet-control-attribution {
  background: var(--clb-color-surface);
  color: var(--clb-color-text-2);
  font-size: .6875rem;
  line-height: 1.5;
  padding: 0 .375rem;
  border-top-left-radius: var(--clb-radius-sm);
}
.ec-map .leaflet-control-attribution.leaflet-control-attribution a { color: var(--clb-color-text-2); text-decoration: underline; }
.ec-map__hint { margin: var(--clb-space-2) 0 0; font-size: var(--clb-text-xs); color: var(--clb-color-text-2); }

/* --- fasce di colore (band 1-5): dalla superficie all'accento pieno, poi verso il colore del testo.
   La luminosità cambia sempre nello stesso verso (in chiaro scurisce, in scuro schiarisce), così le
   fasce si leggono in ordine; la fascia 1 parte dal 40% d'accento, visibile anche su fondo scuro --- */
.ec-map {
  --ec-band-1: color-mix(in oklab, var(--clb-color-accent) 40%, var(--clb-color-surface));
  --ec-band-2: color-mix(in oklab, var(--clb-color-accent) 62%, var(--clb-color-surface));
  --ec-band-3: color-mix(in oklab, var(--clb-color-accent) 82%, var(--clb-color-surface));
  --ec-band-4: var(--clb-color-accent);
  --ec-band-5: color-mix(in oklab, var(--clb-color-accent) 62%, var(--clb-color-text));
}
.ec-map__marker--band-1 .ec-map__pin, .ec-map__swatch--band-1 { background: var(--ec-band-1); }
.ec-map__marker--band-2 .ec-map__pin, .ec-map__swatch--band-2 { background: var(--ec-band-2); }
.ec-map__marker--band-3 .ec-map__pin, .ec-map__swatch--band-3 { background: var(--ec-band-3); }
.ec-map__marker--band-4 .ec-map__pin, .ec-map__swatch--band-4 { background: var(--ec-band-4); }
.ec-map__marker--band-5 .ec-map__pin, .ec-map__swatch--band-5 { background: var(--ec-band-5); }
/* fasce chiare: il punto interno nel colore del testo, non in quello di contrasto dell'accento */
.ec-map__marker--band-1 .ec-map__pin::after,
.ec-map__marker--band-2 .ec-map__pin::after,
.ec-map__marker--band-3 .ec-map__pin::after { background: var(--clb-color-text); }
.ec-map__marker--success .ec-map__pin, .ec-map__swatch--success { background: var(--clb-color-success); }
.ec-map__marker--warning .ec-map__pin, .ec-map__swatch--warning { background: var(--clb-color-warning); }
.ec-map__marker--danger .ec-map__pin, .ec-map__swatch--danger { background: var(--clb-color-danger); }
.ec-map__marker--info .ec-map__pin, .ec-map__swatch--info { background: var(--clb-color-info); }
.ec-map__marker--muted .ec-map__pin, .ec-map__swatch--muted { background: var(--clb-color-text-3); }
.ec-map__marker--success .ec-map__pin::after,
.ec-map__marker--warning .ec-map__pin::after,
.ec-map__marker--danger .ec-map__pin::after,
.ec-map__marker--info .ec-map__pin::after,
.ec-map__marker--muted .ec-map__pin::after { background: var(--clb-color-bg); }
/* acceso dalla lista collegata: più grande e sopra gli altri */
.ec-map__marker.is-active .ec-map__pin { transform: rotate(-45deg) scale(1.22); box-shadow: 0 0 0 3px var(--clb-color-bg), 0 0 0 5px var(--clb-color-text); }
.ec-map__pin { transition: transform .15s ease; }

/* --- pillola con il prezzo (o un'etichetta breve) --- */
.ec-map .ec-map__marker--pill.ec-map__marker--pill { width: auto !important; height: auto !important; }
.ec-map__pill {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 7px));
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  border: 1px solid var(--clb-color-border-strong, var(--clb-color-border));
  box-shadow: var(--clb-shadow-sm, none);
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: transform .15s ease;
}
.ec-map__pill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: inherit;
  border-bottom: inherit;
}
/* la fascia: un pallino, il testo resta nel colore del testo (contrasto garantito) */
.ec-map__marker--pill[class*="band-"] .ec-map__pill::before,
.ec-map__marker--pill[class*="--success"] .ec-map__pill::before,
.ec-map__marker--pill[class*="--warning"] .ec-map__pill::before,
.ec-map__marker--pill[class*="--danger"] .ec-map__pill::before,
.ec-map__marker--pill[class*="--info"] .ec-map__pill::before,
.ec-map__marker--pill[class*="--muted"] .ec-map__pill::before {
  content: "";
  width: .5625rem;
  height: .5625rem;
  border-radius: 50%;
  flex: none;
  background: var(--ec-pill-dot, var(--clb-color-accent));
}
.ec-map__marker--band-1 { --ec-pill-dot: var(--ec-band-1); }
.ec-map__marker--band-2 { --ec-pill-dot: var(--ec-band-2); }
.ec-map__marker--band-3 { --ec-pill-dot: var(--ec-band-3); }
.ec-map__marker--band-4 { --ec-pill-dot: var(--ec-band-4); }
.ec-map__marker--band-5 { --ec-pill-dot: var(--ec-band-5); }
.ec-map__marker--success { --ec-pill-dot: var(--clb-color-success); }
.ec-map__marker--warning { --ec-pill-dot: var(--clb-color-warning); }
.ec-map__marker--danger { --ec-pill-dot: var(--clb-color-danger); }
.ec-map__marker--info { --ec-pill-dot: var(--clb-color-info); }
.ec-map__marker--muted { --ec-pill-dot: var(--clb-color-text-3); }
.ec-map__marker--pill.is-active .ec-map__pill,
.ec-map__marker--pill:hover .ec-map__pill {
  background: var(--clb-color-text);
  color: var(--clb-color-bg);
  border-color: var(--clb-color-text);
}
.ec-map__marker--pill.is-active .ec-map__pill { transform: translate(-50%, calc(-100% - 7px)) scale(1.08); }
.ec-map .ec-map__marker--pill:focus-visible .ec-map__pill { box-shadow: 0 0 0 3px var(--clb-color-bg), 0 0 0 5px var(--clb-color-accent); }

/* gruppi (cluster, o gruppi mandati dal server da lontano) */
.ec-map__cluster-icon .ec-map__cluster { width: 100%; height: 100%; }
.ec-map__cluster-icon.is-active .ec-map__cluster { box-shadow: 0 0 0 3px var(--clb-color-bg), 0 0 0 5px var(--clb-color-text); }

/* --- forme: colori dal CSS (seguono style e tema), mai scritti nel JS --- */
.ec-map path.ec-map__shape { stroke-linejoin: round; stroke-linecap: round; }
.ec-map path.ec-map__shape--area {
  stroke: var(--clb-color-accent);
  stroke-width: 2.5;
  fill: var(--clb-color-accent);
  fill-opacity: .12;
}
.ec-map.is-editing path.ec-map__shape--area { stroke-dasharray: 6 5; }
.ec-map path.ec-map__shape--draft { stroke: var(--clb-color-accent); stroke-width: 2.5; fill: var(--clb-color-accent); fill-opacity: .06; }
.ec-map path.ec-map__shape--hint { stroke: var(--clb-color-accent); stroke-width: 2; fill: none; stroke-dasharray: 4 6; }
.ec-map path.ec-map__shape--boundary {
  stroke: var(--clb-color-text);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  stroke-opacity: .75;
  fill: var(--clb-color-text);
  fill-opacity: .04;
}
.ec-map path.ec-map__shape--approx { stroke: var(--clb-color-accent); stroke-width: 2; fill: var(--clb-color-accent); fill-opacity: .16; }
.ec-map path.ec-map__shape--here { stroke: var(--clb-color-info, var(--clb-color-accent)); stroke-width: 2; fill: var(--clb-color-info, var(--clb-color-accent)); fill-opacity: .15; }
/* maniglie di geoman per modificare l'area */
.ec-map .marker-icon.marker-icon {
  background: var(--clb-color-surface);
  border: 2px solid var(--clb-color-accent);
  border-radius: 50%;
  box-shadow: var(--clb-shadow-sm, none);
}
.ec-map .marker-icon.marker-icon-middle { opacity: .75; border-width: 1.5px; }
.ec-map .leaflet-tooltip.leaflet-tooltip {
  background: var(--clb-color-text);
  color: var(--clb-color-bg);
  border: 0;
  box-shadow: var(--clb-shadow-sm, none);
  font-size: var(--clb-text-xs);
  border-radius: var(--clb-radius-sm);
}
.ec-map .leaflet-tooltip.leaflet-tooltip::before { display: none; }
.ec-map--freehand.ec-map--freehand { cursor: crosshair; touch-action: none; }
.ec-map.is-drawing .leaflet-container.leaflet-container { cursor: crosshair; }

/* --- barre di strumenti (disegno, schermo intero, posizione) --- */
.ec-map .ec-map__tools.ec-map__tools,
.ec-map .ec-map__controls.ec-map__controls { display: flex; flex-direction: column; background: var(--clb-color-surface); }
.ec-map__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--clb-color-border-hair, var(--clb-color-border));
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  cursor: pointer;
}
.ec-map__tool:last-child { border-bottom: 0; }
.ec-map__tool:hover { background: var(--clb-color-surface-sunk); }
.ec-map__tool[aria-pressed="true"] { background: var(--clb-color-accent); color: var(--clb-color-on-accent, var(--clb-color-accent-fg)); }
.ec-map__tool:disabled { color: var(--clb-color-text-3); background: var(--clb-color-surface); cursor: default; }
.ec-map__tool:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: -2px; box-shadow: none; }
.ec-map__tool svg { display: block; }

/* --- ricerca sopra la mappa --- */
.ec-map__search {
  position: absolute;
  z-index: 800;
  top: 10px;
  left: 52px;
  right: 52px;
  max-width: 22rem;
}
.ec-map__search .ec-combo__control { box-shadow: var(--clb-shadow-md, var(--clb-shadow-sm, none)); background: var(--clb-color-surface); }

/* --- avvisi, caricamento, «cerca in quest'area», legenda --- */
.ec-map__notice {
  position: absolute;
  z-index: 700;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  max-width: calc(100% - 7rem);
  margin: 0;
  padding: .375rem .875rem;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  border: 1px solid var(--clb-color-border);
  box-shadow: var(--clb-shadow-sm, none);
  font-size: var(--clb-text-sm);
  text-align: center;
  pointer-events: none;
}
.ec-map__notice[hidden] { display: none; }
.ec-map:has(.ec-map__search) .ec-map__notice { top: 58px; }
.ec-map::after {
  content: "";
  position: absolute;
  z-index: 900;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--clb-color-accent);
  opacity: 0;
  pointer-events: none;
}
.ec-map.is-loading::after { opacity: 1; animation: ec-map-loading 1.1s ease-in-out infinite; }
@keyframes ec-map-loading {
  0% { left: 0; width: 0; }
  50% { left: 20%; width: 60%; }
  100% { left: 100%; width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-map.is-loading::after { animation: none; width: 100%; opacity: .6; }
  .ec-map__pin, .ec-map__pill { transition: none; }
}
.ec-map__area-actions {
  position: absolute;
  z-index: 750;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  gap: var(--clb-space-2);
  white-space: nowrap;
}
.ec-map__search-area {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .875rem;
  border: 0;
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-text);
  color: var(--clb-color-bg);
  box-shadow: var(--clb-shadow-md, var(--clb-shadow-sm, none));
  font-size: var(--clb-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.ec-map__search-area[hidden] { display: none; }
.ec-map__search-area--quiet { background: var(--clb-color-surface); color: var(--clb-color-text); border: 1px solid var(--clb-color-border); }
.ec-map__search-area:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 2px; box-shadow: none; }
.ec-map__legend {
  position: absolute;
  z-index: 700;
  left: 10px;
  bottom: 28px;
  max-width: calc(100% - 20px);
  padding: .5rem .75rem;
  border-radius: var(--clb-radius-md);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  border: 1px solid var(--clb-color-border);
  box-shadow: var(--clb-shadow-sm, none);
  font-size: var(--clb-text-xs);
}
.ec-map__legend[hidden] { display: none; }
.ec-map__legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ec-map__legend li { display: flex; align-items: center; gap: .5rem; }
.ec-map__swatch:not([class*="--"]) { background: var(--clb-color-accent); }
.ec-map__swatch { width: .75rem; height: .75rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--clb-color-border-strong, var(--clb-color-border)); }
.ec-map:has(.ec-map__legend:not([hidden])) .ec-map__area-actions { bottom: 28px; left: auto; right: 10px; transform: none; }

/* popup con foto */
.ec-map .leaflet-popup-content:has(.ec-map__popup--media) { margin: 0; width: 240px !important; }
.ec-map__popup--media { gap: .25rem; padding-bottom: .75rem; }
.ec-map__popup--media > :not(.ec-map__popup-img) { margin: 0 .875rem; }
.ec-map__popup-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--clb-radius-md) var(--clb-radius-md) 0 0; margin-bottom: .375rem; background: var(--clb-color-surface-sunk); }

/* schermo intero (classe, non Fullscreen API: funziona anche su iPhone) */
.ec-map.is-fullscreen { position: fixed; inset: 0; z-index: 1055; height: auto; border: 0; border-radius: 0; }
html.ec-map-fullscreen-open { overflow: hidden; }

/* lista collegata alla mappa: la card del punto sotto il mouse e quella scelta */
[data-ec-map-item] { transition: box-shadow .15s ease; }
[data-ec-map-item].is-map-hover { box-shadow: 0 0 0 2px var(--clb-color-accent); }
[data-ec-map-item].is-map-selected { box-shadow: 0 0 0 2px var(--clb-color-text); }
@media (prefers-reduced-motion: reduce) { [data-ec-map-item] { transition: none; } }

@media (max-width: 575.98px) {
  .ec-map__search { right: 52px; max-width: none; }
  .ec-map__legend { bottom: 28px; }
}

/* elenco + mappa */
.ec-map-layout { display: grid; gap: var(--clb-space-4); }
.ec-map-layout__switch { justify-self: center; }
.ec-map-layout__switch .btn[aria-pressed="true"] {
  background: var(--clb-color-text);
  border-color: var(--clb-color-text);
  color: var(--clb-color-bg);
}
/* la mappa non supera mai lo spazio visibile sotto le intestazioni fisse (--ec-header-h, misurata dal JS) */
.ec-map-layout { --ec-map-layout-real-h: min(var(--ec-map-layout-h), calc(100vh - var(--ec-header-h, 0px) - 2rem)); }
.ec-map-layout__map { height: var(--ec-map-layout-real-h); min-height: 18rem; }
.ec-map-layout__map > .ec-map { height: 100%; }
@media (max-width: 991.98px) {
  .ec-map-layout[data-view="list"] .ec-map-layout__map { display: none; }
  .ec-map-layout[data-view="map"] .ec-map-layout__list { display: none; }
}
@media (min-width: 992px) {
  .ec-map-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .ec-map-layout__switch { display: none; }
  /* ferma sotto la navbar e centrata in verticale nello spazio che resta, mentre l'elenco scorre */
  .ec-map-layout__map {
    position: sticky;
    top: var(--ec-map-layout-top, max(calc(var(--ec-header-h, 0px) + 1rem), calc((100vh + var(--ec-header-h, 0px) - var(--ec-map-layout-real-h)) / 2)));
  }
}

/* seconda riga dei risultati della combobox (es. la regione di un comune) */
.ec-combo__hint { margin-left: .5rem; color: var(--clb-color-text-2); font-size: var(--clb-text-xs); }
.ec-combo__option.active .ec-combo__hint { color: inherit; opacity: .85; }

/* ============================================================
 *  Calendario (<c-scheduler>) e prenotazione (<c-slot-picker>)
 *  Gli eventi hanno il fondo del loro tono mescolato con la superficie e il testo sempre nel
 *  colore del testo: il contrasto non dipende dal tono.
 * ============================================================ */
.ec-sched {
  --ec-sched-slot-h: 2.5rem;
  --ec-sched-axis: 3.5rem;
  --ec-tone: var(--clb-color-accent);
  position: relative;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
}
.ec-sched__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-2) var(--clb-space-3);
  padding: var(--clb-space-3);
  border-bottom: 1px solid var(--clb-color-border-hair, var(--clb-color-border));
}
.ec-sched__nav { display: flex; align-items: center; gap: var(--clb-space-2); min-width: 0; }
.ec-sched__arrow { display: inline-flex; align-items: center; justify-content: center; padding-inline: .4rem; }
.ec-sched__heading { margin: 0 0 0 var(--clb-space-2); font-size: 1.0625rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-sched__views .btn[aria-pressed="true"],
.ec-slots__day[aria-pressed="true"] {
  background: var(--clb-color-text);
  border-color: var(--clb-color-text);
  color: var(--clb-color-bg);
}
.ec-sched__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clb-space-1) var(--clb-space-3);
  list-style: none;
  margin: 0;
  padding: var(--clb-space-2) var(--clb-space-3) 0;
  font-size: var(--clb-text-xs);
  color: var(--clb-color-text-2);
}
.ec-sched__legend[hidden] { display: none; }
.ec-sched__legend-item { display: inline-flex; align-items: center; gap: .375rem; }
.ec-sched__swatch { width: .75rem; height: .75rem; border-radius: 3px; background: var(--ec-tone); }
/* avviso sopra il calendario, sotto la barra (resta in vista anche se il calendario è alto):
   non sposta la griglia mentre si trascina */
.ec-sched__status {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 4.25rem;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: .5rem .875rem;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-md);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  box-shadow: var(--clb-shadow-lg);
  font-size: var(--clb-text-sm);
}
.ec-sched__status[hidden] { display: none; }
.ec-sched__status--danger { background: var(--clb-color-danger-bg); }
.ec-sched__status--warning { background: var(--clb-color-warning-bg); }
.ec-sched__layout { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
  .ec-sched--with-side .ec-sched__layout { grid-template-columns: minmax(0, 1fr) 15rem; }
}
.ec-sched__body { min-width: 0; overflow-x: auto; }
.ec-sched__loading, .ec-sched__empty { margin: 0; padding: var(--clb-space-4); color: var(--clb-color-text-2); font-size: var(--clb-text-sm); }
.ec-sched::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--clb-color-accent);
  opacity: 0;
  pointer-events: none;
  border-radius: var(--clb-radius-lg) 0 0 0;
}
.ec-sched.is-loading::after { opacity: 1; animation: ec-map-loading 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ec-sched.is-loading::after { animation: none; width: 100%; opacity: .6; } }

/* toni (eventi, legenda, slot) */
.ec-sched__event--success, .ec-sched__swatch--success { --ec-tone: var(--clb-color-success); }
.ec-sched__event--warning, .ec-sched__swatch--warning { --ec-tone: var(--clb-color-warning); }
.ec-sched__event--danger, .ec-sched__swatch--danger { --ec-tone: var(--clb-color-danger); }
.ec-sched__event--info, .ec-sched__swatch--info { --ec-tone: var(--clb-color-info); }
.ec-sched__event--muted, .ec-sched__swatch--muted { --ec-tone: var(--clb-color-text-3); }
.ec-sched__event--accent, .ec-sched__swatch--accent { --ec-tone: var(--clb-color-accent); }

/* l'evento */
.ec-sched__event {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: .1875rem .375rem;
  border: 0;
  border-left: 3px solid var(--ec-tone);
  border-radius: var(--clb-radius-sm);
  background: color-mix(in oklab, var(--ec-tone) 16%, var(--clb-color-surface));
  color: var(--clb-color-text);
  font-size: var(--clb-text-xs);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.ec-sched__event:hover { background: color-mix(in oklab, var(--ec-tone) 26%, var(--clb-color-surface)); }
.ec-sched__event:focus-visible { outline: 2px solid var(--clb-color-text); outline-offset: 1px; box-shadow: none; }
.ec-sched__time { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.ec-sched__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ec-sched__text { color: var(--clb-color-text-2); overflow: hidden; text-overflow: ellipsis; }
.ec-sched__event.is-editable { cursor: grab; }
.ec-sched.is-dragging, .ec-sched.is-dragging * { cursor: grabbing !important; user-select: none; }
.ec-sched__event.is-dragged { opacity: .4; pointer-events: none; }
.ec-sched__event--block {
  position: absolute;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: .125rem;
  z-index: 2;
  touch-action: pan-y;
}
.ec-sched__event--block .ec-sched__title { white-space: normal; }
.ec-sched__event--block.is-short { flex-direction: row; align-items: baseline; gap: .375rem; padding-top: 0; }
.ec-sched__event--block.is-short .ec-sched__title { white-space: nowrap; }
.ec-sched__allday[hidden] { display: none; }
.ec-sched__event--block .ec-sched__text { white-space: normal; }
.ec-sched__resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  cursor: ns-resize;
}
.ec-sched__resize::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 1.25rem;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
}
.ec-sched__event:hover .ec-sched__resize::after,
.ec-sched__event:focus-visible .ec-sched__resize::after { opacity: .45; }
@media (hover: none) { .ec-sched__resize::after { opacity: .35; } }
.ec-sched__event--row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .625rem;
  padding: .375rem .5rem;
  font-size: var(--clb-text-sm);
}
.ec-sched__event--row .ec-sched__text { grid-column: 2; }
.ec-sched__event--row:not(:has(.ec-sched__time)) { grid-template-columns: minmax(0, 1fr); }
.ec-sched__event--row:not(:has(.ec-sched__time)) .ec-sched__text { grid-column: 1; }
.ec-sched__event--row .ec-sched__title { white-space: normal; }

/* mese */
.ec-sched__weekdays, .ec-sched__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ec-sched__weekdays { border-bottom: 1px solid var(--clb-color-border-hair, var(--clb-color-border)); }
.ec-sched__weekday { padding: .375rem .5rem; font-size: var(--clb-text-xs); font-weight: 600; color: var(--clb-color-text-2); text-transform: uppercase; letter-spacing: .04em; }
.ec-sched__month { min-width: 36rem; }
/* trascinando sulle celle non si seleziona il testo dei giorni */
.ec-sched__month, .ec-sched__grid { -webkit-user-select: none; user-select: none; }
.ec-sched__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 6.75rem;
  padding: .25rem;
  border-right: 1px solid var(--clb-color-border-hair, var(--clb-color-border));
  border-bottom: 1px solid var(--clb-color-border-hair, var(--clb-color-border));
}
.ec-sched__cell:nth-child(7n) { border-right: 0; }
.ec-sched__week:last-child .ec-sched__cell { border-bottom: 0; }
.ec-sched__cell.is-other { background: var(--clb-color-surface-sunk); }
.ec-sched__cell-events { display: grid; gap: 2px; min-width: 0; }
.ec-sched__daynum {
  align-self: flex-start;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 .375rem;
  border: 0;
  border-radius: var(--clb-radius-pill, 999px);
  background: none;
  color: var(--clb-color-text);
  font-size: var(--clb-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ec-sched__cell.is-other .ec-sched__daynum { color: var(--clb-color-text-2); }
.ec-sched__daynum:hover { background: var(--clb-color-surface-sunk); }
.ec-sched__cell.is-today .ec-sched__daynum { background: var(--clb-color-accent); color: var(--clb-color-on-accent, var(--clb-color-accent-fg)); }
.ec-sched__more {
  justify-self: start;
  padding: .0625rem .375rem;
  border: 0;
  border-radius: var(--clb-radius-sm);
  background: none;
  color: var(--clb-color-text-2);
  font-size: var(--clb-text-xs);
  font-weight: 600;
}
.ec-sched__more:hover { background: var(--clb-color-surface-sunk); color: var(--clb-color-text); }

/* settimana e giorno */
.ec-sched__grid { min-width: calc(var(--ec-sched-axis) + var(--ec-sched-cols) * var(--ec-sched-col-min, 5.5rem)); }
.ec-sched__head, .ec-sched__allday, .ec-sched__times {
  display: grid;
  grid-template-columns: var(--ec-sched-axis) repeat(var(--ec-sched-cols), minmax(0, 1fr));
}
.ec-sched__head { border-bottom: 1px solid var(--clb-color-border-hair, var(--clb-color-border)); }
.ec-sched__head, .ec-sched__allday { padding-right: var(--ec-sched-sb, 0px); }
.ec-sched__corner--res { grid-column: 1; }
.ec-sched__dayhead { padding: .25rem; text-align: center; }
.ec-sched__dayname {
  display: inline-flex;
  align-items: baseline;
  gap: .375rem;
  padding: .25rem .5rem;
  border: 0;
  border-radius: var(--clb-radius-md);
  background: none;
  color: var(--clb-color-text);
}
.ec-sched__dayname:hover { background: var(--clb-color-surface-sunk); }
.ec-sched__dow { font-size: var(--clb-text-xs); font-weight: 600; color: var(--clb-color-text-2); text-transform: uppercase; letter-spacing: .04em; }
.ec-sched__dnum { font-size: 1.0625rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ec-sched__dayhead.is-today .ec-sched__dnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.875rem;
  border-radius: 999px;
  background: var(--clb-color-accent);
  color: var(--clb-color-on-accent, var(--clb-color-accent-fg));
}
.ec-sched__reshead {
  padding: .25rem .5rem .375rem;
  font-size: var(--clb-text-xs);
  font-weight: 600;
  text-align: center;
  color: var(--clb-color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ec-sched__allday { border-bottom: 1px solid var(--clb-color-border); }
.ec-sched__axis-label { align-self: center; padding-right: .375rem; font-size: .6875rem; color: var(--clb-color-text-2); text-align: right; }
.ec-sched__allday-cell { position: relative; display: grid; align-content: start; gap: 2px; min-height: 1.75rem; padding: 2px; border-left: 1px solid var(--clb-color-border-hair, var(--clb-color-border)); }
.ec-sched__scroll { max-height: var(--ec-sched-h, 40rem); overflow-y: auto; overscroll-behavior: contain; }
.ec-sched__times { position: relative; }
.ec-sched__axis { position: relative; }
.ec-sched__hour {
  position: absolute;
  right: .375rem;
  transform: translateY(-50%);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--clb-color-text-2);
}
.ec-sched__hour:first-child { transform: none; }
.ec-sched__col {
  position: relative;
  border-left: 1px solid var(--clb-color-border-hair, var(--clb-color-border));
  background-image: linear-gradient(to bottom, var(--clb-color-border-hair, var(--clb-color-border)) 1px, transparent 1px);
}
.ec-sched__col.is-dayend { border-right: 1px solid var(--clb-color-border); }
.ec-sched__col.is-today { background-color: color-mix(in oklab, var(--clb-color-accent) 5%, transparent); }
.ec-sched__closed {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--clb-color-text) 9%, transparent) 0 5px, transparent 5px 11px);
  pointer-events: none;
}
.ec-sched__now { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; background: var(--clb-color-danger); pointer-events: none; }
.ec-sched__now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--clb-color-danger); }
.ec-sched__ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 4;
  padding: .125rem .375rem;
  border: 2px dashed var(--clb-color-text);
  border-radius: var(--clb-radius-sm);
  background: color-mix(in oklab, var(--clb-color-text) 10%, transparent);
  color: var(--clb-color-text);
  font-size: var(--clb-text-xs);
  font-weight: 600;
  pointer-events: none;
}
.ec-sched__ghost--cell { position: relative; left: auto; right: auto; top: auto; }

/* elenco */
.ec-sched__list { padding: var(--clb-space-2) var(--clb-space-3) var(--clb-space-3); }
.ec-sched__listday + .ec-sched__listday { margin-top: var(--clb-space-3); }
.ec-sched__listhead { margin: 0 0 var(--clb-space-1); font-size: var(--clb-text-sm); font-weight: 650; }
.ec-sched__listday.is-today .ec-sched__listhead { color: var(--clb-color-accent-text, var(--clb-color-accent)); }
.ec-sched__listitems, .ec-sched__side-list { display: grid; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.ec-sched__listitems .ec-sched__time { min-width: 6.5rem; }

/* da pianificare */
.ec-sched__side { padding: var(--clb-space-3); border-top: 1px solid var(--clb-color-border); }
@media (min-width: 992px) { .ec-sched__side { border-top: 0; border-left: 1px solid var(--clb-color-border); } }
.ec-sched__side-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--clb-text-sm); font-weight: 650; }
.ec-sched__count { padding: 0 .4375rem; border-radius: 999px; background: var(--clb-color-surface-sunk); font-size: var(--clb-text-xs); font-weight: 600; }
.ec-sched__side-hint { margin: .25rem 0 var(--clb-space-2); font-size: var(--clb-text-xs); color: var(--clb-color-text-2); }
.ec-sched__event--todo { border-left-style: dashed; touch-action: pan-y; }

/* popover */
.ec-sched__pop {
  position: fixed;
  z-index: 1080;
  width: max-content;
  max-width: min(22rem, calc(100vw - 16px));
  padding: .75rem 2.25rem .75rem .875rem;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-md);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  box-shadow: var(--clb-shadow-lg);
  font-size: var(--clb-text-sm);
}
.ec-sched__pop:focus { outline: 0; }
.ec-sched__pop-close { position: absolute; top: .5rem; right: .5rem; width: .75rem; height: .75rem; }
.ec-sched__pop-body { display: grid; gap: .25rem; }
.ec-sched__pop-title { margin: 0; font-weight: 650; }
.ec-sched__pop-text { margin: 0; color: var(--clb-color-text-2); }

@media (max-width: 575.98px) {
  .ec-sched__bar { padding: var(--clb-space-2); }
  .ec-sched__heading { margin-left: 0; width: 100%; order: 3; }
  .ec-sched__nav { flex-wrap: wrap; }
  .ec-sched__views { width: 100%; }
  .ec-sched__views .btn { flex: 1; }
}

/* prenotazione */
.ec-slots { min-width: 0; margin-bottom: var(--clb-space-3); padding: 0; border: 0; }
/* striscia dei giorni: si scorre col dito, con la rotella o con le frecce; niente barra di scorrimento */
.ec-slots__strip { position: relative; margin-bottom: var(--clb-space-2); }
.ec-slots__days {
  display: flex;
  gap: var(--clb-space-2);
  overflow-x: auto;
  padding: 2px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ec-slots__days::-webkit-scrollbar { display: none; }
.ec-slots__strip.has-before .ec-slots__days { -webkit-mask-image: linear-gradient(to right, transparent 0, black 2.5rem); mask-image: linear-gradient(to right, transparent 0, black 2.5rem); }
.ec-slots__strip.has-after .ec-slots__days { -webkit-mask-image: linear-gradient(to left, transparent 0, black 2.5rem); mask-image: linear-gradient(to left, transparent 0, black 2.5rem); }
.ec-slots__strip.has-before.has-after .ec-slots__days {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 2.5rem, black calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 2.5rem, black calc(100% - 2.5rem), transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .ec-slots__days { scroll-behavior: auto; } }
.ec-slots__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--clb-color-border);
  border-radius: 50%;
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  box-shadow: var(--clb-shadow-sm, none);
}
.ec-slots__arrow[hidden] { display: none; }
.ec-slots__arrow--prev { left: -.25rem; }
.ec-slots__arrow--next { right: -.25rem; }
.ec-slots__arrow:hover { background: var(--clb-color-surface-sunk); }
.ec-slots__arrow:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 2px; box-shadow: none; }
@media (hover: none) { .ec-slots__arrow { display: none; } }
.ec-slots__day {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 4.5rem;
  padding: .5rem .5rem .4375rem;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-md);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  scroll-snap-align: start;
}
.ec-slots__day:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--clb-color-surface-sunk); }
.ec-slots__day:disabled { color: var(--clb-color-text-3); background: var(--clb-color-surface-sunk); border-style: dashed; }
.ec-slots__day:focus-visible, .ec-slots__more:focus-visible { outline: 2px solid var(--clb-color-accent); outline-offset: 2px; box-shadow: none; }
.ec-slots__dow { font-size: var(--clb-text-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ec-slots__date { font-weight: 650; font-variant-numeric: tabular-nums; }
.ec-slots__free { font-size: .6875rem; }
.ec-slots__more {
  flex: none;
  align-self: stretch;
  padding: .5rem .75rem;
  border: 1px dashed var(--clb-color-border);
  border-radius: var(--clb-radius-md);
  background: none;
  color: var(--clb-color-text);
  font-size: var(--clb-text-sm);
}
.ec-slots__times { display: flex; flex-wrap: wrap; gap: var(--clb-space-2); min-height: 2.5rem; }
.ec-slots__times[aria-busy="true"] { opacity: .5; }
.ec-slots__time {
  min-width: 4.25rem;
  padding: .4375rem .75rem;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-pill, 999px);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}
.ec-slots__time:hover { background: var(--clb-color-surface-sunk); }
.btn-check:checked + .ec-slots__time {
  background: var(--clb-color-accent);
  border-color: var(--clb-color-accent);
  color: var(--clb-color-on-accent, var(--clb-color-accent-fg));
}
.btn-check:focus-visible + .ec-slots__time { outline: 2px solid var(--clb-color-accent); outline-offset: 2px; }
.ec-slots__empty, .ec-slots__msg { margin: 0; font-size: var(--clb-text-sm); color: var(--clb-color-text-2); }
.ec-slots__msg[hidden] { display: none; }

/* ============================================================
 *  v1.1 — Detail (<c-detail>): coppie etichetta / valore
 *  Su telefono sempre una colonna; cols="2|3" dai 768px (3 colonne dai 992px).
 * ============================================================ */
.ec-detail {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-6);
  min-width: 0;
}
.ec-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--clb-space-4) var(--clb-space-6);
  margin: 0;
}
@media (min-width: 768px) {
  .ec-detail--cols-2 .ec-detail__grid,
  .ec-detail--cols-3 .ec-detail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .ec-detail--cols-3 .ec-detail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ec-detail__item {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-1);
  min-width: 0;
}
.ec-detail__item--wide { grid-column: 1 / -1; }
.ec-detail__label {
  margin: 0;
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-sm);
  font-weight: 500;
  color: var(--clb-color-text-2);
}
.ec-detail__value {
  margin: 0;
  color: var(--clb-color-text);
  overflow-wrap: anywhere;
}
.ec-detail__value > :last-child { margin-bottom: 0; }
.ec-detail__empty { color: var(--clb-color-text-2); }
.ec-detail__section {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-4);
  min-width: 0;
}
.ec-detail__head {
  padding-bottom: var(--clb-space-2);
  border-bottom: 1px solid var(--clb-color-border-hair);
}
.ec-detail__title {
  margin: 0;
  font-size: var(--clb-text-md);
  line-height: var(--clb-leading-tight);
}
.ec-detail__description {
  margin: var(--clb-space-1) 0 0;
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
}

/* ============================================================
 *  v1.1 — Timeline (<c-timeline>): storico compatto, stile app
 *  Diverso da <c-steps variant="timeline"> (blocco vetrina animato allo scroll).
 * ============================================================ */
.ec-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-timeline__item {
  --ec-tl-tone: var(--clb-color-text-3);
  --ec-tl-fg: var(--clb-color-text-2);
  --ec-tl-bg: var(--clb-color-surface-2);
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--clb-space-3);
  padding-bottom: var(--clb-space-4);
}
.ec-timeline__item:last-child { padding-bottom: 0; }
/* linea che collega il segno al successivo */
.ec-timeline__item::before {
  content: "";
  position: absolute;
  top: calc(1.5rem + var(--clb-space-1));
  bottom: var(--clb-space-1);
  left: calc(0.75rem - 1px);
  width: 2px;
  border-radius: 1px;
  background: var(--clb-color-border);
}
.ec-timeline__item:last-child::before { display: none; }
.ec-timeline__item--accent  { --ec-tl-tone: var(--clb-color-accent);  --ec-tl-fg: var(--clb-color-accent-text, var(--clb-color-accent)); --ec-tl-bg: var(--clb-color-accent-bg); }
.ec-timeline__item--success { --ec-tl-tone: var(--clb-color-success); --ec-tl-fg: var(--clb-color-success); --ec-tl-bg: var(--clb-color-success-bg); }
.ec-timeline__item--warning { --ec-tl-tone: var(--clb-color-warning); --ec-tl-fg: var(--clb-color-warning); --ec-tl-bg: var(--clb-color-warning-bg); }
.ec-timeline__item--danger  { --ec-tl-tone: var(--clb-color-danger);  --ec-tl-fg: var(--clb-color-danger);  --ec-tl-bg: var(--clb-color-danger-bg); }
.ec-timeline__item--info    { --ec-tl-tone: var(--clb-color-info);    --ec-tl-fg: var(--clb-color-info);    --ec-tl-bg: var(--clb-color-info-bg); }
.ec-timeline__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}
.ec-timeline__marker:not(.ec-timeline__marker--icon)::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--ec-tl-tone);
}
.ec-timeline__marker--icon {
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--ec-tl-fg);
  background: var(--ec-tl-bg);
  border: 1px solid color-mix(in srgb, var(--ec-tl-fg) 25%, transparent);
}
.ec-timeline__body { min-width: 0; }
.ec-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--clb-space-2);
  min-height: 1.5rem;
  margin: 0;
  padding-top: 0.125rem;
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
}
.ec-timeline__head > * + *::before {
  content: "·";
  margin-right: var(--clb-space-2);
  color: var(--clb-color-text-2);
}
.ec-timeline__title {
  font-weight: 600;
  color: var(--clb-color-text);
}
.ec-timeline__when {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ec-timeline__content {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-1);
  margin-top: var(--clb-space-1);
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text);
}
.ec-timeline__content > :last-child { margin-bottom: 0; }
/* riga di modifica: campo, prima (barrato), freccia, dopo */
.ec-timeline__change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--clb-space-2);
  min-width: 0;
}
.ec-timeline__field {
  flex: 0 0 auto;
  min-width: min(9rem, 100%);
  font-weight: 500;
  color: var(--clb-color-text-2);
}
.ec-timeline__diff {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--clb-space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ec-timeline__before {
  color: var(--clb-color-text-2);
  text-decoration: line-through;
}
.ec-timeline__after {
  color: var(--clb-color-text);
  font-weight: 500;
  text-decoration: none;
}
.ec-timeline__before--empty,
.ec-timeline__after--empty {
  color: var(--clb-color-text-2);
  font-weight: 400;
  text-decoration: none;
}
.ec-timeline__arrow { color: var(--clb-color-text-2); }

/* ============================================================
 *  v1.1 — Form section (<c-form-section>): fieldset con intestazione e griglia
 *  Il legend resta float (come nel reboot di Bootstrap), quindi è un elemento
 *  normale della griglia del fieldset: titolo e descrizione a sinistra, azioni a destra.
 * ============================================================ */
.ec-form-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--clb-space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ec-form-section + .ec-form-section {
  margin-top: var(--clb-space-6);
  padding-top: var(--clb-space-6);
  border-top: 1px solid var(--clb-color-border-hair);
}
.ec-form-section__title {
  float: left;
  grid-column: 1;
  grid-row: 1;
  width: auto;
  margin: 0;
  padding: 0;
  font-family: var(--clb-font-display);
  font-size: var(--clb-text-md);
  font-weight: 600;
  line-height: var(--clb-leading-tight);
  color: var(--clb-color-text);
}
.ec-form-section__description {
  grid-column: 1;
  margin: var(--clb-space-1) 0 0;
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
}
.ec-form-section__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-2);
}
.ec-form-section__grid { grid-column: 1 / -1; }
.ec-form-section__title ~ .ec-form-section__grid,
.ec-form-section__description ~ .ec-form-section__grid,
.ec-form-section__actions ~ .ec-form-section__grid { margin-top: var(--clb-space-1); }
.ec-form-section__grid > .ec-form-section__full {
  flex: 0 0 auto;
  width: 100%;
}
/* il gutter della griglia (g-3) fa già da spazio: via il mb-3 di default di <c-field> */
.ec-form-section__grid > .ec-field.mb-3 { margin-bottom: 0 !important; }
@media (max-width: 575.98px) {
  .ec-form-section { grid-template-columns: minmax(0, 1fr); }
  .ec-form-section__actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--clb-space-2);
  }
}

/* ============================================================
 *  Focus: un solo indicatore
 *  Alcuni style mettono un anello su ogni :focus-visible (nitido: box-shadow).
 *  Dove il componente disegna già il suo (contenitore con :focus-within, outline
 *  proprio), l'anello dello style si toglie, altrimenti se ne vedono due.
 * ============================================================ */
/* parti interne dei controlli composti: l'anello è del contenitore */
.ec-combo__control :focus-visible,
.ec-date__control :focus-visible,
.ec-dropzone__input:focus-visible,
.ec-chat__input:focus-visible,
.ec-ai__input:focus-visible {
  outline: 0;
  box-shadow: none;
}
/* indicatore proprio (outline): niente anello in più */
.ec-table tr[data-ec-href]:focus-visible,
.ec-tabs__panel:focus-visible,
.ec-faq__question:focus-visible,
.ec-carousel__track:focus-visible,
.ec-carousel__arrow:focus-visible,
.ec-date__pop button:focus-visible,
.ec-tree__item:focus-visible { box-shadow: none; }
/* il giorno di oggi tiene il suo anello anche col focus */
.ec-date__pop .ec-date__day.is-today:focus-visible,
.ec-date__pop .ec-date__cell.is-today:focus-visible { box-shadow: inset 0 0 0 1.5px var(--clb-color-accent); }