/* style.css
 *
 * Visual identity: petrol and amber. A neutral, almost white background, an
 * almost black ink, and one decisive colour, petrol (#0e6e6b), for actions
 * and selections, with amber (#c8741f) as the second column tone and the
 * search highlight. Contrast is chosen for reading numbers: ink on background
 * about 15.6:1, white on petrol 6.1:1. One typeface (Public Sans, designed for
 * public data sites) with tabular figures, flat sections separated by rules
 * instead of cards. Warnings are tinted, never red: they qualify a number,
 * they do not report a failure. The 0-10 score is the one exception, by
 * Mare's choice (23 Oct 2026): it is coloured like a traffic light, red to
 * yellow to green, because it grades a value rather than warning about it.
 * The yellow is a dark mustard so that every step keeps at least 3:1 on the
 * surface; the number and the ticks carry the score on their own.
 *
 * The dark theme follows the system until the header button picks one: the
 * dark values apply under prefers-color-scheme: dark unless data-tema is
 * "chiaro", and always when data-tema is "scuro".
 *
 * Columns of a comparison are told apart by SHAPE first (circle, diamond,
 * square, ...) and by tone second. A hollow shape means a value based on
 * fewer respondents than the threshold.
 */

:root {
  --bg: #f5f7f7;
  --superficie: #ffffff;
  --inchiostro: #10201f;
  --tenue: #4b5c5a;
  /* Accent as text: a darker petrol, legible on the light tints too. */
  --verde-testo: #0b5552;
  --accento: #0e6e6b;
  /* Text on the accent: white on the light theme's petrol, ink on the
     lighter dark-theme petrol, where white would not be legible. */
  --su-accento: #ffffff;
  --tinta: #e3f1ef;
  --alone: #bfe3df;
  --linea: #dbe4e3;
  --linea-forte: #bccdca;
  --tratto: #7f9593;
  --tratteggio: #8fa5a2;
  --bordo-avviso: #0e6e6b;
  --binario: #cfdbd9;
  --ambra: #c8741f;
  --ombra: rgba(16, 32, 31, 0.1);
  --errore: #7a3b1d;
  --errore-bg: #f6e9df;

  /* One tone per column position; the shape carries the main distinction. */
  --c1: #0e6e6b;
  --c2: #c8741f;
  --c3: #10201f;
  --c4: #4f8f8a;
  --c5: #a8662a;
  --c6: #4b5c5a;

  /* Traffic light of the 0-10 score: the colour of a score is mixed from these. */
  --voto-basso: #c62828;
  --voto-medio: #a87a00;
  --voto-alto: #2e7d32;

  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --bg: #0f1615; --superficie: #152020; --inchiostro: #e4eeec; --tenue: #9fb2af;
    --verde-testo: #8ad8d3; --accento: #4fc2bc; --su-accento: #071413; --tinta: #16302e;
    --alone: #1d4441; --linea: #22302f; --linea-forte: #344946; --tratto: #5f7774;
    --tratteggio: #557270; --bordo-avviso: #4fc2bc; --binario: #2e403e; --ambra: #eba25a;
    --ombra: rgba(0, 0, 0, 0.35); --errore: #f0b89a; --errore-bg: #3a2418;
    --c1: #4fc2bc; --c2: #eba25a; --c3: #e4eeec; --c4: #8fc9c3; --c5: #f0c08a; --c6: #9fb2af;
    --voto-basso: #f2665f; --voto-medio: #e8c547; --voto-alto: #66bb6a;
    color-scheme: dark;
  }
}

:root[data-tema="scuro"] {
  --bg: #0f1615; --superficie: #152020; --inchiostro: #e4eeec; --tenue: #9fb2af;
  --verde-testo: #8ad8d3; --accento: #4fc2bc; --su-accento: #071413; --tinta: #16302e;
  --alone: #1d4441; --linea: #22302f; --linea-forte: #344946; --tratto: #5f7774;
  --tratteggio: #557270; --bordo-avviso: #4fc2bc; --binario: #2e403e; --ambra: #eba25a;
  --ombra: rgba(0, 0, 0, 0.35); --errore: #f0b89a; --errore-bg: #3a2418;
  --c1: #4fc2bc; --c2: #eba25a; --c3: #e4eeec; --c4: #8fc9c3; --c5: #f0c08a; --c6: #9fb2af;
  --voto-basso: #f2665f; --voto-medio: #e8c547; --voto-alto: #66bb6a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--inchiostro);
  font: 400 15px/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
}

.contenitore {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

button, select, input, textarea { font: inherit; color: inherit; }

a { color: var(--verde-testo); }

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
  border-radius: 4px;
}

.nascosto { display: none !important; }

/* --- Header: a bar floating above the page --- */

/* The sticky band is transparent but fades the page out under the bar, so
   text scrolling past never shows above it. It takes no clicks of its own. */
.testata {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem 0.35rem;
  pointer-events: none;
  background: linear-gradient(var(--bg) 0 55%, transparent);
}

/* No backdrop-filter here: it would make the bar the containing block of
   the navigation, which on a phone is position: fixed to the screen. */
.testata-barra {
  pointer-events: auto;
  max-width: calc(1120px - 1rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.5rem 0.55rem 0.5rem 1.15rem;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  box-shadow: 0 1px 2px var(--ombra), 0 10px 30px var(--ombra);
}

.marchio { flex: 1; min-width: 0; }

.marchio h1 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.marchio p { margin: 0; font-size: 0.82rem; color: var(--tenue); }

.navigazione {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
}

.voce-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  background: none;
  color: var(--tenue);
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.voce-nav svg { width: 1.05rem; height: 1.05rem; flex: none; }
.voce-nav:hover { color: var(--inchiostro); }
.voce-nav[aria-current="page"] { background: var(--accento); color: var(--su-accento); }
.voce-nav .testo-corto { display: none; }

/* Base / Completa: a switch between two labels. */
.modo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  user-select: none;
}

.modo-etichetta { color: var(--tenue); cursor: pointer; }
.modo-etichetta[data-attiva="true"] { color: var(--inchiostro); }

.interruttore {
  position: relative;
  flex: none;
  width: 2.9rem;
  height: 1.65rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--binario);
  cursor: pointer;
  transition: background 0.2s;
}

.interruttore::after {
  content: '';
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.29rem;
  height: 1.29rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 32, 31, 0.35);
  transition: transform 0.2s;
}

.interruttore[aria-checked="true"] { background: var(--accento); }
.interruttore[aria-checked="true"]::after { transform: translateX(1.25rem); }

/* Light / dark: the sun or the moon of the theme in use. */
.btn-tema {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--inchiostro);
  cursor: pointer;
}

.btn-tema:hover { border-color: var(--tratto); }
.btn-tema svg { width: 1.1rem; height: 1.1rem; }
.btn-tema .luna { display: none; }
:root[data-tema-attivo="scuro"] .btn-tema .sole { display: none; }
:root[data-tema-attivo="scuro"] .btn-tema .luna { display: block; }

/* What each view shows (html data-modo, set by app.js). */
:root[data-modo="base"] .solo-completa,
:root[data-modo="completa"] .solo-base { display: none !important; }

/* --- Page structure --- */

main { padding-block: 2.75rem 2.5rem; }

.sezione {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linea);
  /* Clears the sticky header when a section is scrolled into view. */
  scroll-margin-top: 6.5rem;
}

h2 {
  margin: 0 0 0.25rem;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sotto {
  margin: 0 0 0.9rem;
  color: var(--tenue);
  font-size: 0.88rem;
  max-width: 70ch;
}

.nota {
  margin: 0.75rem 0 0;
  color: var(--tenue);
  font-size: 0.8rem;
  max-width: 80ch;
}

.nota-piccola { font-size: 0.78rem; }

/* --- Loading and error status --- */

.banda-stato {
  background: var(--tinta);
  color: var(--verde-testo);
  border-left: 4px solid var(--bordo-avviso);
  padding: 0.8rem 1rem;
  border-radius: 0 8px 8px 0;
  font-weight: 600;
  margin: 0 0 1rem;
}

.banda-errore {
  background: var(--errore-bg);
  color: var(--errore);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin: 0 0 1rem;
}

/* --- Buttons --- */

.btn-pri {
  border: 0;
  background: var(--accento);
  color: var(--su-accento);
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-pri:hover { filter: brightness(1.1); }
.btn-pri:disabled { opacity: 0.55; cursor: default; }

.btn-sec {
  border: 1px solid var(--linea);
  background: var(--superficie);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-sec:hover { background: var(--tinta); }

.btn-grande { font-size: 1rem; padding: 0.75rem 2.2rem; border-radius: 10px; }

.link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--verde-testo);
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A button that reads as a link inside a sentence. */
.link-pulsante {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--verde-testo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.togli {
  border: 0;
  background: none;
  color: var(--tenue);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
}

.togli:hover { color: var(--inchiostro); background: var(--tinta); }

select,
input[type="text"],
input[type="search"],
input[type="password"],
textarea {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 0.25rem 0.45rem;
}

/* --- Column markers: shape first, tone second --- */

.segno {
  display: inline-block;
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  vertical-align: -0.1em;
  overflow: visible;
}

.segno.f0 { color: var(--c1); }
.segno.f1 { color: var(--c2); }
.segno.f2 { color: var(--c3); }
.segno.f3 { color: var(--c4); }
.segno.f4 { color: var(--c5); }
.segno.f5 { color: var(--c6); }

/* --- Column selector --- */

.colonne-riga {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.4rem 2rem;
  align-items: start;
}

.colonne-schede { display: contents; }

/* One column: its marker, its number and the remove button, then the two
   drawn fields. The single grid track is minmax(0, 1fr): an auto track would
   size itself on a course name kept on one line (up to 187 characters) and
   widen the page on a phone. */
.colonna-scheda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  min-width: 0;
}

.colonna-testa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tenue);
}

.colonna-testa .togli { margin-left: auto; }

/* The "add" field is drawn like a field, with dashed open-cornered lines. */
.aggiungi {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5.6rem;
  margin-top: 1.55rem;
  border: 0;
  color: var(--verde-testo);
  font-weight: 600;
  cursor: pointer;
  background:
    repeating-linear-gradient(90deg, var(--tratteggio) 0 0.55rem, transparent 0.55rem 1rem) top center / calc(100% - 1.1rem) 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--tratteggio) 0 0.55rem, transparent 0.55rem 1rem) bottom center / calc(100% - 1.1rem) 1.5px no-repeat;
}

.aggiungi::before,
.aggiungi::after {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--tratteggio) 0 0.4rem, transparent 0.4rem 0.75rem);
}

.aggiungi::before { left: 0; }
.aggiungi::after { right: 0; }
.aggiungi:hover { color: var(--inchiostro); }

/* --- Drawn dropdowns (js/tendina.js) ---
   A field has open corners: lines above and below, and shorter side ticks
   that do not touch them. The panel below it holds an optional search field
   and the options. */

.campo {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0.5rem 1rem;
  background:
    linear-gradient(var(--tratto), var(--tratto)) top center / calc(100% - 1.1rem) 1.5px no-repeat,
    linear-gradient(var(--tratto), var(--tratto)) bottom center / calc(100% - 1.1rem) 1.5px no-repeat;
}

.campo::before,
.campo::after {
  content: '';
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 1.5px;
  background: var(--tratto);
}

.campo::before { left: 0; }
.campo::after { right: 0; }
.campo:focus-within,
.campo.aperta { --tratto: var(--accento); }

.campo-etichetta { display: block; font-size: 0.72rem; color: var(--tenue); }

.tendina-bottone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0.1rem 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.tendina-bottone:focus-visible { outline: none; }

.tendina-valore {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Course names are lower case in the source; only the display capitalizes. */
.tendina-valore::first-letter,
.tendina-testo::first-letter { text-transform: uppercase; }

.facoltativo .tendina-valore { font-weight: 500; }

.tendina-freccia {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--tenue);
  transition: transform 0.15s;
}

.campo.aperta .tendina-freccia { transform: rotate(180deg); color: var(--accento); }

/* The compact field sits inside a line of text and controls. */
.campo.compatto { display: inline-block; min-width: 11rem; padding-block: 0.35rem; }

.tendina {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 0.4rem);
  width: max(100%, min(27rem, calc(100vw - 2rem)));
  padding: 0.4rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: 0 2px 4px var(--ombra), 0 18px 44px var(--ombra);
  animation: tendina-entra 0.14s ease-out;
}

.tendina.a-destra { left: auto; right: 0; }

@keyframes tendina-entra { from { opacity: 0; transform: translateY(-4px); } }

.tendina-cerca {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--bg);
}

.tendina-cerca:focus-within { border-color: var(--accento); }
.tendina-lente { flex: none; width: 1rem; height: 1rem; color: var(--tenue); }

.tendina-cerca input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
}

.tendina-cerca input:focus-visible { outline: none; }

.tendina-lista {
  max-height: min(19rem, 50vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.tendina-lista:focus-visible { outline: none; }

.tendina-sezione {
  padding: 0.55rem 0.65rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tenue);
}

.tendina-lista li[role="option"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
  padding: 0.48rem 0.65rem;
  border-radius: 9px;
  font-size: 0.9rem;
  cursor: pointer;
}

.tendina-lista li small { grid-column: 1; font-size: 0.74rem; color: var(--tenue); }
.tendina-lista li.attiva { background: var(--tinta); }
.tendina-lista li[aria-selected="true"] { font-weight: 600; color: var(--verde-testo); }
.tendina-lista li[aria-disabled="true"] { color: var(--tenue); cursor: default; }

.tendina-lista mark {
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ambra);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.tendina-spunta {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 1rem;
  height: 1rem;
  color: var(--accento);
}

.tendina-vuota { margin: 0; padding: 0.7rem 0.65rem; color: var(--tenue); font-size: 0.88rem; }

.ai-esito {
  margin: 0.75rem 0 0;
  font-size: 0.86rem;
  color: var(--verde-testo);
}

/* --- Warnings about the comparison --- */

.avvisi {
  margin-top: 0.9rem;
  border: 1px solid var(--linea-forte);
  border-left: 4px solid var(--bordo-avviso);
  background: var(--tinta);
  border-radius: 8px;
}

.avvisi summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
  font-weight: 600;
  color: var(--verde-testo);
}

.avvisi summary::-webkit-details-marker { display: none; }
.avvisi summary::after { content: '▾'; margin-left: auto; transition: transform 0.15s; }
.avvisi[open] summary::after { transform: rotate(180deg); }

.avvisi ul { margin: 0; padding: 0 0.85rem 0.75rem 2rem; font-size: 0.88rem; }
.avvisi li { margin-bottom: 0.35rem; }

/* --- The ruler: the row shared by the summary and the course sheet ---
   Every row has the same three columns: the question, a line on a fixed
   scale with one marker per column, and the values. The value area is sized
   from the number of columns (--n-valori), so values line up across rows. */

.righe { --n-valori: 3; --larghezza-valore: 5.6rem; }

.paragone-riga {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(8rem, 1.4fr)
    calc(var(--n-valori) * var(--larghezza-valore) + (var(--n-valori) - 1) * 0.8rem);
  column-gap: 1.6rem;
  align-items: center;
  padding-block: 0.8rem;
  border-top: 1px solid var(--linea);
}

.paragone-riga:first-child,
.paragone-intestazione + .paragone-riga { border-top: 0; }

.paragone-intestazione {
  padding-block: 0 0.4rem;
  border-bottom: 1px solid var(--linea-forte);
  font-size: 0.76rem;
  color: var(--tenue);
}

.paragone-etichetta { display: flex; flex-direction: column; min-width: 0; }
.paragone-titolo { font-weight: 600; }

.paragone-domanda {
  margin-top: 0.1rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--tenue);
}

.paragone-traccia { min-width: 0; }

.traccia {
  position: relative;
  height: 2px;
  margin: 0.45rem 0.45rem 0;
  background: var(--binario);
}

.traccia .segno {
  position: absolute;
  top: 50%;
  margin: -0.425rem 0 0 -0.425rem;
}

.traccia-estremi {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: var(--tenue);
}

.paragone-valori {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
}

.paragone-valore {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: var(--larghezza-valore);
  white-space: nowrap;
}

.paragone-numero { font-weight: 600; }

.paragone-valore.paragone-nota .paragone-numero {
  font-weight: 400;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--tenue);
}

/* A note in place of a number ("Campione piccolo", "0 casi") may be wider
   than the box every value gets: it wraps inside the box instead of spilling
   over the column on its left. */
.paragone-valore.paragone-nota { white-space: normal; text-align: right; line-height: 1.2; }
.paragone-valore.paragone-nota .paragone-numero { min-width: 0; }

/* Small sample: the value is de-emphasized, not hidden. The asterisk is
   CSS-generated, so code that reads the page still sees only the number. */
.valore-campione-piccolo .paragone-numero { color: var(--tenue); font-weight: 500; }

.valore-campione-piccolo .paragone-numero::after,
td.cella-campione-piccolo::after,
dd.valore-campione-piccolo::after {
  content: '*';
  margin-left: 1px;
  color: var(--verde-testo);
  font-weight: 800;
}

.intestazione-valore {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: var(--larghezza-valore);
  min-width: 0;
}

.intestazione-valore span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Course names are lower case in the source; only the display capitalizes. */
.intestazione-valore span:last-child::first-letter,
.paragone-valore-nome::first-letter { text-transform: uppercase; }

/* Names above the numbers live in the header row; on a phone each number
   carries its own. */
.paragone-valore-nome { display: none; }

.sintesi-vuota { margin: 0; color: var(--tenue); }

/* --- Base view: the 0-10 scores ---
   One row per key question: the question, then one cell per column with
   the score, ten marks and the sentence it stands for, or the reason there
   is no score. */

.voti {
  --n-colonne: 2;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) repeat(var(--n-colonne), minmax(0, 1fr));
  column-gap: 1.6rem;
}

.voti-riga { display: contents; }

.voti-riga > * {
  min-width: 0;
  padding-block: 0.9rem;
  border-top: 1px solid var(--linea);
}

.voti-testa + .voti-riga > * { border-top: 0; }

.voti-testa > * {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0 0.45rem;
  border-top: 0;
  border-bottom: 1px solid var(--linea-forte);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tenue);
}

.voti-testa .nome-colonna { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Course names are lower case in the source; only the display capitalizes. */
.nome-colonna::first-letter { text-transform: uppercase; }

.voti-domanda strong { display: block; font-weight: 600; }

.voti-domanda small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--tenue);
}

.voto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.65rem;
}

.voto > :not(.voto-cifra):not(.tacche) { grid-column: 1 / -1; }

/* The column name repeats beside each score only on a phone. */
.voto-chi { display: none; }

.voto-cifra {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.voto-cifra small {
  margin-left: 0.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tenue);
}

.tacche { display: flex; align-items: center; gap: 3px; }
.tacche i { display: block; width: 6px; height: 15px; border-radius: 3px; background: var(--binario); }
.tacche i.piena { background: var(--accento); }

/* The score's colour, from --voto (0-10, set by app.js): red to yellow over
   0-5, yellow to green over 6-10. clamp() picks the half. Inside @supports,
   because a custom property holding an unknown function does not fall back:
   it would leave the ticks transparent. Older browsers keep the petrol above. */
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .voto.con-voto {
    --voto-giu: color-mix(in oklab, var(--voto-medio) calc(clamp(0, var(--voto) / 5, 1) * 100%), var(--voto-basso));
    --voto-su: color-mix(in oklab, var(--voto-alto) calc(clamp(0, (var(--voto) - 5) / 5, 1) * 100%), var(--voto-medio));
    --voto-colore: color-mix(in oklab, var(--voto-su) calc(clamp(0, var(--voto) - 5, 1) * 100%), var(--voto-giu));
  }
  .voto.con-voto .voto-cifra { color: var(--voto-colore); }
  .voto.con-voto .tacche i.piena { background: var(--voto-colore); }
}

.voto-frase,
.voto-variante {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--tenue);
}

.voto-variante { margin: 0 0 0.3rem; }

.voto-motivo { font-size: 0.86rem; color: var(--tenue); }
.voto-motivo strong { display: block; font-weight: 600; color: var(--inchiostro); }

.come-voto {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linea);
  font-size: 0.86rem;
}

.come-voto summary { cursor: pointer; font-weight: 600; color: var(--verde-testo); }
.come-voto ul { max-width: 80ch; margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--tenue); }
.come-voto li { margin-bottom: 0.3rem; }

/* --- Question filters --- */

.opzioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
}

.riquadro-definizione {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tenue);
}

.conta { margin-left: auto; color: var(--tenue); }

.nota-definizione {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--tenue);
  max-width: 80ch;
}

.accordion details { border-top: 1px solid var(--linea); }

.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.6rem 0;
  font-weight: 600;
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before { content: '▸'; color: var(--accento); transition: transform 0.15s; }
.accordion details[open] > summary::before { transform: rotate(90deg); }

.accordion summary .conteggio {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--tenue);
}

.lista-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0 0.8rem 1.15rem;
}

/* Each question is a real checkbox drawn as a pill: the checkbox keeps
   keyboard and screen-reader behaviour, the label carries the look. */
.voce-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea);
  background: var(--superficie);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
}

.voce-checkbox:hover { border-color: var(--tratteggio); }

.voce-checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.voce-checkbox:has(input:checked) {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
}

.voce-checkbox:has(input:focus-visible) {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

/* Questions other than the main ones stay folded until the group is
   expanded, unless they are selected: a selected question is never hidden. */
.accordion details:not(.tutte) .voce-checkbox.secondaria:not(:has(input:checked)) {
  display: none;
}

.mostra-tutte {
  border: 1px dashed var(--linea-forte);
  background: none;
  color: var(--tenue);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.84rem;
  cursor: pointer;
}

.mostra-tutte:hover { color: var(--inchiostro); border-color: var(--tratteggio); }

/* --- Compare button --- */

.azione {
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--linea);
}

.dal-vivo { margin: 0; color: var(--tenue); font-size: 0.86rem; }

/* --- Comparison table --- */

.scroll-tabella {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  padding: 0.5rem 0.8rem;
  text-align: right;
  white-space: nowrap;
}

th.colonna-domanda,
td.colonna-domanda {
  text-align: left;
  white-space: normal;
}

thead th {
  vertical-align: bottom;
  font-weight: 600;
  background: var(--bg);
  border-bottom: 2px solid var(--linea-forte);
}

/* Column headers wrap: a course name (up to 187 characters) on a single line
   would push the other columns out of view. Values keep nowrap. */
thead th:not(.colonna-domanda) {
  white-space: normal;
  min-width: 10rem;
}

thead th.colonna-domanda { min-width: 220px; }

thead th .segno { margin-right: 0.35rem; }

thead th small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--tenue);
}

tbody td { border-bottom: 1px solid var(--linea); }

/* Title of the full table, with the Excel download beside it: a quiet
   round icon button that takes color only on hover. */
.testa-tabella {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.testa-tabella h2 { margin: 0; }
.btn-icona {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}
.btn-icona:hover { color: var(--verde-testo); background: var(--tinta); }
.btn-icona svg { width: 1.15rem; height: 1.15rem; }

tr.riga-macro-categoria td {
  background: var(--tinta);
  color: var(--verde-testo);
  font-weight: 600;
  font-size: 0.82rem;
  text-align: left;
  padding-block: 0.35rem;
}

tr.riga-domanda-intestazione td.colonna-domanda { font-weight: 600; }

tr.riga-indicatore td.colonna-domanda {
  padding-left: 1.6rem;
  color: var(--tenue);
  font-size: 0.86rem;
}

td.cella-nota,
td.cella-solo-corso {
  color: var(--tenue);
  font-style: italic;
}


td.alto { font-weight: 800; }

td.cella-campione-piccolo { color: var(--tenue); }

/* --- Footer --- */

.piede {
  margin-top: 3rem;
  padding-bottom: 1.6rem;
  color: var(--tenue);
  font-size: 0.8rem;
  text-align: center;
}

.piede p { margin: 0 auto 0.4rem; max-width: 90ch; }

/* --- Tooltip (js/suggerimento.js) ---
   Drawn like the header bar: a light card with a soft shadow, and a small
   arrow toward the value. --freccia is the arrow's distance from the left
   edge; data-lato says whether the bubble sits above or below. */

.suggerimento {
  position: absolute;
  z-index: 30;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--inchiostro);
  box-shadow: 0 1px 2px var(--ombra), 0 8px 24px var(--ombra);
  font-size: 0.8rem;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s, transform 0.12s;
}

.suggerimento[data-lato="sotto"] { transform: translateY(-3px); }
.suggerimento.visibile { opacity: 1; transform: none; }

.suggerimento > * { display: block; }
.suggerimento > strong { font-weight: 600; margin-bottom: 0.15rem; }
.suggerimento > span { color: var(--tenue); }
.suggerimento > span:only-child { color: var(--inchiostro); }

.suggerimento::after {
  content: '';
  position: absolute;
  left: var(--freccia, 50%);
  width: 9px;
  height: 9px;
  margin-left: -5px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  transform: rotate(45deg);
}

.suggerimento[data-lato="sopra"]::after { bottom: -5.5px; border-top: 0; border-left: 0; }
.suggerimento[data-lato="sotto"]::after { top: -5.5px; border-bottom: 0; border-right: 0; }

/* --- AI dialog --- */

.dlg-ai {
  width: min(600px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--superficie);
  color: var(--inchiostro);
  box-shadow: 0 24px 64px rgba(16, 32, 31, 0.25);
}

.dlg-ai::backdrop { background: rgba(10, 20, 19, 0.45); }

.dlg-chiudi { position: absolute; top: 0.6rem; right: 0.6rem; }

.dlg-corpo {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background:
    radial-gradient(ellipse 70% 40% at 70% 60%, color-mix(in srgb, var(--alone) 60%, transparent), transparent 70%),
    var(--superficie);
}

/* The empty state of the AI Chatbot UI reference: a sparkle, a title and
   one sentence, then the suggestions and the request. */
.ai-vuoto { padding: 1.4rem 0 0.4rem; text-align: center; }
.ai-scintilla { font-size: 1.7rem; line-height: 1; color: var(--verde-testo); }
.ai-vuoto h3 { margin: 0.55rem 0 0.25rem; font-size: 1.2rem; font-weight: 600; }
.ai-vuoto p { max-width: 46ch; margin: 0 auto; font-size: 0.87rem; color: var(--tenue); }

.ai-suggerimenti-titolo { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--tenue); }
.ai-suggerimenti div { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }

.ai-suggerimento {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: color-mix(in srgb, var(--superficie) 85%, transparent);
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

.ai-suggerimento:hover { border-color: var(--tratteggio); }

.ai-richiesta {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.35rem 0.4rem 0.35rem 0.8rem;
  border: 1px solid var(--tratteggio);
  border-radius: 12px;
  background: var(--superficie);
}

.ai-richiesta:focus-within {
  border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 25%, transparent);
}

#ai-frase {
  flex: 1;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.45rem 0;
  border: 0;
  background: none;
  resize: vertical;
}

#ai-frase:focus-visible { outline: none; }

.ai-invia {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 9px;
  background: var(--accento);
  color: var(--su-accento);
  cursor: pointer;
}

.ai-invia:disabled { opacity: 0.55; cursor: default; }
.ai-invia svg { width: 1.1rem; height: 1.1rem; }

.ai-garanzia { margin: 0; font-size: 0.78rem; text-align: center; color: var(--tenue); }

.dlg-corpo details {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie);
  font-size: 0.87rem;
}

.dlg-corpo summary { cursor: pointer; font-weight: 600; color: var(--verde-testo); }

.dlg-piede { display: flex; justify-content: flex-end; gap: 0.5rem; }

.ai-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
  align-items: end;
}

.ai-config label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--tenue);
}

.ai-config input { padding: 0.4rem 0.5rem; color: var(--inchiostro); }

.ai-avviso { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--tenue); }

.ai-stato { margin: 0; min-height: 1.2em; font-size: 0.85rem; }
.ai-stato:empty { display: none; }
.ai-stato-ok { color: var(--verde-testo); }
.ai-stato-attesa { color: var(--tenue); }
.ai-stato-errore { color: var(--errore); }

/* Instructions for enabling a local model (CORS). Closed by default; the user
   can open them, or the application can open them when that error occurs. */
.ai-aiuto-corpo {
  margin-top: 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--linea);
  font-size: 0.85rem;
  color: var(--tenue);
}

.ai-aiuto-corpo p { margin: 0 0 0.6rem; }

.ai-aiuto-titolo {
  font-weight: 600;
  color: var(--inchiostro);
  margin-top: 1rem !important;
}

.ai-aiuto-origine { font-size: 0.95rem; }

.ai-aiuto-corpo code {
  font-size: 0.85em;
  background: var(--bg);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  color: var(--inchiostro);
  overflow-wrap: anywhere;
}

.ai-aiuto-corpo pre {
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--linea);
  border-radius: 6px;
  overflow-x: auto;
}

/* Within a code block, the surrounding <pre> already provides the frame. */
.ai-aiuto-corpo pre code {
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
}

.ai-aiuto-nota { margin-top: 1rem !important; font-size: 0.78rem; }

/* --- Responsive layout --- */

@media (max-width: 760px) {
  .contenitore { padding-inline: 1rem; }
  main { padding-top: 1.2rem; }

  /* The bar keeps the title, the switch and the theme; the navigation
     becomes a pill fixed at the bottom of the screen. */
  .testata { padding: 0.5rem 0.6rem 0.3rem; }
  .testata-barra { gap: 0.55rem; padding: 0.45rem 0.45rem 0.45rem 0.85rem; border-radius: 14px; }
  .marchio h1 { font-size: 0.98rem; line-height: 1.2; }
  .marchio p { display: none; }
  .modo { gap: 0.35rem; font-size: 0.78rem; }
  .btn-tema { width: 2rem; height: 2rem; }
  .navigazione {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: max(0.8rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    box-shadow: 0 10px 30px var(--ombra);
  }
  .voce-nav { flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.95rem; font-size: 0.7rem; }
  .voce-nav .testo-lungo { display: none; }
  .voce-nav .testo-corto { display: inline; }
  body { padding-bottom: 5rem; }

  .colonne-riga { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .aggiungi { min-height: 3.2rem; margin-top: 0; }
  .tendina { width: 100%; }

  /* Scores stack: the question, then each column with its own name. */
  .voti { grid-template-columns: minmax(0, 1fr); }
  .voti-testa { display: none; }
  .voti-riga > * { border-top: 0; padding-block: 0.3rem; }
  .voti-riga > .voti-domanda { border-top: 1px solid var(--linea); padding-top: 0.9rem; }
  .voti-testa + .voti-riga > .voti-domanda { border-top: 0; }
  .voti-riga > :last-child { padding-bottom: 0.9rem; }
  .voto-chi {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--tenue);
  }
  .ai-suggerimenti div { grid-template-columns: 1fr; }

  /* The ruler stacks: question, line, then each value with its own name. */
  .paragone-riga { grid-template-columns: minmax(0, 1fr); row-gap: 0.45rem; }
  .paragone-intestazione { display: none; }
  .paragone-valori { justify-content: flex-start; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
  .paragone-valore { width: auto; justify-content: flex-start; }
  .paragone-valore-nome {
    display: inline;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    color: var(--tenue);
  }

  .conta { margin-left: 0; width: 100%; }
  .lista-checkbox { padding-left: 0; }

  /* The question column stays put while the values scroll sideways. */
  th.colonna-domanda,
  td.colonna-domanda {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 9rem;
    max-width: 9rem;
    background: var(--superficie);
    box-shadow: 1px 0 0 var(--linea);
  }
  thead th.colonna-domanda { min-width: 9rem; background: var(--bg); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}