/* ══════════════════════════════════════════════════════════════════════════
   NUZO · Design System
   Fonte unica di verità per report e dashboard SEO.
   Consolidato dai 7 template della pre-analisi, normalizzando le divergenze
   (scorecard.html usava --s1/--s2/--s3 al posto di --surface1/2/3).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* superfici */
  --bg:        #F5F5F5;
  --surface1:  #FFFFFF;
  --surface2:  #F0F0F0;
  --surface3:  #E4E4E4;
  --border:    rgba(0,0,0,.09);
  --border-hi: rgba(0,0,0,.15);

  /* testo */
  --text:      #111111;
  --muted:     #666666;

  /* palette semantica */
  --gold:      #059669;
  --accent:    #059669;
  --cyan:      #0891B2;
  --green:     #16A34A;
  --red:       #DC2626;
  --orange:    #EA580C;
  --purple:    #7C3AED;
  --yellow:    #CA8A04;

  /* alias di compatibilità con scorecard.html */
  --s1: var(--surface1);
  --s2: var(--surface2);
  --s3: var(--surface3);
  --c1: var(--orange);
  --c2: var(--cyan);
  --c3: var(--purple);
  --c4: var(--yellow);
  --c5: var(--gold);

  /* scala tipografica e spaziature */
  --radius-sm: 10px;
  --radius:    12px;
  --radius-lg: 16px;
  --shadow:    0 1px 4px rgba(0,0,0,.05);
  --font:      'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attributo hidden vale display:none solo nel foglio di stile del browser,
   che ha specificità zero: qualunque nostra regola con un display esplicito lo
   annulla. È già successo con .section-sep (display:flex), che restava visibile
   con hidden impostato mostrando il titolo di una sezione senza contenuto.
   Da qui in poi hidden nasconde davvero, qualunque display abbia l'elemento. */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ────────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px; height: 76px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.nav-left { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.nav-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-site { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: .02em; }

/* ── MARCHI ─────────────────────────────────────────────────────────────── */
/* Altezze in px e non in em: un marchio deve avere la stessa dimensione
   qualunque cosa succeda alla scala tipografica intorno. La larghezza la
   decide il rapporto dell'immagine, e width/height nell'HTML riservano lo
   spazio prima che l'immagine arrivi, così l'header non sobbalza. */
.brand-logo { height: 28px; width: auto; display: block; }
.brand-badge { height: 56px; width: auto; display: block; }
.nav-left .nav-site {
  padding-left: 14px; border-left: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.footer-left { display: flex; flex-direction: column; gap: 10px; }
.footer-marks { display: flex; align-items: center; gap: 18px; }
.footer-logo { height: 26px; width: auto; display: block; }
.footer-badge { height: 56px; width: auto; display: block; }
/* Il badge Google è largo quasi tre volte la sua altezza, quello Semrush una
   volta e mezza. Dargli la stessa altezza lo farebbe pesare il doppio nella
   riga: si accompagnano per ingombro percepito, non per altezza nominale. */
.footer-badge-wide { height: 42px; width: auto; display: block; }

.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a {
  display: block; padding: 6px 14px; border-radius: 6px;
  text-decoration: none; color: var(--muted);
  font-size: 13px; font-weight: 500; transition: all .2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--surface2); }
.nav-links a.active { color: var(--gold); background: rgba(5,150,105,.1); }
.nav-date { font-size: 12px; color: var(--muted); font-weight: 300; letter-spacing: .03em; }

/* selettore progetto (multi-cliente) */
.nav-select {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--text); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
main { max-width: 1280px; margin: 0 auto; padding: 48px 32px 80px; }

/* Il report regge una misura più larga della dashboard: ha grafici affiancati e
   tabelle a cinque colonne, mentre la dashboard è un elenco di card. Vincolato
   sull'id e non su main, così la dashboard resta a 1280. */
#reportBody, #analisiBody { max-width: 1400px; }

.hero { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 24px; }
.hero-label {
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.hero-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.1; margin-bottom: 12px; }
.hero-title span { color: var(--gold); }
.hero-sub { color: var(--muted); font-size: 14px; font-weight: 300; max-width: 560px; }
.hero-period {
  flex-shrink: 0; text-align: right;
  border-left: 3px solid var(--gold); padding-left: 16px;
}
.hero-period-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hero-period-value { font-size: 22px; font-weight: 800; line-height: 1.2; }
.hero-period-vs { font-size: 12px; color: var(--muted); }

/* ── KPI ────────────────────────────────────────────────────────────────── */
.kpi-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 32px;
}
.kpi-card {
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
  transition: border-color .2s;
}
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--muted); }
.kpi-card.gold::before   { background: var(--gold); }
.kpi-card.cyan::before   { background: var(--cyan); }
.kpi-card.green::before  { background: var(--green); }
.kpi-card.orange::before { background: var(--orange); }
.kpi-card.purple::before { background: var(--purple); }
.kpi-card.red::before    { background: var(--red); }
.kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.kpi-value { font-size: 30px; font-weight: 800; line-height: 1; }
.kpi-value sup { font-size: 14px; font-weight: 600; color: var(--muted); }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; margin-top: 6px;
  padding: 2px 8px; border-radius: 20px;
}
.kpi-delta.pos  { background: rgba(22,163,74,.1);  color: var(--green); }
.kpi-delta.neg  { background: rgba(220,38,38,.1);  color: var(--red); }
.kpi-delta.flat { background: rgba(0,0,0,.05);     color: var(--muted); }

/* ── GRIGLIE ────────────────────────────────────────────────────────────── */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px; }
.col-span-2 { grid-column: span 2; }

/* ── CARD ───────────────────────────────────────────────────────────────── */
.section-card {
  min-width: 0;   /* vedi la nota su .table-scroll */
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow); transition: border-color .2s;
}
.section-card:hover { border-color: var(--border-hi); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 8px;
}
.card-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.card-title { font-size: 17px; font-weight: 700; }
.card-chip {
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
}
.chart-wrap { position: relative; height: 220px; }
.chart-wrap.tall { height: 300px; }
.chart-wrap.short { height: 170px; }
/* La bolla dei competitor ha la legenda a destra con dieci nomi di dominio:
   sotto questa altezza le voci si tagliano e il grafico si riduce a una
   striscia. */
.chart-wrap.bubble { height: 380px; }
/* Su schermo stretto la legenda passa sotto il grafico e si porta via tre
   righe: senza altezza in più il riquadro dei punti si riduce a una striscia. */
@media (max-width: 900px) { .chart-wrap.bubble { height: 460px; } }

/* ── SEPARATORI ─────────────────────────────────────────────────────────── */
.section-sep { margin: 44px 0 24px; display: flex; align-items: center; gap: 16px; scroll-margin-top: 90px; }
.sep-label {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.sep-line { flex: 1; height: 1px; background: var(--border); }

/* ── INSIGHT ────────────────────────────────────────────────────────────── */
.insight-box {
  background: rgba(5,150,105,.05); border: 1px solid rgba(5,150,105,.2);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 16px;
  font-size: 13px; color: #065f46; line-height: 1.6;
}
.insight-box strong { color: var(--gold); }
.insight-box.warn { background: rgba(234,88,12,.05); border-color: rgba(234,88,12,.25); color: #7c2d12; }
.insight-box.warn strong { color: var(--orange); }
.insight-box.bad  { background: rgba(220,38,38,.05); border-color: rgba(220,38,38,.25); color: #7f1d1d; }
.insight-box.bad strong { color: var(--red); }
/* Due avvisi di fila si toccherebbero: succede sul report quando il trimestre
   corrente e quello di confronto sono bucati tutti e due. */
.insight-box + .insight-box { margin-top: 12px; }

/* ── PILLOLE METRICHE ───────────────────────────────────────────────────── */
.metric-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.metric-pill {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px; min-width: 120px;
}
.pill-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.pill-val { font-size: 16px; font-weight: 700; }
.pill-val.ok { color: var(--green); }
.pill-val.warn { color: var(--orange); }
.pill-val.bad { color: var(--red); }
.pill-delta { font-size: 11px; font-weight: 600; }
.pill-delta.pos { color: var(--green); }
.pill-delta.neg { color: var(--red); }
.pill-delta.flat { color: var(--muted); }

/* ── GAUGE / SCORE ──────────────────────────────────────────────────────── */
.tech-grid { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
/* Il contenitore deve essere QUADRATO e la dimensione del canvas la decide
   Chart.js. Prima era il contrario: il contenitore restava largo quanto la card
   e alto 200px, Chart.js disegnava in 681x400, e il CSS forzava la resa a
   180x180 — il buffer di disegno veniva schiacciato di 1,7 volte in orizzontale.
   Un canvas non si ridimensiona con il CSS senza deformare quello che contiene. */
.gauge-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: min(180px, 100%); aspect-ratio: 1; margin: 0 auto;
}
.gauge-canvas { max-width: 100%; max-height: 100%; }
.gauge-label { position: absolute; text-align: center; }
.gauge-num { font-size: 38px; font-weight: 800; line-height: 1; }
.gauge-sub { font-size: 11px; color: var(--muted); letter-spacing: .05em; }

.score-row { display: flex; align-items: center; gap: 14px; }
.tech-scores { display: flex; flex-direction: column; gap: 14px; }
.score-name { width: 150px; flex-shrink: 0; font-size: 13px; color: var(--muted); }
.score-bar-track { flex: 1; height: 6px; background: var(--surface3); border-radius: 10px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 10px; transition: width 1s cubic-bezier(.25,.46,.45,.94); }
.score-num { width: 52px; text-align: right; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.score-tag {
  width: 66px; text-align: center; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; letter-spacing: .05em;
  text-transform: uppercase; flex-shrink: 0;
}
.tag-good { background: rgba(22,163,74,.12); color: var(--green); }
.tag-med  { background: rgba(234,88,12,.12); color: var(--orange); }
.tag-bad  { background: rgba(220,38,38,.12); color: var(--red); }

/* ── ELENCHI TECNICI ────────────────────────────────────────────────────── */
.tech-items { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tech-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.tech-icon { font-size: 16px; width: 28px; text-align: center; flex-shrink: 0; }
.tech-text { flex: 1; }
.tech-name { font-size: 13px; font-weight: 500; }
.tech-desc { font-size: 11px; color: var(--muted); }

.authority-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.auth-item {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; text-align: center;
}
.auth-val { font-size: 26px; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
.auth-label { font-size: 12px; color: var(--muted); }

/* ── TABELLE ────────────────────────────────────────────────────────────── */
/* min-width:0 è la parte che manca quasi sempre: un elemento di griglia o di
   flex ha min-width:auto, cioè non scende sotto la larghezza del proprio
   contenuto. Con una tabella a min-width:560px dentro la card, era la card a
   crescere — e con lei tutta la pagina, che su un telefono da 390px risultava
   larga 632. L'overflow-x qui sotto non entrava mai in funzione perché non
   c'era niente da far traboccare. */
.table-scroll { overflow-x: auto; margin-top: 16px; min-width: 0; }
.kw-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.kw-table th {
  text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.kw-table th.num, .kw-table td.num { text-align: right; }
.kw-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.kw-table tr:last-child td { border-bottom: none; }
.kw-table tbody tr:hover td { background: var(--surface2); }
.kw-table td.url { font-size: 12px; color: var(--muted); word-break: break-all; }
.kw-table td.mono { font-variant-numeric: tabular-nums; }

/* ── benchmark competitivo ─────────────────────────────────────────────── */
/* Stessa impalcatura della tabella keyword, con una colonna in più che porta
   una barra: il traffico dei competitor va da qualche migliaio a qualche
   centinaio di migliaia, e una colonna di soli numeri non fa vedere il
   rapporto — che è l'unica cosa che si guarda davvero in quella colonna. */
.comp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.comp-table th {
  text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.comp-table th.num, .comp-table td.num { text-align: right; }
.comp-table th.barra { min-width: 190px; }
.comp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table tbody tr:hover td { background: var(--surface2); }
.comp-table td.mono { font-variant-numeric: tabular-nums; }
.comp-table td.dominio { font-weight: 600; }
.comp-table td.dominio.self { color: var(--gold); }
.comp-table tr.self-row td { background: rgba(5,150,105,.05); }
.comp-table tr.self-row:hover td { background: rgba(5,150,105,.09); }

.cr-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.cr-high { background: rgba(124,58,237,.12); color: var(--purple); }
.cr-med  { background: rgba(8,145,178,.12); color: var(--cyan); }
.cr-low  { background: var(--surface3); color: var(--muted); }

.etv-row { display: flex; align-items: center; gap: 10px; }
.etv-track { flex: 1; height: 5px; background: var(--surface3); border-radius: 10px; overflow: hidden; min-width: 50px; }
.etv-fill { height: 100%; border-radius: 10px; background: var(--cyan); }
.etv-fill.self { background: var(--gold); }
.etv-val { font-size: 12px; font-weight: 700; white-space: nowrap; min-width: 58px;
           text-align: right; font-variant-numeric: tabular-nums; }
.etv-val.self { color: var(--gold); }

.comp-legenda { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 14px;
                padding-top: 14px; border-top: 1px solid var(--border); }
.comp-legenda strong { color: var(--text); font-weight: 600; }

.pos-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.pos-1  { background: rgba(22,163,74,.12); color: var(--green); }
.pos-10 { background: rgba(5,150,105,.12); color: var(--gold); }
.pos-30 { background: rgba(234,88,12,.12); color: var(--orange); }
.pos-100{ background: rgba(220,38,38,.10); color: var(--red); }
.pos-out{ background: var(--surface3); color: var(--muted); }

.delta-badge { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta-badge.pos  { color: var(--green); }
.delta-badge.neg  { color: var(--red); }
.delta-badge.flat { color: var(--muted); }

.row-me td { background: rgba(5,150,105,.06); font-weight: 600; }
.row-me:hover td { background: rgba(5,150,105,.10); }

/* ── NARRATIVA ──────────────────────────────────────────────────────────── */
.narrative-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.narrative-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px;
}
.narrative-list li::before { content: '▸'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.narrative-list.next li::before { content: '→'; color: var(--cyan); }
.narrative-summary { font-size: 15px; line-height: 1.75; }
.narrative-summary p + p { margin-top: 12px; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); margin-top: 60px; padding-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-brand { font-size: 13px; font-weight: 700; }
.footer-brand span { color: var(--gold); }
.footer-note { font-size: 12px; color: var(--muted); }
.footer-meta { text-align: right; }
.footer-disclaimer {
  font-size: 11px; color: var(--muted); margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border); line-height: 1.7; opacity: .75;
}

/* ── BARRA DI STATO ─────────────────────────────────────────────────────── */
.status-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 28px;
  box-shadow: var(--shadow);
}
.status-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; flex-shrink: 0;
}
.status-pill.draft  { background: rgba(234,88,12,.12); color: var(--orange); }
.status-pill.review { background: rgba(8,145,178,.12); color: var(--cyan); }
.status-pill.ok     { background: rgba(22,163,74,.12); color: var(--green); }
.status-who { font-size: 13px; color: var(--text); }
.status-hint { font-size: 12px; color: var(--muted); flex: 1; min-width: 200px; }

.btn {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 8px; cursor: pointer;
  background: var(--gold); color: #fff; border: 1px solid var(--gold);
  transition: opacity .15s;
}
.btn:hover:not(:disabled) { opacity: .88; }
.btn:disabled { background: var(--surface3); color: var(--muted); border-color: var(--border); cursor: not-allowed; }

/* Filigrana di bozza: deve essere impossibile inoltrare per sbaglio un report
   non validato senza accorgersene. */
body[data-stato="draft"] main::before,
body[data-stato="reviewed"] main::before {
  content: 'BOZZA — NON VALIDATA';
  position: fixed; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(38px, 8vw, 96px); font-weight: 800; letter-spacing: .08em;
  color: rgba(234,88,12,.07);
  transform: rotate(-24deg);
  pointer-events: none; white-space: nowrap;
}
body[data-stato="reviewed"] main::before { content: 'IN REVISIONE'; color: rgba(8,145,178,.07); }
main > * { position: relative; z-index: 1; }

/* ── NOTA DEL SEO SPECIALIST ────────────────────────────────────────────── */
.specialist-note {
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px; margin-top: 12px; font-size: 13px; line-height: 1.6;
}
.note-tag {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 5px;
}

/* ── STATI VUOTI ED ERRORI ──────────────────────────────────────────────── */
.empty { color: var(--muted); font-style: italic; font-size: 13px; }
#fatal {
  max-width: 640px; margin: 90px auto; padding: 32px;
  background: var(--surface1); border: 1px solid var(--border);
  border-left: 3px solid var(--red); border-radius: var(--radius);
}
#fatal h2 { font-size: 20px; margin-bottom: 10px; }
#fatal p { font-size: 13px; color: var(--muted); font-family: ui-monospace, monospace; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--text); color: #fff; font-size: 13px;
  padding: 12px 20px; border-radius: 8px; z-index: 999;
  box-shadow: 0 6px 24px rgba(0,0,0,.22); max-width: 90vw;
}

.auth-unit { font-size: 16px; color: var(--muted); }

/* ── DASHBOARD ──────────────────────────────────────────────────────────── */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.client-card {
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
}
.client-name { font-size: 19px; font-weight: 700; margin-bottom: 2px; }
.client-domain { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.period-links { display: flex; flex-wrap: wrap; gap: 8px; }
.period-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 7px 14px; border-radius: 8px;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  transition: border-color .15s, color .15s;
}
.period-link:hover { border-color: var(--gold); color: var(--gold); }
.period-link .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.draft { background: var(--orange); }
.dot.review { background: var(--cyan); }
.dot.ok { background: var(--green); }

.legend-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; font-size: 12px; color: var(--muted); }
.legend-row span { display: inline-flex; align-items: center; gap: 7px; }

/* ── AREA DI REDAZIONE ──────────────────────────────────────────────────── */
/* Le pagine di lettura e quella di scrittura condividono il foglio di stile
   per lo stesso motivo per cui condividono l'header: chi approva un report
   deve vedere lo stesso oggetto che vedrà il cliente, non un'altra interfaccia
   che ne descrive uno. */

.red-shell { max-width: 1100px; margin: 0 auto; }

/* accesso */
.login-box {
  max-width: 400px; margin: 60px auto; padding: 32px;
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.login-box h1 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.login-box .login-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; }

/* campi */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo > label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.campo .aiuto { font-size: 12px; color: var(--muted); font-weight: 300; }
/* `search` è nell'elenco insieme agli altri: senza, un campo di ricerca non
   prende né bordo né imbottitura e in una fila di tendine alte 40px ne resta
   uno alto 19, disallineato e più basso dell'etichetta che lo descrive. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  font-family: var(--font); font-size: 14px; color: var(--text);
  background: var(--surface1); border: 1px solid var(--border-hi);
  border-radius: 8px; padding: 10px 12px; width: 100%;
}
textarea { line-height: 1.6; resize: vertical; min-height: 76px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--surface2); color: var(--muted); cursor: not-allowed;
}

.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-hi); }
.btn.ghost:hover:not(:disabled) { background: var(--surface2); opacity: 1; }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.small { padding: 5px 12px; font-size: 12px; }
.btn.wide { width: 100%; }

/* elenchi di voci ripetibili — sintesi, attività, prossimi passi */
.voci { display: flex; flex-direction: column; gap: 10px; }
.voce { display: flex; gap: 8px; align-items: flex-start; }
.voce-corpo { flex: 1; min-width: 0; }
.voce textarea { flex: 1; width: 100%; min-height: 62px; }
/* stato, provenienza e motivo stanno sotto al testo della voce, non accanto:
   accanto rubano larghezza alla cosa che si sta scrivendo, e su una riga
   stretta il menù a tendina finirebbe a capo da solo comunque. */
.voce-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
/* `width: auto` esplicito: la regola generale sui campi mette 100% a tutti i
   select, e qui quel 100% mandava a capo la nota e trasformava due controlli
   in due righe. */
.voce-sel, .voce-pri, .voce-dip {
  flex: 0 0 auto; width: auto; min-width: 128px;
  padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
/* Priorità e dipendenza non sono lo stato: pesano meno, e finché non le si
   sceglie restano in grigio come l'etichetta che portano («— priorità»). */
.voce-pri, .voce-dip { font-weight: 500; }
.voce-pri.vuota, .voce-dip.vuota { color: var(--muted); }
.voce-pri[hidden], .voce-dip[hidden] { display: none; }

/* Il motivo è una riga da leggere, non un campo da riempire: lo propone chi ha
   guardato i numeri alla chiusura, e chi non è d'accordo riscrive la voce. */
/* Il motivo sta sotto al testo e non fra i controlli di stato: è il seguito
   della frase che si sta scrivendo, non un attributo della riga. Stessa regola
   della nota — vuoto è un invito in grigio, scritto diventa un campo — ma con
   la barretta a sinistra, che è come il motivo si legge ovunque nel prodotto. */
/* `.voce-corpo input.…`, non la sola classe: la regola generale sui campi usa
   `input[type="text"]`, che di specificità batte una classe da sola — è lo
   stesso motivo per cui la nota qui sotto è scritta `.voce-meta input.…`. */
.voce-corpo input.voce-motivo-campo {
  width: 100%; margin-top: 6px; padding: 6px 10px;
  border: 1px solid transparent; border-left: 2px solid var(--border-hi);
  border-radius: 0 8px 8px 0; background: transparent;
  font-size: 12.5px; line-height: 1.5; color: var(--muted); font-style: italic;
}
.voce-corpo input.voce-motivo-campo:not(:placeholder-shown),
.voce-corpo input.voce-motivo-campo:focus {
  background: var(--surface1); border-color: var(--border-hi);
  border-left-color: var(--gold); color: var(--text); font-style: normal;
}
.voce-origine {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 999px;
  background: var(--surface3); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
/* Finché è vuota la nota non deve sembrare un campo da riempire: su venti voci
   venti riquadri vuoti si leggono come venti cose mancanti. Vuota è un invito
   in grigio, scritta diventa un campo. */
.voce-meta input.voce-nota-campo {
  flex: 1 1 200px; min-width: 0; font-size: 13px; padding: 6px 10px;
  background: transparent; border-color: transparent;
}
.voce-meta input.voce-nota-campo:not(:placeholder-shown),
.voce-meta input.voce-nota-campo:focus {
  background: var(--surface1); border-color: var(--border-hi);
}
.voce-nota-campo[hidden] { display: none; }
/* Accanto all'etichetta, non in mezzo: `space-between` centrerebbe il terzo
   elemento fra i due estremi, e un conteggio sospeso a metà sembra un titolo. */
.voci-conteggio { font-size: 12px; color: var(--muted); margin-right: auto; }
.voce-togli {
  flex: 0 0 auto; width: 32px; height: 32px; margin-top: 4px;
  border-radius: 8px; border: 1px solid var(--border-hi); background: var(--surface1);
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.voce-togli:hover { color: var(--red); border-color: var(--red); }
.voci-vuoto { font-size: 13px; color: var(--muted); font-style: italic; }

/* elenco progetti */
.progetti { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.progetto {
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: left;
  font-family: var(--font); cursor: pointer; transition: border-color .15s;
}
.progetto:hover { border-color: var(--border-hi); }
.progetto.attivo { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(5,150,105,.10); }
.progetto.sola-lettura { opacity: .62; cursor: default; }
.progetto-nome { font-size: 15px; font-weight: 700; }
.progetto-owner { font-size: 12px; color: var(--muted); margin-top: 2px; }
.progetto-periodi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.periodo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 20px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
}
.periodo-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.periodo-btn.attivo { background: var(--gold); border-color: var(--gold); color: #fff; }
.periodo-btn.attivo .dot { background: #fff !important; }
.periodo-btn:disabled { cursor: not-allowed; opacity: .55; }
.periodo-btn .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* barra di identità */
.chi-sono {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 24px;
}
.chi-nome { font-size: 14px; font-weight: 700; }
.chi-ruolo {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  background: rgba(124,58,237,.12); color: var(--purple);
}
.chi-ruolo.specialist { background: rgba(8,145,178,.12); color: var(--cyan); }
.chi-spazio { flex: 1; }

/* schede */
.schede { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.scheda {
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 16px; cursor: pointer; margin-bottom: -1px;
}
.scheda:hover { color: var(--text); }
.scheda.attiva { color: var(--gold); border-bottom-color: var(--gold); }

/* azioni di stato */
.azioni {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border);
}
.azioni .chi-spazio { flex: 1; min-width: 20px; }
.azione-esito { font-size: 12px; color: var(--muted); }
.azione-esito.male { color: var(--red); }
.azione-esito.bene { color: var(--green); }
.btn.conferma { background: var(--orange); border-color: var(--orange); }

/* avviso di conflitto */
.conflitto {
  background: rgba(220,38,38,.05); border: 1px solid rgba(220,38,38,.25);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.6; color: #7f1d1d;
}

/* finestra per le password */
.modale {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; max-width: 420px; width: calc(100vw - 32px);
  background: var(--surface1); color: var(--text);
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
}
.modale::backdrop { background: rgba(0,0,0,.35); }
/* Il prompt di chiusura è lungo una pagina: in una finestra da 420px si
   leggerebbe una parola per riga. */
.modale.larga { max-width: 780px; }
.modale textarea { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.modale textarea[readonly] { background: var(--surface2); }
.modale h2 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.modale .aiuto { display: block; margin-bottom: 18px; }

/* tabella del team */
.team-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.team-table th {
  text-align: left; padding: 10px 12px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.team-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* I campi dentro alla tabella scendono alla misura della tabella: alti come
   una riga di testo, non come un campo di un modulo. */
.team-table input[type="text"], .team-table select { font-size: 13px; padding: 7px 9px; }
/* Sette colonne, tre delle quali si scrivono: sotto questa misura i campi
   diventano finestrelle da quattro caratteri. Sta dentro .table-scroll, che
   su schermo stretto la fa scorrere invece di comprimerla. */
#tabellaOwner { min-width: 920px; }
/* Il menu dell'owner mostrava «Roberto R…»: un elenco di nomi propri troncati
   a metà è un elenco in cui due colleghi possono sembrare la stessa persona. */
#tabellaOwner select { min-width: 168px; }
.team-table tr:last-child td { border-bottom: none; }
.team-azioni { display: flex; gap: 6px; flex-wrap: wrap; }
.sospeso { color: var(--muted); }
.sospeso .team-nome { text-decoration: line-through; }

/* ── MODALITÀ DI MODIFICA (dentro al report) ────────────────────────────── */
/* I campi si aprono dove il commento andrà a finire, sotto il grafico che lo
   giustifica. Il blocco di modifica si affianca a quello di lettura e lo
   copre: uscendo si toglie, e sotto c'è ancora quello che il renderer aveva
   disegnato — niente da ricostruire, niente da poter ricostruire male. */

.editor-blocco {
  border: 1px dashed var(--cyan);
  border-radius: var(--radius-sm);
  background: rgba(8,145,178,.04);
  padding: 14px 16px; margin-top: 12px;
}
.editor-blocco.nota { margin-top: 12px; }
.editor-testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.editor-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan);
}
.editor-blocco > textarea { width: 100%; }

/* Barra fissa in basso: le azioni restano raggiungibili anche dopo aver
   scorso fino alla salute tecnica per scriverne la nota. */
.barra-modifica {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--surface1);
  border-top: 1px solid var(--border-hi);
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
}
.bm-testo { font-size: 12px; color: var(--muted); }
.bm-testo.male { color: var(--red); }
.bm-testo.bene { color: var(--green); }
body[data-modifica] main { padding-bottom: 110px; }

/* In modifica la filigrana BOZZA sparisce: sotto ai campi renderebbe il testo
   più faticoso da leggere proprio mentre lo si scrive, e chi sta scrivendo sa
   già di essere in una bozza. */
body[data-modifica] main::before { content: none; }

/* ── DASHBOARD: proprietà e stato ───────────────────────────────────────── */
.client-owner { font-size: 12px; color: var(--muted); margin: -12px 0 14px; }
.client-azioni { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.client-card.archiviato { opacity: .6; }
.client-card.archiviato .client-name { text-decoration: line-through; }
.legend-row .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

/* I marchi nell'header costano larghezza, e sotto una certa soglia la barra non
   ci sta più: prima spariscono i link alle sezioni, che sono una comodità e non
   l'unico modo di raggiungerle (le sezioni restano scorrendo), poi il nome del
   report. Marchi e selettori non spariscono mai: senza quelli non si sa né di
   chi è il documento né quale trimestre si sta guardando. */
/* Il bottone hamburger esiste solo dove il menu disteso non ci sta. Sopra i
   1520px non compare affatto: due modi di fare la stessa cosa nello stesso
   momento sono un modo di troppo. */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; flex: 0 0 auto;
}
.nav-burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--text); transition: transform .2s, opacity .2s;
}
.nav-burger:hover { border-color: var(--border-hi); }
/* Aperto, le tre barre diventano una croce: dice che quel bottone adesso
   chiude, invece di lasciare il dubbio che riapra qualcosa di gia' aperto. */
nav[data-menu="aperto"] .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav[data-menu="aperto"] .nav-burger span:nth-child(2) { opacity: 0; }
nav[data-menu="aperto"] .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1520px) {
  .nav-burger { display: flex; }
  /* Fuori dal flusso: la barra resta alta uguale, e il pannello scende sopra
     al contenuto invece di spingerlo giu'. */
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px;
    background: var(--surface1);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    padding: 8px;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  nav[data-menu="aperto"] .nav-links { display: flex; }
  /* 44px di altezza tocabile: un link da 30px si sbaglia col pollice. */
  .nav-links a { padding: 12px 14px; font-size: 14px; border-radius: 8px; min-height: 44px; }
}

@media (max-width: 900px) {
  .nav-left .nav-site { display: none; }
  .brand-badge { height: 46px; }
  .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: auto; }
  .tech-grid { grid-template-columns: 1fr; }
  .authority-grid { grid-template-columns: 1fr; }
  nav { padding: 0 16px; }
  main { padding: 32px 16px 60px; }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-period { text-align: left; }
}

/* ── TELEFONO ───────────────────────────────────────────────────────────── */
/* Su uno schermo da 390px il costo principale è lo scorrimento: ogni blocco di
   aria in più allontana il contenuto vero. Qui si stringe la spaziatura, non si
   nasconde informazione. Le uniche cose che crescono sono le aree toccabili:
   un link alto 37px si sbaglia col pollice, 44px no. */
@media (max-width: 640px) {
  nav { min-height: 64px; height: 64px; padding: 0 14px; }
  .nav-links { max-height: calc(100vh - 64px); }
  .brand-logo { height: 22px; }
  .brand-badge { height: 40px; }
  .nav-left { gap: 10px; }
  .nav-date { font-size: 11px; }

  main { padding: 24px 14px 48px; }

  .hero { margin-bottom: 24px; gap: 10px; }
  .hero-sub { font-size: 13px; }
  .hero-period { border-left: none; border-top: 3px solid var(--gold); padding: 10px 0 0; }
  /* I titoli di sezione sono lunghi ("03 · Dati proprietari · Search Console
     e GA4") e in nowrap allargavano la pagina di 16px. Su telefono vanno a capo. */
  .section-sep { margin: 30px 0 16px; align-items: flex-start; }
  .sep-label { white-space: normal; }

  .client-card { padding: 18px; }
  .client-name { font-size: 17px; }
  .client-domain { margin-bottom: 14px; }
  .period-links { gap: 10px; }
  .period-link { flex: 1 1 44%; justify-content: center; min-height: 44px; }

  .legend-row { flex-direction: column; gap: 10px; margin-top: 20px; }

  /* I marchi vanno a capo invece di stringersi: tre loghi schiacciati su una
     riga da 360px non si leggono e non fanno una bella figura. */
  footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-meta { text-align: left; }
  .footer-marks { flex-wrap: wrap; gap: 14px 18px; }
  .footer-logo { height: 22px; }
  .footer-badge { height: 46px; }
  .footer-badge-wide { height: 34px; }

  /* Le tessere KPI a due colonne diventano illeggibili con numeri a sei cifre. */
  .kpi-strip { grid-template-columns: 1fr; }
  .kpi-card { padding: 16px; }
  .kpi-value { font-size: 26px; }
}

/* ── STAMPA (il report finisce in PDF più spesso di quanto si creda) ────── */
@media print {
  nav { position: static; box-shadow: none; }
  body { background: #fff; }
  .section-card { break-inside: avoid; box-shadow: none; }
  .section-sep { break-after: avoid; }
  main { max-width: none; padding: 0; }
  .status-bar, .nav-links, .nav-burger, .nav-select, .toast,
  .chi-sono, .barra-modifica, .editor-blocco { display: none !important; }
  /* I marchi devono uscire anche in stampa: senza questo alcuni browser
     scartano le immagini nella conversione in PDF. */
  .brand-logo, .brand-badge, .footer-logo, .footer-badge, .footer-badge-wide {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* La filigrana resta anche in stampa: un PDF di bozza deve dichiararsi tale. */
  body[data-stato="draft"] main::before { position: fixed; color: rgba(234,88,12,.12); }
}

/* ══ PRE ANALISI SEO ══════════════════════════════════════════════════════
   La pagina delle analisi riusa quasi tutto il resto del foglio: card,
   separatori, KPI, tabelle keyword e tabella competitor sono gli stessi del
   report. Qui sotto c'è solo quello che il report non ha — i punteggi, che
   sono giudizio e non misura, e quindi vanno mostrati in un modo che si
   distingua a colpo d'occhio dai numeri misurati.                          */

/* I blocchi di primo livello dell'analisi si distanziano da soli. Nel report
   quasi ogni card sta dentro una griglia, che il margine ce l'ha; qui invece
   ci sono sequenze di card sorelle — tabella keyword, gap, pagine — e senza
   questa riga si toccavano bordo contro bordo. Vincolato al figlio diretto:
   dentro le griglie il margine lo dà la griglia, e sommarli aprirebbe un
   buco in mezzo alle colonne. */
#analisiBody > .section-card { margin-bottom: 20px; }

/* ── due colori, due significati ───────────────────────────────────────────
   La QUALITÀ è un semaforo: rosso sotto 35, arancione fra 35 e 55, verde
   sopra. Sta sul numero, che è il punteggio.
   L'AREA è un'identità: un colore per ciascuna delle cinque, sulla striscia
   della card e sul riempimento della barra. Non si sovrappongono mai sullo
   stesso segno — un colore che vuol dire due cose è un colore che non vuol
   dire niente, e lo sbaglia chiunque, noi compresi fra tre mesi.
   La lunghezza della barra resta il punteggio: colore e lunghezza dicono due
   cose diverse invece della stessa due volte. */
.tono-ok    { color: var(--green); }
.tono-medio { color: var(--orange); }
.tono-basso { color: var(--red); }

/* Cinque tinte scelte fuori dalle bande del semaforo — niente rosso, niente
   arancione, niente verde — così un colore d'area non si legge mai come un
   giudizio. */
.area-onsite           { --area: #CA8A04; }
.area-traffico         { --area: #0891B2; }
.area-shareOfVoice     { --area: #2563EB; }
.area-offsite          { --area: #7C3AED; }
.area-keywordContenuti { --area: #DB2777; }

.barra-punteggio {
  height: 6px; background: var(--surface3); border-radius: 10px;
  overflow: hidden; margin: 8px 0 10px;
}
.barra-punteggio-fill { height: 100%; border-radius: 10px; background: currentColor; }
.area-card .barra-punteggio-fill { background: var(--area, currentColor); }

/* ── E-E-A-T ── */
.eeat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 18px;
}
.eeat-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px;
}
.eeat-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.eeat-nome { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.eeat-punteggio { font-size: 22px; font-weight: 800; line-height: 1; }
.eeat-desc { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ── scorecard ── */
.score-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.score-globale { text-align: center; min-width: 190px; }
.score-cerchio {
  width: 148px; height: 148px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  border: 8px solid currentColor; background: var(--surface2);
}
.score-numero { font-size: 46px; font-weight: 800; line-height: 1; color: var(--text); }
.score-su { font-size: 15px; font-weight: 600; color: var(--muted); align-self: flex-end;
            margin-bottom: 42px; }
.score-etichetta {
  margin-top: 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.score-nota { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* Le cinque aree sono un elenco, non una griglia di colonne: le motivazioni
   arrivano a novecento caratteri, e in colonne strette diventano strisce da
   venticinque righe di altezze tutte diverse. Ogni card si divide in due —
   a sinistra chi è e quanto vale, a destra perché. */
.aree-list { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.area-card {
  display: grid; grid-template-columns: 268px 1fr; gap: 26px;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 4px solid var(--area, var(--muted));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 20px 22px;
}
.area-lato { min-width: 0; }
.area-corpo { min-width: 0; }
.area-nome { font-size: 15px; font-weight: 700; }
.area-peso { font-size: 11px; color: var(--muted); margin-top: 2px; }
.area-punteggio { font-size: 34px; font-weight: 800; line-height: 1; margin-top: 12px; }
.area-su { font-size: 14px; font-weight: 600; color: var(--muted); }
.area-giudizio {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-top: -2px; margin-bottom: 12px;
}
.area-motivazione { font-size: 13px; line-height: 1.7; margin: 0 0 14px; }

.dati-chiave { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dato-chiave {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  background: var(--surface1); border: 1px solid var(--border); color: var(--muted);
}
.azioni-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.azioni-list li { font-size: 13px; line-height: 1.6; }
.priorita {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 5px; margin-right: 8px;
  vertical-align: 1px;
}
.priorita.alta  { background: rgba(220,38,38,.12); color: var(--red); }
.priorita.media { background: rgba(234,88,12,.12); color: var(--orange); }
.priorita.bassa { background: rgba(107,114,128,.10); color: var(--muted); }

/* ── roadmap ── */
.roadmap { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.fase { display: flex; gap: 16px; align-items: flex-start; }
.fase-numero {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.fase-corpo { flex: 1; min-width: 0; }
.fase-quando {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.fase-titolo { font-size: 14px; font-weight: 700; margin: 2px 0 6px; }
.fase-corpo ul { margin: 0; padding-left: 18px; }
.fase-corpo li { font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ── dettagli delle tabelle keyword nell'analisi ── */
.intento {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 20px;
  background: var(--surface3); color: var(--muted);
}
.intento.brand          { background: rgba(5,150,105,.12);  color: var(--gold); }
.intento.transazionale  { background: rgba(124,58,237,.12); color: var(--purple); }
.intento.commerciale    { background: rgba(8,145,178,.12);  color: var(--cyan); }
.intento.informazionale { background: rgba(234,88,12,.12);  color: var(--orange); }

.kw-table.stretta { min-width: 0; }
.kw-table .sotto { font-size: 11px; color: var(--muted); margin-top: 2px; }
.delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.pos  { color: var(--green); }
.delta.neg  { color: var(--red); }
.delta.flat { color: var(--muted); }

.sotto-titolo {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 10px;
}

@media (max-width: 860px) {
  .area-card { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 700px) {
  .score-wrap { flex-direction: column; align-items: stretch; }
  .score-globale { min-width: 0; }
}

/* ══ HOME DELLA SUITE ═════════════════════════════════════════════════════ */
.strumenti { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.strumento {
  display: flex; align-items: flex-start; gap: 18px; text-decoration: none; color: inherit;
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow);
  transition: border-color .2s, transform .2s;
}
.strumento:hover { border-color: var(--gold); transform: translateY(-2px); }
.strumento-icona {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: var(--surface2); display: flex; align-items: center;
  justify-content: center; font-size: 24px;
}
.strumento-corpo { flex: 1; min-width: 0; }
.strumento-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.strumento-titolo { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.strumento-testo { font-size: 13px; color: var(--muted); line-height: 1.7; }
.strumento-conto {
  font-size: 12px; font-weight: 600; color: var(--text); margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.strumento-freccia { flex-shrink: 0; font-size: 20px; color: var(--muted); }
.strumento:hover .strumento-freccia { color: var(--gold); }

@media (max-width: 860px) { .strumenti { grid-template-columns: 1fr; } }

/* ══ ELENCO DELLE ANALISI ═════════════════════════════════════════════════ */
.analisi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.analisi-card {
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit; transition: border-color .2s;
}
.analisi-card:hover { border-color: var(--gold); }
.analisi-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.analisi-dominio { font-size: 16px; font-weight: 700; word-break: break-all; }
.analisi-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.analisi-score {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  border: 4px solid currentColor; display: flex; align-items: center;
  justify-content: center; font-size: 18px; font-weight: 800;
  background: var(--surface2);
}
.analisi-score span { color: var(--text); }
.analisi-piede {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 12px;
}

/* Il pallino di stato serve anche fuori dai link di periodo: nell'elenco delle
   analisi è dentro una riga di piede, non in un `.period-link`. */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.facolt {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-left: 6px;
}
/* Il contesto è il campo che decide la qualità dell'analisi: si vede che è
   diverso dagli altri. */
.campo-contesto {
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 18px; margin: 4px 0 8px;
}
.spunta {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 12px; color: var(--muted); cursor: pointer; font-weight: 400;
}
.spunta input { width: auto; margin: 0; }

/* ══ EDITOR DEI GIUDIZI ═══════════════════════════════════════════════════
   Punteggi, motivazioni, E-E-A-T, roadmap e proposta si correggono dentro la
   pagina, nello stesso posto in cui si leggono. I DATI no: quelli non hanno
   un editor da nessuna parte, ed è il motivo per cui un'analisi è una
   fotografia e non un documento vivo.                                      */
.ed-area {
  background: var(--surface1); border: 1px solid var(--border);
  border-left: 4px solid var(--area, var(--muted));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 18px; margin-bottom: 14px;
}
.ed-area-testa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.ed-punteggio { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.ed-punteggio input {
  width: 84px; font-size: 20px; font-weight: 800; text-align: right;
  padding: 6px 10px;
}
.ed-punteggio span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ed-etichetta {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 6px;
}
.ed-sotto { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ed-lista { display: flex; flex-direction: column; gap: 8px; }
.ed-riga { display: flex; align-items: flex-start; gap: 8px; }
.ed-riga select { width: auto; flex-shrink: 0; }
.ed-riga textarea, .ed-riga input { flex: 1; min-width: 0; }
.riga-togli {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.riga-togli:hover { border-color: var(--red); color: var(--red); }

.ed-eeat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ed-eeat-riga {
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.ed-eeat-testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}

.ed-fasi { display: flex; flex-direction: column; gap: 16px; }
.ed-fase {
  background: var(--surface1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.ed-campo { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
.ed-campo .ed-etichetta { margin: 0 0 6px; }

@media (max-width: 860px) {
  .ed-sotto, .ed-eeat { grid-template-columns: 1fr; }
  .ed-riga { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Cruscotto dell'Head of SEO
   ══════════════════════════════════════════════════════════════════════════ */

/* Stessa spaziatura fra le schede della pagina delle analisi: figli diretti,
   così le griglie che ne contengono altre non raddoppiano il margine. */
#cruscottoBody > .section-card { margin-bottom: 20px; }

.cru-table { min-width: 880px; }
.cru-table td { vertical-align: middle; }
.cru-table .sotto { font-size: 11px; color: var(--muted); margin-top: 2px; }

.cru-riga { cursor: pointer; }
.cru-freccia {
  display: inline-block; color: var(--muted); font-size: 11px;
  transition: transform .15s; transform-origin: 45% 50%;
}
.cru-riga.aperta .cru-freccia { transform: rotate(90deg); color: var(--gold); }

/* Il semaforo sta qui e solo qui: sul numero. I colori della barra dicono
   quale dimensione, non se va bene — due significati sullo stesso colore
   sarebbero due letture diverse della stessa tessera. */
.cru-score { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Un segmento per dimensione, largo quanto il suo peso, riempito dal basso
   quanto vale. Il segmento vuoto è la dimensione senza dati: si vede che
   manca, e non somiglia a uno zero. */
.cru-barra {
  display: flex; gap: 3px; align-items: flex-end;
  height: 34px; min-width: 170px;
}
.cru-seg {
  position: relative; height: 100%; border-radius: 3px;
  background: var(--surface3); overflow: hidden;
}
.cru-seg i { position: absolute; left: 0; right: 0; bottom: 0; display: block; }
.cru-seg.vuoto {
  background: repeating-linear-gradient(
    45deg, var(--surface2), var(--surface2) 3px, var(--surface3) 3px, var(--surface3) 6px);
}

.cru-legenda-righe { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.cru-legenda-voce { display: inline-flex; align-items: center; gap: 6px; }
.cru-legenda-voce i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.cru-legenda-voce b { color: var(--text); font-weight: 700; }

.cru-dettaglio td { background: var(--surface2); padding: 0; }
.cru-dettaglio-corpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cru-dim { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.cru-dim-punto { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.cru-dim-nome { width: 130px; flex-shrink: 0; font-weight: 600; }
.cru-dim-num {
  width: 34px; text-align: right; flex-shrink: 0; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cru-dim-nota { color: var(--muted); }
.cru-dim.mancante { color: var(--muted); font-style: italic; }
.cru-dettaglio-azioni { margin-top: 6px; }

.cru-aperti {
  display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 20px;
  background: rgba(234,88,12,.12); color: var(--orange); font-weight: 700;
  white-space: nowrap;
}

/* «2 trimestri» e' una misura, non due parole: spezzata in mezzo si legge
   come se la colonna contenesse due dati. La colonna si allarga, la riga no. */
.cru-table td.eta { white-space: nowrap; }

/* Le tendine dentro alla tabella delle attività. Più strette di quelle
   dell'editor — lì una voce ha tutta la larghezza della pagina, qui sono due
   colonne fra altre quattro — e senza cornice finché non ci si passa sopra:
   venti riquadri incolonnati trasformerebbero un elenco da leggere in un
   modulo da compilare. Al passaggio del mouse e col fuoco la cornice torna,
   perché una cosa che si può cambiare deve dirlo prima di essere cliccata. */
.cru-table select.voce-sel {
  min-width: 104px; padding: 4px 6px; font-size: 12.5px;
  border-color: transparent; background: transparent;
}
.cru-table select.voce-sel:hover,
.cru-table select.voce-sel:focus {
  border-color: var(--border-hi); background: var(--surface1);
}
.cru-table select.voce-sel:disabled { opacity: .5; cursor: progress; }
.cru-table select.att-pri.vuota, .cru-table select.att-pri[data-vuota] { color: var(--muted); }

.cru-porta { display: flex; gap: 2px; height: 8px; min-width: 130px; border-radius: 10px; overflow: hidden; }
.cru-porta-seg { display: block; height: 100%; }
.cru-porta-seg.verde   { background: var(--green); }
.cru-porta-seg.arancio { background: var(--orange); }
.cru-porta-seg.rosso   { background: var(--red); }
.cru-porta-seg.assente { background: var(--surface3); }

@media (max-width: 700px) {
  .cru-barra { min-width: 120px; }
}

/* Selettore del periodo dentro al blocco del titolo: allineato a destra come
   il numero che sta sopra, e largo quanto basta all'etichetta più lunga. */
.hero-period #selPeriodo { margin-top: 8px; width: 100%; min-width: 168px; }

.cru-table { min-width: 1010px; }

.cru-tendenza { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cru-tendenza.pos  { color: var(--green); }
.cru-tendenza.neg  { color: var(--red); }
.cru-tendenza.flat { color: var(--muted); }
.cru-tendenza-testo { font-size: 12px; font-weight: 700; }
.cru-spark { display: block; flex-shrink: 0; }
/* Le righine delle soglie non sono la linea: restano grigie qualunque sia il
   verso della tendenza, altrimenti sembrerebbero parte del dato. */
.cru-spark-guide { color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════
   Pannello di andamento
   ══════════════════════════════════════════════════════════════════════════ */

#andamentoBody > .section-card,
#andamentoBody > .kpi-strip { margin-bottom: 20px; }

/* Un riquadro di avviso figlio diretto della pagina non ha nessuno che gli
   metta lo spazio sotto: nelle altre pagine sta dentro a una scheda, che ce
   l'ha già. Senza questa riga la nota su Semrush tocca i grafici. */
#andamentoBody > .insight-box,
#avvisoFinestra .insight-box { margin-bottom: 20px; }

/* Stesso caso nel report: gli avvisi di copertura stanno in un contenitore che
   il renderer riempie, e sotto c'è un'etichetta con margine zero. Quando il
   contenitore è vuoto — il caso normale — non deve aprirsi nessuno spazio,
   quindi il margine sta sull'ultimo avviso e non sul contenitore. */
#googleCoverage .insight-box:last-child { margin-bottom: 24px; }

/* La barra del periodo sta in alto e non scorre via: è il comando che si usa
   di più, e cercarlo in mezzo ai grafici ogni volta stanca.

   `top` è l'altezza della nav, che è sticky anche lei: a zero la barra
   scivolerebbe SOTTO la nav e sparirebbe proprio scorrendo, cioè nell'unico
   momento in cui serve. Sotto gli 861px la barra torna statica e la nav si
   accorcia, quindi lì la misura non serve. */
.periodo-barra {
  position: sticky; top: 76px; z-index: 20; margin-bottom: 20px;
  /* Scorrendo, i grafici le passano dietro: senza uno sfondo pieno si
     leggerebbero le linee attraverso la barra. `.section-card` è già bianca,
     ma l'ombra la stacca dal contenuto che scorre. */
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.periodo-campi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.periodo-campi .campo { margin-bottom: 0; min-width: 150px; }
.periodo-campi input[type="date"] { font-size: 13px; padding: 8px 10px; }
.periodo-scorciatoie { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }
.periodo-stato { font-size: 12px; color: var(--muted); text-align: right; padding-bottom: 4px; }
.periodo-stato strong { color: var(--text); }
#sentinella { height: 1px; margin-bottom: -1px; }

.periodo-nota {
  font-size: 11px; color: var(--muted); line-height: 1.7;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
/* Incollata, la barra si stringe: la nota dice «dati fino al …», che scorrendo
   è già scritto nella barra in alto a destra, e teneva un sesto dello schermo
   per ripeterlo. */
.periodo-barra.incollata .periodo-nota { display: none; }
.periodo-barra.incollata { padding-top: 14px; padding-bottom: 14px; }
.periodo-barra { transition: padding .15s; }
.periodo-nota strong { color: var(--text); font-weight: 600; }

/* Il bottone che apre il pannello, sulle tessere progetto e nelle righe del
   cruscotto: stessa forma nei due posti, così si riconosce. */
.btn-andamento { white-space: nowrap; }

@media (max-width: 860px) {
  .periodo-barra { position: static; }
  .periodo-campi .campo { min-width: 0; flex: 1 1 140px; }
  .periodo-stato { text-align: left; width: 100%; }
}

/* Gli stati delle voci di checklist. Il colore dice di chi è la palla:
   verde fatta, arancione rimandata (nostra), ciano bloccata (di altri),
   grigio annullata (di nessuno, non è più un impegno). */
/* `nowrap`: una targhetta che finisce a fine riga si spezzava a metà —
   «PRIORITÀ» sopra e «ALTA» sotto, dentro la stessa pillola. Va a capo tutta
   intera o non va a capo; e «BLOCCATA · DEV DEL CLIENTE», che è più lunga di
   tutte, si comporta allo stesso modo. */
.voce-stato {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}
.voce-stato.fatta     { background: rgba(22,163,74,.12);  color: var(--green); }
.voce-stato.rimandata { background: rgba(234,88,12,.12);  color: var(--orange); }
.voce-stato.bloccata  { background: rgba(8,145,178,.12);  color: var(--cyan); }
.voce-stato.annullata { background: var(--surface3);      color: var(--muted); }
/* «Prevista» in un trimestre chiuso non è un esito: è la casella che nessuno
   ha riempito. Contorno vuoto invece di fondo pieno, così si legge come
   un'assenza e non come un quinto risultato. */
.voce-stato.prevista {
  background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-hi);
}
/* La priorità non è uno stato e non deve prenderne il colore: stessa forma,
   contorno neutro. L'unica che si accende è «alta», qui sopra. */
.voce-stato.neutra {
  background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-hi);
}
/* Quando le attività sono troppo poche per una percentuale restano i due
   numeri: stesso posto, peso minore, nessun colore — non è un giudizio. */
.cru-att-poche { font-weight: 600; color: var(--muted); }

/* Il campo di ricerca nella barra dei filtri: è l'unico che cresce, perché è
   l'unico in cui si scrive una frase invece di scegliere da un elenco. */
.campo-cerca { flex: 1 1 180px; min-width: 150px; }
/* Il browser dà ai campi di ricerca una scatola sua, e in fila con le tendine
   si vede: l'interlinea esplicita è quella che rende la scatola alta come un
   `select` con lo stesso font e la stessa imbottitura — 14px di testo + 20 di
   padding + 2 di bordo fanno 40 solo se la riga è 18. */
input[type="search"] { appearance: none; -webkit-appearance: none; line-height: 18px; }
/* Il motivo, sotto una riga dell'elenco: stessa distinzione che nel report fra
   «perché era da fare» e «perché non è stata fatta». */
.sotto.motivo { font-style: italic; }
/* La priorità alta non è uno stato, e non deve sembrarlo: contorno invece di
   fondo pieno, così su una riga con due targhette si capisce quale delle due
   risponde alla domanda «com'è andata». */
.voce-stato.alta {
  background: none; color: var(--red); box-shadow: inset 0 0 0 1px currentColor;
}
.voce-nota {
  display: block; font-size: 12px; color: var(--muted);
  line-height: 1.6; margin-top: 3px;
}
/* Il motivo — perché era da fare — si distingue dalla nota, che dice perché
   non è stata fatta: sono due frasi grigie di fila, e senza un segno che le
   separi si leggono come una sola. */
.voce-nota.motivo {
  padding-left: 9px; border-left: 2px solid var(--border-hi); font-style: italic;
}

/* Chip e bottone insieme nell'intestazione di una scheda: il conteggio dice
   quanto c'è, il bottone porta a vederlo tutto. Stanno sulla stessa riga
   perché rispondono alla stessa domanda a due passi di distanza. */
.card-azioni { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Il nome del progetto nelle tabelle del cruscotto porta al suo dettaglio: si
   sottolinea solo al passaggio, per non trasformare una colonna in un elenco
   di link blu. */
.cru-table td a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-hi); }
.cru-table td a:hover { color: var(--gold); border-bottom-color: currentColor; }