/* ============================================================
   BIO DASH — design system
   Un unico foglio di stile per tutte le pagine.
   Convenzione classi: .bd-<blocco>__<elemento> --<variante>
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Rubik:wght@400;500;600&display=swap');

/* --- 1. Token ------------------------------------------------ */
:root{
  /* colori marchio */
  --bd-blu:#2C6DCE;
  --bd-blu-scuro:#1F55A6;
  --bd-blu-chiaro:#4A80D6;
  --bd-blu-tenue:#7FA6E3;
  --bd-blu-medio:#5C8FDD;
  --bd-giallo:#F9D949;
  --bd-navy:#16233A;

  /* superfici */
  --bd-fondo:#F4F6FB;
  --bd-superficie:#FFFFFF;
  --bd-superficie-alt:#EDF3FD;
  --bd-riga:#EDF1F9;
  --bd-bordo:#E4EAF6;
  --bd-bordo-forte:#DCE4F2;

  /* testo */
  --bd-testo:#16233A;
  --bd-testo-medio:#41536F;
  --bd-testo-tenue:#6B7C97;
  --bd-testo-debole:#7B8CA8;
  --bd-testo-placeholder:#B4C0D2;

  /* semantici */
  --bd-positivo:#1F9D6B;
  --bd-positivo-scuro:#12724C;
  --bd-positivo-fondo:#E4F5EC;
  --bd-negativo:#E2574C;
  --bd-attenzione:#8A6B00;
  --bd-attenzione-fondo:#FEF6D6;
  --bd-attenzione-bordo:#F2E0A8;

  /* tipografia */
  --bd-font:'Rubik',system-ui,-apple-system,sans-serif;
  --bd-font-display:'Montserrat',sans-serif;

  /* forma */
  --bd-r-sm:10px;
  --bd-r-md:14px;
  --bd-r-lg:18px;
  --bd-r-xl:20px;
  --bd-r-pill:999px;
  --bd-ombra:0 18px 50px rgba(22,35,58,.10);

  /* spazi */
  --bd-sp-1:4px;  --bd-sp-2:8px;  --bd-sp-3:12px; --bd-sp-4:16px;
  --bd-sp-5:22px; --bd-sp-6:26px; --bd-sp-7:32px; --bd-sp-8:40px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bd-fondo);
  font-family:var(--bd-font);
  color:var(--bd-testo);
  -webkit-font-smoothing:antialiased;
}
svg{ display:block; }
a{ color:var(--bd-blu); text-decoration:none; }
a:hover{ color:var(--bd-blu-scuro); }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:#fff; padding:2px 7px; border-radius:6px; }

/* --- 2. Logo ------------------------------------------------- */
.bd-logo{ display:inline-flex; align-items:center; font-family:var(--bd-font-display);
  font-weight:900; font-size:26px; letter-spacing:-.035em; color:#fff; line-height:1; }
.bd-logo__mark{ display:inline-flex; align-items:center; justify-content:center;
  width:1.27em; height:1.27em; margin:0 .08em; border-radius:.38em; background:var(--bd-giallo); }
.bd-logo__mark svg{ width:.85em; height:.85em; }
.bd-logo--lg{ font-size:38px; }
.bd-logo--sm{ font-size:22px; }
.bd-logo--blu{ color:var(--bd-blu); }
.bd-logo--navy{ color:var(--bd-navy); }

/* --- 3. Topbar ----------------------------------------------- */
.bd-topbar{ background:var(--bd-blu); height:74px; padding:0 var(--bd-sp-7);
  display:flex; align-items:center; justify-content:space-between; gap:var(--bd-sp-6); }
.bd-topbar__left{ display:flex; align-items:center; gap:36px; min-width:0; }
.bd-topbar__right{ display:flex; align-items:center; gap:var(--bd-sp-3); }
.bd-topbar__link{ font-size:13.5px; color:rgba(255,255,255,.82); }
.bd-topbar__link:hover{ color:#fff; }
.bd-topbar__logout{ font-size:13.5px; font-weight:500; color:#fff;
  background:rgba(255,255,255,.16); padding:8px 14px; border-radius:var(--bd-r-sm); }
.bd-topbar__logout:hover{ background:rgba(255,255,255,.26); color:#fff; }

.bd-mainnav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.bd-mainnav a{ font-size:14.5px; font-weight:500; color:rgba(255,255,255,.82);
  padding:8px 14px; border-radius:var(--bd-r-pill); }
.bd-mainnav a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.bd-mainnav a[aria-current="page"]{ background:#fff; color:var(--bd-blu); font-weight:600; }

.bd-account{ display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.13);
  padding:6px 14px 6px 6px; border-radius:var(--bd-r-pill); }
.bd-account__avatar{ width:30px; height:30px; border-radius:50%; background:var(--bd-giallo);
  color:var(--bd-blu); font-family:var(--bd-font-display); font-weight:900; font-size:12px;
  display:flex; align-items:center; justify-content:center; flex:none; }
.bd-account__name{ font-size:13px; font-weight:500; color:#fff; line-height:1.2; }
.bd-account__role{ font-size:11px; color:rgba(255,255,255,.7); line-height:1.2; }

/* --- 4. Layout di pagina ------------------------------------- */
.bd-page{ padding:34px var(--bd-sp-7) var(--bd-sp-8); display:flex; flex-direction:column; gap:var(--bd-sp-5); }
.bd-pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--bd-sp-4); flex-wrap:wrap; }
.bd-pagehead__title{ margin:0; font-family:var(--bd-font-display); font-weight:900;
  font-size:38px; letter-spacing:-.03em; line-height:1; color:var(--bd-testo); }
.bd-pagehead__sub{ margin:5px 0 0; font-size:14.5px; color:var(--bd-testo-tenue); }
.bd-pagehead__actions{ display:flex; align-items:center; gap:var(--bd-sp-3); flex-wrap:wrap; }

.bd-grid{ display:grid; gap:var(--bd-sp-4); }
.bd-grid--2{ grid-template-columns:repeat(2,1fr); }
.bd-grid--3{ grid-template-columns:repeat(3,1fr); }
.bd-grid--4{ grid-template-columns:repeat(4,1fr); }
.bd-grid--hero{ grid-template-columns:1.15fr 1fr 1fr; gap:18px; }
.bd-grid--hero4{ grid-template-columns:1.2fr 1fr 1fr 1fr; }
.bd-grid--split{ grid-template-columns:1.35fr 1fr; gap:18px; }

/* --- 5. Card ------------------------------------------------- */
.bd-card{ background:var(--bd-superficie); border:1.5px solid var(--bd-bordo);
  border-radius:var(--bd-r-xl); padding:var(--bd-sp-5) var(--bd-sp-6);
  display:flex; flex-direction:column; gap:var(--bd-sp-3); }
.bd-card--blu{ background:var(--bd-blu); border-color:transparent; color:#fff; position:relative; overflow:hidden; }
.bd-card--navy{ background:var(--bd-navy); border-color:transparent; color:#fff; }
.bd-card--blob::before{ content:""; position:absolute; right:-60px; top:-70px;
  width:190px; height:190px; border-radius:50%; background:var(--bd-blu-chiaro); }
.bd-card--blob > *{ position:relative; }
.bd-card__title{ margin:0; font-family:var(--bd-font-display); font-weight:800; font-size:17px; color:var(--bd-testo); }
.bd-card--blu .bd-card__title,.bd-card--navy .bd-card__title{ color:#fff; }
.bd-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--bd-sp-3); }
.bd-card__note{ font-size:12.5px; color:#8494AB; line-height:1.6; }
.bd-card__foot{ border-top:1.5px solid var(--bd-riga); padding-top:var(--bd-sp-4);
  font-size:13px; color:#8494AB; line-height:1.6; }

/* --- 6. KPI -------------------------------------------------- */
.bd-kpi{ background:var(--bd-superficie); border:1.5px solid var(--bd-bordo);
  border-radius:var(--bd-r-lg); padding:20px 22px; display:flex; flex-direction:column; gap:11px; }
.bd-kpi:hover{ border-color:var(--bd-blu); }
.bd-kpi--blu{ background:var(--bd-blu); border-color:transparent; color:#fff; position:relative; overflow:hidden; }
.bd-kpi--navy{ background:var(--bd-navy); border-color:transparent; color:#fff; }
.bd-kpi--blu:hover,.bd-kpi--navy:hover{ border-color:transparent; }
.bd-kpi--blu::before{ content:""; position:absolute; right:-60px; top:-70px;
  width:190px; height:190px; border-radius:50%; background:var(--bd-blu-chiaro); }
.bd-kpi--blu > *{ position:relative; }
.bd-kpi__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--bd-sp-2); }
.bd-kpi__label{ font-size:12px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--bd-testo-debole); }
.bd-kpi--blu .bd-kpi__label{ color:rgba(255,255,255,.78); }
.bd-kpi--navy .bd-kpi__label{ color:rgba(255,255,255,.6); }
.bd-kpi__value{ display:flex; align-items:baseline; gap:5px; font-family:var(--bd-font-display);
  font-weight:900; font-size:40px; line-height:1; letter-spacing:-.03em; color:var(--bd-testo); }
.bd-kpi--blu .bd-kpi__value,.bd-kpi--navy .bd-kpi__value{ color:#fff; }
.bd-kpi__value--xl{ font-size:52px; letter-spacing:-.04em; }
.bd-kpi__value--lg{ font-size:44px; letter-spacing:-.035em; }
.bd-kpi__value--sm{ font-size:30px; }
.bd-kpi__unit{ font-family:var(--bd-font-display); font-weight:700; font-size:15px; color:var(--bd-testo-debole); }
.bd-kpi--blu .bd-kpi__unit{ color:rgba(255,255,255,.7); }
.bd-kpi--navy .bd-kpi__unit{ color:rgba(255,255,255,.55); }
.bd-kpi__meta{ font-size:13px; color:var(--bd-testo-tenue); line-height:1.5; }
.bd-kpi--blu .bd-kpi__meta{ color:rgba(255,255,255,.82); }
.bd-kpi--navy .bd-kpi__meta{ color:rgba(255,255,255,.68); }

/* --- 7. Badge e delta --------------------------------------- */
.bd-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:var(--bd-r-pill); background:var(--bd-riga); color:var(--bd-testo-medio); }
.bd-badge--giallo{ background:var(--bd-giallo); color:var(--bd-navy); }
.bd-badge--verde{ background:var(--bd-positivo-fondo); color:var(--bd-positivo-scuro); }
.bd-badge--ambra{ background:var(--bd-attenzione-fondo); color:var(--bd-attenzione); }
.bd-badge--blu{ background:var(--bd-blu); color:#fff; }
.bd-badge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.bd-badge--verde .bd-badge__dot{ background:var(--bd-positivo); }
.bd-badge--ambra .bd-badge__dot{ background:var(--bd-giallo); }

.bd-delta{ font-size:12px; font-weight:600; }
.bd-delta--su{ color:var(--bd-positivo); }
.bd-delta--giu{ color:var(--bd-negativo); }
.bd-delta--neutro{ color:var(--bd-testo-tenue); }
.bd-delta--record{ color:var(--bd-positivo-scuro); }

/* --- 8. Barre di progresso e sparkline ---------------------- */
.bd-bar{ height:8px; border-radius:var(--bd-r-pill); background:var(--bd-riga); overflow:hidden; }
.bd-bar__fill{ height:100%; border-radius:var(--bd-r-pill); background:var(--bd-blu); }
.bd-bar__fill--giallo{ background:var(--bd-giallo); }

.bd-spark{ display:flex; align-items:flex-end; gap:5px; height:48px; }
.bd-spark__bar{ flex:1; background:rgba(255,255,255,.26); border-radius:4px; }
.bd-spark__bar--evidenza{ background:var(--bd-giallo); }

/* --- 9. Pulsanti e controlli -------------------------------- */
.bd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--bd-font); font-size:13.5px; font-weight:500; line-height:1;
  padding:11px 16px; border-radius:12px; border:1.5px solid transparent; cursor:pointer;
  background:var(--bd-blu); color:#fff; }
.bd-btn:hover{ background:var(--bd-blu-scuro); color:#fff; }
.bd-btn--ghost{ background:var(--bd-superficie); border-color:var(--bd-bordo-forte); color:var(--bd-testo-medio); }
.bd-btn--ghost:hover{ background:var(--bd-superficie); border-color:var(--bd-blu); color:var(--bd-blu); }
.bd-btn--outline{ background:var(--bd-superficie); border-color:var(--bd-blu); color:var(--bd-blu); }
.bd-btn--outline:hover{ background:var(--bd-superficie-alt); color:var(--bd-blu-scuro); }
.bd-btn--danger{ background:var(--bd-superficie); border-color:#F3C9C5; color:var(--bd-negativo); }
.bd-btn--lg{ font-size:14px; font-weight:600; padding:13px 18px; }
.bd-btn--block{ width:100%; }

.bd-segmented{ display:inline-flex; align-items:center; gap:3px; background:var(--bd-superficie);
  border:1.5px solid var(--bd-bordo-forte); border-radius:12px; padding:4px; }
.bd-segmented button{ font-family:var(--bd-font); font-size:13.5px; font-weight:500;
  padding:7px 13px; border:0; border-radius:9px; background:transparent; color:var(--bd-testo-tenue); cursor:pointer; }
.bd-segmented button[aria-pressed="true"]{ background:var(--bd-blu); color:#fff; font-weight:600; }

.bd-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bd-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; padding:8px 14px;
  border-radius:var(--bd-r-pill); background:var(--bd-superficie);
  border:1.5px solid var(--bd-bordo-forte); color:var(--bd-testo-medio); cursor:pointer; }
.bd-chip:hover{ border-color:var(--bd-blu); }
.bd-chip[aria-pressed="true"]{ background:var(--bd-blu); border-color:var(--bd-blu); color:#fff; font-weight:600; }
.bd-chip[aria-pressed="true"] .bd-chip__dot{ background:var(--bd-giallo); }
.bd-chip__dot{ width:8px; height:8px; border-radius:50%; background:var(--bd-blu-tenue); }

.bd-field{ display:flex; flex-direction:column; gap:7px; }
.bd-field__label{ font-size:13px; font-weight:500; color:var(--bd-testo-medio); }
.bd-input,.bd-select{ height:46px; width:100%; border:1.5px solid var(--bd-bordo-forte);
  border-radius:12px; background:var(--bd-superficie); padding:0 14px;
  font-family:var(--bd-font); font-size:14px; color:var(--bd-testo); }
.bd-input::placeholder{ color:var(--bd-testo-placeholder); }
.bd-input:focus,.bd-select:focus{ outline:none; border-color:var(--bd-blu); }
.bd-select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237B8CA8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:38px; }
.bd-inputgroup{ display:flex; gap:9px; align-items:center; }
.bd-inputgroup .bd-input,.bd-inputgroup .bd-select{ flex:1; }

.bd-search{ display:flex; align-items:center; gap:8px; background:var(--bd-superficie);
  border:1.5px solid var(--bd-bordo-forte); border-radius:12px; padding:0 14px; height:46px; min-width:240px; }
.bd-search input{ border:0; outline:none; flex:1; font-family:var(--bd-font); font-size:13.5px; color:var(--bd-testo); }

.bd-status{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
  padding:9px 14px; border-radius:12px; background:var(--bd-positivo-fondo); color:var(--bd-positivo-scuro); }
.bd-status--ambra{ background:var(--bd-attenzione-fondo); color:var(--bd-attenzione); }
.bd-status__dot{ width:8px; height:8px; border-radius:50%; background:var(--bd-positivo); }
.bd-status--ambra .bd-status__dot{ background:var(--bd-giallo); }

.bd-alert{ display:flex; align-items:flex-start; gap:10px; padding:13px 15px;
  border-radius:var(--bd-r-md); background:var(--bd-attenzione-fondo);
  border:1.5px solid var(--bd-attenzione-bordo); color:var(--bd-attenzione);
  font-size:13px; line-height:1.5; }

/* --- 10. Tabelle analitiche --------------------------------- */
.bd-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.bd-table th{ font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bd-testo-debole); background:var(--bd-fondo); padding:11px 12px; text-align:left; white-space:nowrap; }
.bd-table th:first-child{ border-radius:var(--bd-r-sm) 0 0 var(--bd-r-sm); }
.bd-table th:last-child{ border-radius:0 var(--bd-r-sm) var(--bd-r-sm) 0; }
.bd-table td{ padding:11px 12px; color:var(--bd-testo-medio); border-bottom:1px solid var(--bd-riga); }
.bd-table tbody tr:last-child td{ border-bottom:0; }
.bd-table .bd-num{ text-align:right; font-variant-numeric:tabular-nums; }
.bd-table th.bd-num{ text-align:right; }
.bd-table .bd-table__key{ font-weight:500; color:var(--bd-testo); }
.bd-table tr.is-current td{ background:var(--bd-superficie-alt); border-bottom-color:transparent; font-weight:500; color:var(--bd-testo); }
.bd-table tr.is-current td:first-child{ border-radius:var(--bd-r-sm) 0 0 var(--bd-r-sm); font-weight:600; }
.bd-table tr.is-current td:last-child{ border-radius:0 var(--bd-r-sm) var(--bd-r-sm) 0; }
.bd-table tr.is-anomaly td{ color:var(--bd-attenzione); }
.bd-table tfoot td{ background:var(--bd-fondo); font-family:var(--bd-font-display);
  font-weight:700; color:var(--bd-testo); border-bottom:0; padding:13px 12px; }
.bd-table tfoot td:first-child{ border-radius:var(--bd-r-sm) 0 0 var(--bd-r-sm); }
.bd-table tfoot td:last-child{ border-radius:0 var(--bd-r-sm) var(--bd-r-sm) 0; color:var(--bd-blu); }
.bd-table__toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--bd-sp-3); flex-wrap:wrap; }
.bd-table__footer{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--bd-sp-3); padding-top:4px; font-size:12.5px; color:var(--bd-testo-tenue); }
.bd-table__empty{ color:#8494AB; }

/* --- 11. Grafici -------------------------------------------- */
.bd-chart{ display:flex; gap:var(--bd-sp-3); }
.bd-chart__axis{ display:flex; flex-direction:column; justify-content:space-between;
  align-items:flex-end; font-size:12px; color:#8494AB; font-variant-numeric:tabular-nums; }
.bd-chart__axis--dx{ align-items:flex-start; }
.bd-chart__body{ flex:1; display:flex; flex-direction:column; min-width:0; }
.bd-chart__plot{ position:relative; }
.bd-chart__grid{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.bd-chart__grid span{ height:1.4px; background:var(--bd-riga); }
.bd-chart__grid span:last-child{ height:1.6px; background:#D7E0EF; }
.bd-chart__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bd-chart__bars{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:6px; }
.bd-chart__labels{ display:flex; padding-top:10px; font-size:11px; color:#8494AB; }
.bd-chart__labels > *{ flex:1; text-align:center; }
.bd-chart__labels--spread{ justify-content:space-between; }
.bd-chart__labels .is-current{ color:var(--bd-testo); font-weight:600; }
.bd-chart__mean{ position:absolute; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg,var(--bd-giallo) 0 9px,transparent 9px 17px); }
.bd-legend{ display:flex; align-items:center; gap:16px; font-size:12.5px; color:var(--bd-testo-medio); flex-wrap:wrap; }
.bd-legend__item{ display:flex; align-items:center; gap:7px; }
.bd-legend__swatch{ width:13px; height:13px; border-radius:4px; background:var(--bd-blu); }
.bd-legend__line{ width:18px; height:3px; border-radius:2px; background:var(--bd-blu); }

/* colonne impilate delle fasi del sonno */
.bd-stack{ display:flex; flex-direction:column; height:100%; }
.bd-stack__seg--profondo{ background:var(--bd-navy); }
.bd-stack__seg--leggero{ background:var(--bd-blu); }
.bd-stack__seg--rem{ background:var(--bd-blu-tenue); }
.bd-stack__seg--sveglio{ background:var(--bd-giallo); border-radius:4px 4px 0 0; }
.bd-stack__spacer{ background:transparent; }

/* --- 12. Liste (fonti, accessi, log) ------------------------ */
.bd-list{ display:flex; flex-direction:column; }
.bd-list__row{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--bd-sp-3); padding:13px 0; border-bottom:1.5px solid var(--bd-riga); }
.bd-list__row:last-child{ border-bottom:0; padding-bottom:0; }
.bd-list__main{ display:flex; align-items:center; gap:var(--bd-sp-3); min-width:0; }
.bd-list__icon{ width:34px; height:34px; border-radius:11px; background:var(--bd-superficie-alt);
  display:flex; align-items:center; justify-content:center; flex:none;
  font-family:var(--bd-font-display); font-weight:900; font-size:12px; color:var(--bd-blu); }
.bd-list__icon--ambra{ background:var(--bd-attenzione-fondo); color:var(--bd-attenzione); }
.bd-list__title{ font-size:13.5px; font-weight:500; color:var(--bd-testo); }
.bd-list__meta{ font-size:12.5px; color:var(--bd-testo-tenue); }
.bd-list__side{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--bd-testo-tenue); }

/* --- 13. Griglia misure (circonferenze) --------------------- */
.bd-measures{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--bd-sp-3); }
.bd-measure{ background:var(--bd-fondo); border-radius:var(--bd-r-md); padding:14px 16px;
  display:flex; flex-direction:column; gap:4px; }
.bd-measure--evidenza{ background:var(--bd-superficie-alt); border:1.5px solid #C9DCF7; }
.bd-measure__label{ font-size:11.5px; color:var(--bd-testo-debole); }
.bd-measure--evidenza .bd-measure__label{ color:var(--bd-blu); font-weight:500; }
.bd-measure__value{ display:flex; align-items:baseline; gap:3px;
  font-family:var(--bd-font-display); font-weight:900; font-size:22px; color:var(--bd-testo); }
.bd-measure--evidenza .bd-measure__value{ color:var(--bd-blu); }
.bd-measure__unit{ font-family:var(--bd-font); font-weight:400; font-size:11px; color:#8494AB; }
.bd-thumbs{ display:flex; gap:5px; }
.bd-thumbs span{ width:26px; height:26px; border-radius:7px; background:var(--bd-bordo-forte); }

/* --- 14. Utilità -------------------------------------------- */
.bd-stack-v{ display:flex; flex-direction:column; }
.bd-row{ display:flex; align-items:center; }
.bd-row--between{ justify-content:space-between; }
.bd-row--end{ justify-content:flex-end; }
.bd-gap-1{ gap:var(--bd-sp-1); } .bd-gap-2{ gap:var(--bd-sp-2); }
.bd-gap-3{ gap:var(--bd-sp-3); } .bd-gap-4{ gap:var(--bd-sp-4); }
.bd-gap-5{ gap:var(--bd-sp-5); }
.bd-eyebrow{ font-size:12px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--bd-testo-debole); }
.bd-muted{ color:var(--bd-testo-tenue); }
.bd-small{ font-size:12.5px; }
.bd-num{ font-variant-numeric:tabular-nums; }
.bd-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --- 15. Responsive ----------------------------------------- */
@media (max-width:1280px){
  .bd-grid--4{ grid-template-columns:repeat(2,1fr); }
  .bd-grid--hero,.bd-grid--hero4{ grid-template-columns:repeat(2,1fr); }
  .bd-measures{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:900px){
  .bd-topbar{ height:auto; padding:var(--bd-sp-3) var(--bd-sp-4); flex-wrap:wrap; }
  .bd-topbar__left{ flex-direction:column; align-items:flex-start; gap:var(--bd-sp-3); width:100%; }
  .bd-page{ padding:var(--bd-sp-5) var(--bd-sp-4) var(--bd-sp-7); }
  .bd-grid--2,.bd-grid--3,.bd-grid--4,.bd-grid--hero,.bd-grid--hero4,.bd-grid--split{ grid-template-columns:1fr; }
  .bd-pagehead__title{ font-size:30px; }
  .bd-measures{ grid-template-columns:repeat(2,1fr); }
  .bd-table__wrap{ overflow-x:auto; }
}

/* --- 16. Correzioni al pacchetto ----------------------------
   Due difetti del foglio originale, corretti qui invece che a monte cosi'
   restano visibili se il pacchetto verra' reimportato.
   ------------------------------------------------------------ */

/* Le colonne impilate del sonno non hanno larghezza: dentro un flex in riga
   una colonna senza flex-grow misura quanto il suo contenuto, e il contenuto
   sono span vuoti. Nel pacchetto il grafico del sonno risulta infatti vuoto. */
.bd-chart__bars > .bd-stack{ flex:1; min-width:0; }

/* I chip del pacchetto sono <button>. Qui sono collegamenti, perche' cambiare
   metrica e' una navigazione: servono le stesse proporzioni di un pulsante. */
a.bd-chip{ text-decoration:none; }
a.bd-chip[aria-pressed="true"]{ color:#fff; }

/* I gruppi segmentati sono form: il <form> non deve introdurre spaziature. */
form.bd-segmented{ margin:0; }

/* Nota scritta a mano su un esercizio: chiusa e' una riga di testo, aperta
   diventa il campo per modificarla. Il pieghevole e' nativo, senza script, e
   tiene il suo triangolino: e' l'unico segno che la riga si puo' aprire. */
.bd-nota{ margin-top:5px; }
.bd-nota > summary{ cursor:pointer; font-size:12.5px;
  color:var(--bd-testo-tenue); font-style:italic; }
.bd-nota > summary:hover{ color:var(--bd-blu); }
.bd-nota[open] > summary{ font-style:normal; font-weight:500; color:var(--bd-testo-medio); }

/* Grafico cliccabile: ogni punto ha una striscia verticale trasparente che
   porta ai suoi valori. Al passaggio del mouse compare la riga guida sul punto,
   quello scelto resta segnato da cursore e pallino. Tutto senza script: la
   striscia e' un collegamento e il pannello dei valori lo disegna il server. */
.bd-chart__hit{ position:absolute; top:0; bottom:0; z-index:2; cursor:pointer; }
.bd-chart__hit::after{ content:""; position:absolute; top:0; bottom:0; left:var(--bd-hit-x, 50%);
  width:1.5px; margin-left:-.75px; background:var(--bd-blu); opacity:0; }
.bd-chart__hit:hover::after,.bd-chart__hit:focus-visible::after{ opacity:.35; }
.bd-chart__hit:focus-visible{ outline:none; }
.bd-chart__cursor{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; z-index:1;
  background:var(--bd-giallo); pointer-events:none; }
.bd-chart__dot{ position:absolute; z-index:1; width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%); border:3px solid #fff; box-shadow:0 1px 4px rgba(22,35,58,.3);
  pointer-events:none; }

/* Pannello dei valori del punto scelto, sotto il grafico. */
.bd-punto{ border-top:1.5px solid var(--bd-riga); padding-top:var(--bd-sp-4);
  display:flex; flex-direction:column; gap:var(--bd-sp-3); }
.bd-punto__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--bd-sp-3); flex-wrap:wrap; }
.bd-punto__title{ margin:0; font-family:var(--bd-font-display); font-weight:800; font-size:15px; color:var(--bd-testo); }
.bd-punto .bd-measures{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.bd-punto .bd-btn{ padding:8px 12px; font-size:12.5px; }
.bd-punto .bd-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* Colonne cliccabili dei grafici a barre: tutta l'altezza della colonna porta
   ai valori, e la colonna scelta resta tinta del giallo del cursore. Le linee
   SVG disegnate sopra le colonne non devono rubare il clic. */
.bd-chart__svg{ pointer-events:none; }
a.bd-chart__col{ text-decoration:none; color:inherit; cursor:pointer; border-radius:10px 10px 0 0; }
a.bd-chart__col:hover{ background:rgba(44,109,206,.07); }
.bd-chart__col.is-selected{ background:rgba(249,217,73,.30); border-radius:10px 10px 0 0; }
a.bd-chart__col:hover.is-selected{ background:rgba(249,217,73,.40); }
a.bd-chart__col:focus-visible{ outline:2px solid var(--bd-blu); outline-offset:-2px; }
.bd-punto .bd-table__wrap{ margin-top:var(--bd-sp-1); }