/* ==========================================================================
   Osservatorio Azzurro — foglio di stile unico
   Fase 1 della razionalizzazione grafica (piano 10/09/2026, verbale PM.2637.003)

   Fino al 13/09 ogni pagina aveva la sua copia di queste regole: una
   correzione fatta in una pagina non arrivava alle altre. Da qui in avanti le
   regole si scrivono QUI, non dentro le pagine.

   Soglie responsive:
   TRE SOGLIE, e solo queste: 560px / 760px / 900px
    560 telefono · 760 schermo stretto (navigazione, margini,
    barre a tutta riga) · 900 tablet (griglie a una colonna).
    Una quarta soglia e' una scelta esplicita, non un'aggiunta di passaggio.

   Classi con prefisso rz- : nate con la razionalizzazione. Le altre sono le
   classi storiche del sito, riportate senza cambiare valore.
   ========================================================================== */

  :root{
    --bg: #05121F;
    --surface: #0B2038;
    --surface-raised: #12314F;
    --border: rgba(255,255,255,0.09);
    --border-strong: rgba(255,255,255,0.16);
    --ink: #F4F7FB;
    --ink-secondary: var(--gold);
    --ink-muted: var(--gold);
    --blue: #0066CC;
    --blue-bright: #4DA3FF;
    --gold: #F4C542;
    --green: #2FAE6B;
    --pie-ue: #2453D9;
    --giallo-ue: #F5CD46;
    --giallo-extraue: #D98E1A;
    --red: #E14954;
    --slate: #5B7191;
    --cat-campnaz: #3987e5;
    --cat-pl: #199e70;
    --cat-seriea: #c98500;
    --cat-bund: #9085e9;
    --cat-laliga: #e66767;
    --cat-ligue1: #d95926;
    --cat-altri: #5B7191;
    --cat-nd: #2a3b52;

    --font-display: 'Century Gothic', 'Avenir Next', Avenir, 'Segoe UI', Ubuntu, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  }

  *{ box-sizing: border-box; }
  html{ color-scheme: dark; }
  body{
    margin: 0;
    background: var(--bg);
    background-image:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,102,204,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, rgba(244,197,66,0.06), transparent 55%);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img, svg{ display: block; max-width: 100%; }
  a{ color: inherit; text-decoration: none; }
  h1,h2,h3{ font-family: var(--font-display); text-wrap: balance; margin: 0; }
  .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  :focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

  .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
  @media (max-width: 760px){ .wrap{ padding: 0 18px; } }

  /* ---------- NAV ---------- */
  .site-nav{
    position: sticky; top: 0; z-index: 50;
    background: rgba(5,18,31,0.86);
    backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid var(--border);
  }
  .site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 24px; height: 76px; }
  .brand{ display:flex; align-items:center; gap: 12px; }
  .brand img{ height: 64px; width: auto; }
  .brand-word{ font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
  .c-os{ color: var(--ink); }
  .c-az{ color: var(--blue-bright); }
  .c-it{ color: var(--gold); }

  .nav-links{ display:flex; align-items:center; gap: 30px; list-style:none; margin:0; padding:0; }
  .nav-links a{
    font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-secondary); padding: 8px 2px; border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }
  .nav-links a:hover{ color: var(--ink); border-color: var(--blue-bright); }
  .nav-links a.active{ color: var(--ink); border-color: var(--gold); }
  .nav-toggle{ display:none; }

  @media (max-width: 760px){
    .nav-links{ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{ padding: 68px 0 44px; border-bottom: 1px solid var(--border); }
  .hero-grid{ display:flex; align-items:center; gap: 48px; justify-content: space-between; }
  .hero-text{ flex: 1 1 520px; min-width: 0; }
  .hero-visual{ flex: 0 0 auto; display:flex; flex-direction: column; align-items:center; gap: 6px; }
  .hero-visual img{
    width: min(440px, 40vw); height: auto;
    filter: drop-shadow(0 18px 40px rgba(0,102,204,0.28));
  }
  .hero-wordmark{ font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
  @media (max-width: 900px){
    .hero-grid{ flex-direction: column-reverse; text-align:center; gap: 30px; }
    .hero-text{ flex-basis: auto; }
    .hero-visual img{ width: min(280px, 60vw); }
    .hero-sub{ margin-left:auto; margin-right:auto; }
    .cta-row{ justify-content:center; }
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap: 8px;
    font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 18px;
  }
  .eyebrow::before{ content:""; width: 18px; height: 2px; background: var(--gold); display:inline-block; }
  .hero h1{ font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.12; max-width: 22ch; }
  .hero-sub{ margin: 20px 0 0; max-width: 56ch; color: var(--ink-secondary); font-size: 1.06rem; }

  .cta-row{ display:flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .btn{
    font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
    padding: 8px 22px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn-primary{ background: var(--blue-bright); color: #05121F; }
  .btn-primary:hover{ background: #6BB6FF; }
  .btn-secondary{ background: transparent; color: var(--ink); border-color: var(--border-strong); }
  .btn-secondary:hover{ border-color: var(--blue-bright); color: var(--blue-bright); }

  /* CTA di chiusura pagina verso l'archivio delle analisi (25/08/2026) */
  .archivio-cta{ display:flex; justify-content:center; padding: 46px 0 56px; }

  /* ---------- TICKER ---------- */
  .ticker{
    margin-top: 46px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    display:flex; flex-wrap: wrap;
  }
  .ticker-item{
    flex: 1 1 200px; padding: 18px 22px; border-right: 1px solid var(--border);
    font-family: var(--font-mono);
  }
  .ticker-item:last-child{ border-right: none; }
  .ticker-label{ font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-muted); text-transform: uppercase; }
  .ticker-value{ font-size: 1.3rem; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; display:flex; align-items:baseline; gap:8px; }
  .trend{ font-size: 0.78rem; font-weight: 600; }
  .trend.up{ color: var(--green); }
  .trend.down{ color: var(--red); }
  .trend.flat{ color: var(--ink-muted); }

  /* ---------- CHI SIAMO ---------- */
  .about{ padding: 40px 0; border-bottom: 1px solid var(--border); }
  .about-grid{ display:flex; gap: 40px; align-items:flex-start; flex-wrap: wrap; }
  .about-text{ flex: 1 1 420px; color: var(--ink-secondary); font-size: 1rem; max-width: 62ch; }
  .about-text strong{ color: var(--ink); }
  .esordio-lead{ color: var(--ink); font-size: 1rem; margin-bottom: 28px; }
  .esordio-lead p{ margin: 0 0 14px; }
  .esordio-lead p:last-child{ margin-bottom: 0; }
  .chart-title-mid{ font-size: 0.91rem; font-weight: 700; color: var(--ink); }
  .table-expand{ cursor: pointer; }
  .table-expand summary{ list-style: none; cursor: pointer; color: var(--blue-bright); font-weight: 600; font-size: 0.84rem; padding: 4px 0; }
  .table-expand summary::-webkit-details-marker{ display:none; }
  .table-expand summary::before{ content: "▸ "; }
  .table-expand[open] summary::before{ content: "▾ "; }
  .table-expand table{ margin-top: 6px; }
  .source-tags{ flex: 0 0 auto; display:flex; flex-direction: column; gap: 10px; min-width: 200px; }
  .source-tag{
    display:flex; align-items:center; gap: 10px; font-family: var(--font-mono); font-size: 0.82rem;
    color: var(--ink-secondary); background: var(--surface); border: 1px solid var(--border);
    padding: 10px 14px; border-radius: 8px;
  }
  .source-tag .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); flex: none; }

  /* ---------- SECTION HEADER ---------- */
  .section{ padding: 56px 0; border-bottom: 1px solid var(--border); }
  .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
  .section-head h2{ font-size: 1.7rem; font-weight: 700; }
  .section-eyebrow{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-muted); text-transform: uppercase; margin-bottom: 6px; }
  .demo-badge{
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gold); border: 1px solid rgba(244,197,66,0.35); background: rgba(244,197,66,0.08);
    padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  }

  /* ---------- KPI GRID ---------- */
  .kpi-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
  @media (max-width: 900px){ .kpi-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .kpi-grid{ grid-template-columns: 1fr; } }
  .kpi-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
  .kpi-label{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); }
  .kpi-value{ font-family: var(--font-mono); font-size: 1.9rem; font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; }
  .kpi-meta{ margin-top: 6px; font-size: 0.82rem; color: var(--ink-secondary); }
  .kpi-meta.up{ color: var(--green); } .kpi-meta.down{ color: var(--red); }

  /* ---------- CHART CARDS ---------- */
  .chart-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
  @media (max-width: 900px){ .chart-grid{ grid-template-columns: 1fr; } }
  .chart-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px 18px; }
  .chart-title{ font-size: 1.02rem; font-weight: 700; }
  .chart-sub{ font-size: 0.8rem; color: var(--ink-muted); margin-top: 3px; }
  .chart-card svg{ margin-top: 14px; width: 100%; height: auto; }
  .chart-card text{ font-family: var(--font-mono); fill: var(--ink-secondary); }
  .cat-label{ font-family: var(--font-body) !important; fill: var(--ink-secondary); }

  .full-card{ grid-column: 1 / -1; }

  .legend-row{ display:flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
  .legend-item{ display:flex; align-items:center; gap: 8px; font-size: 0.8rem; color: var(--ink-secondary); }
  .legend-swatch{ width: 11px; height: 11px; border-radius: 3px; flex: none; }

  .chart-caption{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--ink-secondary); font-size: 0.88rem; max-width: 62ch; }

  /* ---------- TABELLA DISTRIBUZIONE CAMPIONATI ---------- */
  .leagues-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px 20px; }
  .leagues-card--narrow{ max-width: 67%; }
  @media (max-width: 900px){ .leagues-card--narrow{ max-width: 100%; } }
  .leagues-scroll{ overflow-x: auto; margin-top: 6px; }
  .leagues-table{ width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.84rem; }
  .leagues-table th{
    text-align: center; padding: 10px 8px; border-bottom: 1px solid var(--border-strong);
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 600; white-space: nowrap;
  }
  .leagues-table th:first-child{ text-align: left; }
  .leagues-table td{ text-align: center; padding: 9px 8px; border-bottom: 1px solid var(--border); color: var(--ink); font-weight: 600; white-space: nowrap; }
  .leagues-table td.naz{ text-align: left; font-weight: 600; color: var(--ink); }
  .leagues-table td.tot{ font-weight: 700; color: var(--ink); }
  .leagues-table td.empty{ color: var(--ink-muted); }
  .leagues-table tr.italia td{ background: rgba(244,197,66,0.1); }
  .leagues-table tr.italia td.naz{ color: var(--gold); font-weight: 700; }
  .leagues-table tr.totrow td{ background: var(--surface-raised); border-bottom: none; }
  .leagues-table tr.hl td{ background: rgba(47,174,107,0.08); }
  .leagues-table tr.sep-top td{ border-top: 2px solid var(--border-strong); padding-top: 14px; }
  .leagues-table td[data-tooltip]{ position: relative; cursor: default; }
  .leagues-table td[data-tooltip]::after{
    content: attr(data-tooltip);
    position:absolute; bottom: calc(100% + 9px); left:50%; transform: translateX(-50%);
    background: var(--surface-raised); color: var(--ink); font-family: var(--font-body); font-size:.74rem; font-weight:600;
    padding:7px 11px; border-radius:7px; border:1px solid var(--border-strong); white-space:nowrap;
    opacity:0; pointer-events:none; transition: opacity .12s ease, transform .12s ease; box-shadow: 0 8px 20px rgba(0,0,0,.4);
    z-index: 20;
  }
  .leagues-table td[data-tooltip]::before{
    content:""; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color: var(--surface-raised); opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:20;
  }
  .leagues-table td[data-tooltip]:hover::after{ opacity:1; transform: translateX(-50%) translateY(-2px); }
  .leagues-table td[data-tooltip]:hover::before{ opacity:1; }
  /* ---------- NAZIONALITA' A BARRE (club) ---------- */
  .nz-legend{ display:flex; gap:18px; margin: 4px 0 18px; flex-wrap:wrap; }
  .nz-legend div{ display:flex; align-items:center; gap:7px; font-size:0.8rem; color: var(--ink-secondary); }
  .nz-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }
  .nz-list{ display:flex; flex-direction:column; }
  .nz-team-row{ padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nz-team-row:last-child{ border-bottom:none; padding-bottom:0; }
  .nz-team-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .nz-name{ font-weight:700; font-size:1.08rem; }
  .nz-name .star{ color: var(--gold); font-weight:700; }
  .nz-util{ font-size:0.9rem; color: var(--ink-muted); white-space:nowrap; }
  .nz-util b{ color: var(--ink); font-weight:700; }
  .nz-body{ display:flex; align-items:center; gap:16px; }
  .nz-crest{ width:52px; height:52px; background:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
  .nz-crest img{ width:44px; height:44px; object-fit:contain; }
  .nz-bars{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .nz-bar{ display:flex; gap:2px; border-radius:5px; background: var(--surface-raised); overflow:hidden; }
  .nz-bar-main{ height:30px; }
  .nz-sub-row{ display:flex; align-items:center; gap:10px; }
  .nz-bar-sub{ height:17px; flex:none; }
  .nz-seg{ height:100%; display:flex; align-items:center; justify-content:center; }
  .nz-seg span{ font-size:0.78rem; font-weight:700; white-space:nowrap; }
  .nz-bar-sub .nz-seg span{ font-size:0.7rem; }
  .nz-u23-label{ font-size:0.82rem; color: var(--ink-muted); white-space:nowrap; }
  .nz-u23-label b{ color: var(--ink); font-weight:700; }


  /* --- estensione "podio" nazionalita' (Calciomercato 08/08/2026) --- */
  .nz-crest-wrap{ display:flex; flex-direction:column; align-items:center; flex:none; width:58px; }
  .nz-crest--top{ background: var(--gold); }
  .rank-badge{ font-family: var(--font-mono); font-weight:800; letter-spacing:.09em; font-size:0.8rem; color: var(--gold); margin-top:6px; text-align:center; }
  .rank-pari{ font-size:0.52rem; color: var(--ink-muted); text-align:center; font-style:italic; }
  .nz-team-head{ justify-content:flex-start; gap:16px; }
  .nz-body{ align-items:flex-start; }
  .nz-bar-main{ height:32px; width:80%; }

  /* --- variante senza stemma club (Coppa Italia 18/08/2026, squadre
     senza logo disponibile in assets/): numero di classifica al posto
     dell'immagine dentro lo stesso box .nz-crest --- */
  .nz-crest--num{ font-family: var(--font-mono); font-weight:800; font-size:1.3rem; color: var(--ink); }

  /* --- riga "Totali di giornata" (Coppa Italia 18/08/2026): stesso
     linguaggio grafico delle righe squadra, ma senza stemma — testo al
     suo posto — e con uno sfondo proprio per distinguerla dal podio
     sotto (richiesta di Capo) --- */
  .nz-team-row--totale{
    background: #1A4066; border-radius: 14px;
    padding: 12px 16px; margin-bottom: 8px;
    border: 1px solid var(--gold);
  }
  .nz-crest--totale{
    background: transparent; color: var(--gold); font-weight:800;
    font-size:0.7rem; line-height:1.25; letter-spacing:.02em;
    text-align:center; text-transform:uppercase;
  }

  /* ---------- BARRE PER RUOLO (Formazioni tipo, 11/08/2026) ---------- */
  .rb-legend{ display:flex; align-items:center; gap:18px; margin:14px 0 16px; font-size:0.85rem; flex-wrap:wrap; }
  .rb-legend-colors{ display:flex; gap:18px; }
  .rb-legend-colors div{ display:flex; align-items:center; gap:7px; color: var(--ink-secondary); }
  .rb-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; flex:none; }
  .rb-legend-sep{ width:1px; height:16px; background: var(--border-strong); flex:none; }
  .rb-legend-roles{ display:flex; gap:14px; }
  .rb-legend-roles div{ display:flex; align-items:baseline; gap:5px; }
  .rb-legend-roles .lr-sigla{ font-size:1rem; font-weight:800; color: var(--ink); }
  .rb-legend-roles .lr-desc{ font-size:0.72rem; color: var(--ink-muted); }

  .rb-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:22px 24px 20px; margin: 0 0 60px; display:flex; flex-direction:column; gap:9px; }
  .rb-row{ display:flex; align-items:center; gap:14px; }
  .rb-badge{ flex:none; width:64px; height:64px; border-radius:10px; background: var(--surface-raised);
    border:1px solid var(--border-strong); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1px; }
  .rb-sigla{ font-size:1.35rem; font-weight:800; color: var(--ink); line-height:1; }
  .rb-tot{ font-size:0.78rem; font-weight:700; color: var(--gold); }
  .rb-bars{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
  .rb-bar{ display:flex; gap:2px; border-radius:5px; background: var(--surface-raised); overflow:hidden; }
  .rb-bar-main{ height:30px; width:60%; }
  .rb-bar-sub{ height:17px; }
  .rb-seg{ height:100%; min-width:0; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:4px; }
  .rb-seg span{ display:flex; align-items:center; gap:4px; font-size:0.74rem; font-weight:700; white-space:nowrap; }
  .rb-bar-sub .rb-seg span{ font-size:0.64rem; gap:3px; }
  .rb-flag{ width:16px; height:11px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.35); }
  .rb-sub-row{ display:flex; align-items:center; gap:10px; }
  .rb-sub-wrap{ flex:none; }
  .rb-u23-label{ font-size:0.76rem; color: var(--ink-muted); }
  .rb-u23-label b{ color: var(--ink); font-weight:700; }

  .nz-sub-row{ flex-wrap:wrap; }
  .nz-bar-sub-wrap{ flex:none; }
  .nz-bar-sub{ height:19px; }
  .nz-seg{ min-width:0; overflow:hidden; gap:4px; }
  .nz-seg span{ display:flex; align-items:center; gap:4px; }
  .nz-bar-sub .nz-seg span{ gap:3px; }
  .seg-icon{ width:17px; height:12px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.35); flex:none; }
  .seg-icon.flagit{ width:21px; height:15px; }
  .nz-bar-sub .seg-icon{ width:13px; height:9px; }
  .nz-bar-sub .seg-icon.flagit{ width:16px; height:11px; }
  .nz-u23-label{ white-space:normal; }

  /* Mercato 14/08/2026: tetto barra principale al 70% (non 80% come nel
     podio Amichevoli), scoped alla sola sezione per non alterare le
     altre tabelle già pubblicate. */
  #mercato-20260814 .nz-bar-main{ width:70%; }
  #mercato-20260822 .nz-bar-main{ width:70%; }

  .leagues-note{
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
    color: var(--ink); font-size: 0.86rem;
  }
  .leagues-note p{ margin: 0 0 10px; }
  .leagues-note p:last-child{ margin-bottom: 0; }
  .leagues-callout{
    margin-top: 14px; display:flex; gap: 10px; align-items:flex-start;
    background: rgba(244,197,66,0.08); border: 1px solid rgba(244,197,66,0.3);
    border-radius: 10px; padding: 12px 14px; font-size: 0.86rem; color: var(--ink-secondary);
  }
  .leagues-callout .flag{ color: var(--gold); font-weight: 700; flex: none; }
  .leagues-source{
    margin-top: 16px; display:flex; align-items:center; justify-content: space-between; gap: 8px;
    font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-muted);
  }
  .leagues-source .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); flex: none; }
  /* Dall'08/09/2026 la calce puo' portare piu' di un codice (decisione di Capo:
     una sezione costruita su piu' tabelle li elenca tutti). Con due codici il
     codice usciva di 39px dalla card su schermo stretto e il secondo si leggeva
     a meta' — un codice Archivio troncato non serve a niente, ed era proprio la
     tracciabilita' l'oggetto della decisione. La causa non era il codice ma il
     testo a sinistra, che non poteva restringersi sotto la sua parola piu'
     lunga ("osservatorioazzurro.it"). Si lascia spezzare quello: il codice
     resta intero e a destra, e su una riga sola non cambia nulla. */
  .leagues-source .source-left{ min-width: 0; overflow-wrap: anywhere; }
  .leagues-source .source-right{ flex: none; }

  /* ---------- ROSTER ACCORDION (dettaglio giocatori per nazionale) ---------- */
  .roster-list{ margin-top: 6px; display:flex; flex-direction:column; gap: 8px; }
  .roster-details{ border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); overflow:hidden; }
  .roster-details summary{
    cursor:pointer; list-style:none; padding: 12px 16px; font-weight:700; color: var(--ink);
    display:flex; justify-content:space-between; align-items:center; gap: 10px;
  }
  .roster-details summary::-webkit-details-marker{ display:none; }
  .roster-details summary::after{ content:'+'; color: var(--ink-muted); font-weight:400; font-size:1.1rem; }
  .roster-details[open] summary::after{ content:'\2013'; }
  .roster-details .roster-count{ font-family: var(--font-mono); font-size:0.76rem; font-weight:600; color: var(--ink-muted); }
  .roster-details.sep-top{ margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--border-strong); }
  .roster-details.italia{ border-color: rgba(244,197,66,0.4); }
  .roster-details.italia summary{ color: var(--gold); }
  .roster-details.italia .roster-count{ color: var(--gold); }
  .roster-footnote{ padding: 10px 16px 14px; margin:0; font-size:0.82rem; color: var(--ink-secondary); border-top: 1px solid var(--border); }

  /* ---------- MEDIA / REPORT ---------- */
  .report-card{
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 30px; display:flex; flex-direction: column; gap: 14px; max-width: 720px;
  }
  .report-meta{ display:flex; align-items:center; gap: 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .report-tag{ color: var(--gold); border: 1px solid rgba(244,197,66,0.35); padding: 4px 9px; border-radius: 999px; }
  .report-date{ color: var(--ink-muted); }
  .report-card h3{ font-size: 1.35rem; font-weight: 700; }
  .report-card p{ margin:0; color: var(--ink-secondary); max-width: 58ch; }
  .report-link{ font-weight: 600; color: var(--blue-bright); font-size: 0.92rem; }
  .report-link:hover{ text-decoration: underline; }

  .social-row{ display:flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
  .social-chip{ display:flex; align-items:center; gap: 10px; }
  .social-badge{
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-secondary);
  }
  .social-meta{ display:flex; flex-direction: column; }
  .social-name{ font-size: 0.84rem; font-weight: 600; }
  .social-status{ font-size: 0.72rem; color: var(--ink-muted); }

  /* ---------- FOOTER ---------- */
  footer{ padding: 46px 0 40px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 30px; flex-wrap: wrap; }
  .footer-brand{ display:flex; align-items:center; gap: 12px; }
  .footer-brand img{ height: 50px; }
  .footer-tag{ margin-top: 8px; color: var(--ink-muted); font-size: 0.84rem; max-width: 34ch; }
  .footer-links{ display:flex; gap: 26px; list-style:none; margin:0; padding:0; flex-wrap: wrap; }
  .footer-links a{ font-size: 0.84rem; color: var(--ink-secondary); }
  .footer-links a:hover{ color: var(--ink); }
  .footer-bottom{
    margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border);
    display:flex; justify-content:space-between; gap: 14px; flex-wrap: wrap;
    font-size: 0.76rem; color: var(--ink-muted);
  }

  @media (prefers-reduced-motion: reduce){
    .btn{ transition: none; }
  }

  /* ---------- DISTRIBUZIONE CAMPIONATI — barre impilate ---------- */
  .dist-legend{ display:flex; flex-wrap:wrap; gap: 12px 18px; margin-top: 6px; margin-bottom: 20px; font-size:.78rem; color: var(--ink-secondary); }
  .dist-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; margin-right:7px; vertical-align:-1px; }
  .dist-rows{ display:flex; flex-direction:column; }
  .dist-row{ display:grid; grid-template-columns: 96px 1fr 36px; align-items:center; gap: 14px; padding: 7px 0; }
  .dist-row.sep-top{ border-top: 2px solid var(--border-strong); margin-top: 8px; padding-top: 15px; }
  .dist-row.dist-totale{ border-top: 2px solid var(--border-strong); margin-top: 10px; padding-top: 15px; font-weight:700; }
  .dist-naz{ font-weight:600; font-size:.88rem; color: var(--ink); }
  .dist-row.italia .dist-naz{ color: var(--gold); font-weight:700; }
  .dist-bar{ display:flex; gap:2px; height: 24px; border-radius: 5px; background: var(--surface-raised); }
  .dist-seg{ height:100%; display:flex; align-items:center; justify-content:center; position:relative; cursor:default; }
  .dist-seg:first-child{ border-radius:5px 0 0 5px; }
  .dist-seg:last-child{ border-radius:0 5px 5px 0; }
  .dist-seg .seg-label{ font-size:.68rem; font-weight:700; color: rgba(0,0,0,0.55); white-space:nowrap; overflow:hidden; max-width:100%; }
  .dist-seg::after{
    content: attr(data-tooltip);
    position:absolute; bottom: calc(100% + 9px); left:50%; transform: translateX(-50%);
    background: var(--surface-raised); color: var(--ink); font-family: var(--font-body); font-size:.74rem; font-weight:600;
    padding:7px 11px; border-radius:7px; border:1px solid var(--border-strong); white-space:nowrap;
    opacity:0; pointer-events:none; transition: opacity .12s ease, transform .12s ease; box-shadow: 0 8px 20px rgba(0,0,0,.4);
    z-index: 20;
  }
  .dist-seg::before{
    content:""; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color: var(--surface-raised); opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:20;
  }
  .dist-seg:hover{ filter: brightness(1.12); }
  .dist-seg:hover::after{ opacity:1; transform: translateX(-50%) translateY(-2px); }
  .dist-seg:hover::before{ opacity:1; }
  .dist-tot{ font-weight:700; text-align:right; font-size:.85rem; color: var(--ink); }
  @media (max-width: 560px){
    .dist-row{ grid-template-columns: 70px 1fr 30px; gap: 8px; }
    .dist-naz{ font-size:.78rem; }
  }

  /* ---------- ROSTER — lista compatta con barra minuti ---------- */
  .plist{ display:flex; flex-direction:column; max-width: 430px; }
  .prow{ display:grid; grid-template-columns: 22px minmax(0,1fr) 108px; align-items:center; gap: 10px; padding: 7px 16px; border-bottom: 1px solid var(--border); }
  .prow:last-child{ border-bottom:none; }
  .prow .role-tag{ font-family: var(--font-mono); font-size:.68rem; color: var(--ink-muted); text-align:center; }
  .prow .pname{ font-weight:600; font-size:.87rem; color: var(--ink); }
  .prow .pleague{ color: var(--ink-secondary); font-size:.78rem; }
  .prow .pmins-wrap{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
  .prow .pmins{ font-weight:700; font-size:.82rem; font-variant-numeric: tabular-nums; width: 34px; text-align:right; color: var(--ink); }
  .pbar-track{ width: 50px; height:6px; border-radius:3px; background: var(--surface); overflow:hidden; flex:none; }
  .pbar-fill{ height:100%; background: var(--blue-bright); border-radius:3px; }
  /* --- Rimando "Come leggere i dati" + finestrina (richiesta di Capo,
     31/08/2026): riga gialla, piccola, NON grassetto, che apre una
     finestrina con la nota metodologica invece di appesantire la pagina. --- */
  .metodo-riga{ margin: 6px 0 22px; }
  .metodo-link{ color: var(--gold); font-size: 0.82rem; font-weight: 400;
    text-decoration: none; border-bottom: 1px dotted rgba(244,197,66,.55);
    cursor: pointer; }
  .metodo-link:hover, .metodo-link:focus-visible{ border-bottom-style: solid; }
  .metodo-modale{ position: fixed; inset: 0; z-index: 60; display: flex;
    align-items: center; justify-content: center; padding: 24px; }
  .metodo-modale[hidden]{ display: none; }
  .metodo-sfondo{ position: absolute; inset: 0; background: rgba(3,10,18,.72); }
  .metodo-box{ position: relative; max-width: 560px; width: 100%;
    max-height: calc(100vh - 48px); overflow-y: auto;
    background: var(--surface-raised); border: 1px solid var(--gold);
    border-radius: 14px; padding: 26px 28px 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55); }
  .metodo-box h4{ margin: 0 0 12px; font-size: 1rem; color: var(--gold); }
  .metodo-box p{ margin: 0 0 12px; font-size: 0.9rem; line-height: 1.65; color: var(--ink); }
  .metodo-box p:last-of-type{ margin-bottom: 0; }
  .metodo-chiudi{ margin-top: 18px; background: transparent; color: var(--gold);
    border: 1px solid var(--gold); border-radius: 8px; padding: 7px 18px;
    font: inherit; font-size: 0.82rem; cursor: pointer; }
  .metodo-chiudi:hover{ background: rgba(244,197,66,.12); }
  /* --- Fase 1, 13/09/2026: le regole qui sotto erano scritte per ID di
     sezione (#mercato-20260830, #seriea-g2-20260901, #seriea-g3-20260908).
     Ora valgono per qualunque sezione porti l'attributo data-rz-segmenti:
       data-rz-segmenti="base"          icona che sparisce e cifre che si
                                        stringono nei segmenti stretti
       data-rz-segmenti="mobile-pieno"  come sopra, piu' barre a tutta riga
                                        sotto la soglia del telefono
     Stesse tre sezioni di prima, nessuna in piu': estenderle ai lavori gia'
     pubblicati e' un'altra decisione, e passa dalla migrazione (Fase 2). --- */
  /* --- Tabella Mercato 30/08: regole limitate a QUESTA sezione ---------------
     Sono ambitate con #mercato-20260830 di proposito. Le stesse regole,
     applicate al foglio condiviso, cambierebbero anche le sezioni gia'
     pubblicate: Capo ha deciso il 31/08 di non toccarle prima di questa
     uscita, e il precedente del 10/08 (una modifica a .nz-bar-main che
     accorcio' in silenzio le barre del Mercato gia' online) dice perche'.
     1. La sotto-barra U23 porta la quota grezza in --quota e viene riscalata
        qui: al 70% sul desktop, come la barra grande sopra, cosi' le due
        stanno sulla stessa scala visiva; a tutta riga sul mobile, dove i
        pixel sono pochi. Senza questa regola la sotto-barra resta senza
        larghezza e le cifre si tagliano.
     2. Nei segmenti troppo stretti sparisce l'icona, non la cifra: la cifra
        e' l'informazione, l'icona e' la ridondanza. La container query guarda
        la larghezza vera del segmento, quindi vale a ogni schermo. --------- */
  [data-rz-segmenti] .nz-bar-sub-wrap{ width: calc(var(--quota) * 0.7); }
  [data-rz-segmenti] .nz-seg{ container-type: inline-size; }
  @container (max-width: 54px){
    [data-rz-segmenti] .nz-bar .nz-seg .seg-icon,
    [data-rz-segmenti] .nz-bar .nz-seg svg{ display: none !important; }
  }
  @container (max-width: 36px){
    [data-rz-segmenti] .nz-bar .nz-seg span{ font-size: 0.6rem; gap: 0; letter-spacing: -.03em; }
  }
  /* Secondo scalino: nella vista per minuti la sotto-barra U23 e' molto piu'
     corta che in quella per giocatori e a 0.6rem le cifre uscivano ancora.
     Ci si ferma a 0.5rem: sotto, il testo smette di essere leggibile e si
     baratterebbe un difetto visibile con uno peggiore. */
  @container (max-width: 24px){
    [data-rz-segmenti] .nz-bar .nz-seg span{ font-size: 0.5rem; letter-spacing: -.04em; }
  }
  @media (max-width: 760px){
    [data-rz-segmenti="mobile-pieno"] .nz-bar-main{ width: 100%; }
    [data-rz-segmenti="mobile-pieno"] .nz-bar-sub-wrap{ width: var(--quota); }
  }

  





  /* ==========================================================================
     Pagine di testo (contatti, manifesto, metodologia) — <body class="rz-pagina-testo">
     Regole che esistevano solo in quelle pagine. Sono ambitate alla classe
     perche' due di esse contraddicevano la home:
       - footer con filetto superiore (la home e l'archivio non lo hanno);
       - schede social di contatti con effetto al passaggio del mouse (quelle
         della home non lo hanno).
     ========================================================================== */
  .rz-pagina-testo .page-hero{ padding: 64px 0 20px; border-bottom: 1px solid var(--border); }
  .rz-pagina-testo .page-hero h1{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; line-height: 1.15; max-width: 22ch; }
  .rz-pagina-testo .prose-section{ padding: 48px 0 64px; }
  .rz-pagina-testo .prose{ max-width: 66ch; color: var(--ink-secondary); font-size: 1.05rem; }
  .rz-pagina-testo .prose p{ margin: 0 0 22px; }
  .rz-pagina-testo .prose strong{ color: var(--ink); }
  .rz-pagina-testo .prose a.contact-link{ font-weight: 600; color: var(--blue-bright); }
  .rz-pagina-testo .prose a.contact-link:hover{ text-decoration: underline; }
  .rz-pagina-testo .social-chip{ display:flex; align-items:center; gap: 10px; transition: transform .15s ease; }
  .rz-pagina-testo .social-chip:hover{ transform: translateY(-2px); }
  .rz-pagina-testo .social-chip:hover .social-name{ color: var(--gold); }
  .rz-pagina-testo .social-badge{
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    color: var(--ink-secondary);
  }
  .rz-pagina-testo .social-name{ font-size: 0.84rem; font-weight: 600; color: var(--ink); transition: color .15s ease; }
  .rz-pagina-testo footer{ padding: 46px 0 40px; border-top: 1px solid var(--border); }
  .rz-pagina-testo .prose .closing{ color: var(--ink); font-weight: 600; font-size: 1.1rem; margin-top: 34px; }
  .rz-pagina-testo .prose .signature{
    margin-top: 10px; color: var(--ink-muted); font-family: var(--font-mono);
    font-size: 0.82rem; letter-spacing: 0.04em;
  }
  .rz-pagina-testo .prose h2{
    font-size: 1.35rem; font-weight: 700; color: var(--ink);
    margin: 46px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  }
  .rz-pagina-testo .prose h2:first-child{ margin-top: 0; }
  .rz-pagina-testo .prose ul{ margin: 0 0 22px; padding-left: 22px; }
  .rz-pagina-testo .prose li{ margin: 0 0 10px; }
  .rz-pagina-testo .prose li::marker{ color: var(--blue-bright); }
  .rz-pagina-testo .prose .back-link{
    display:inline-block; margin-top: 12px; font-weight: 600;
    color: var(--blue-bright); font-size: 0.92rem;
  }
  .rz-pagina-testo .prose .back-link:hover{ text-decoration: underline; }

  /* Manifesto e metodologia usano un inchiostro secondario grigio-azzurro;
     home, archivio e contatti lo hanno oro. Differenza ESISTENTE, riportata
     com'e': uniformarla e' una scelta grafica, non un riordino.
     <body class="rz-pagina-testo rz-inchiostro-testo"> */
  .rz-inchiostro-testo{ --ink-muted: #6B819C; --ink-secondary: #A9BDD4; }

  /* ==========================================================================
     Segmenti delle barre — suggerimento e "solo colore" (Capo, 15/09/2026)
     Fonte: razionalizzazione/segmenti.py. Soglie misurate al carattere effettivo
     (fase2/misura_soglia_segmenti.py). Sotto soglia il segmento resta solo colore;
     il valore e' nel suggerimento (data-rz-tip), sempre presente.
     ========================================================================== */
  [data-rz-segmenti] .rb-seg{ container-type: inline-size; }
  /* nz, 0%-99%, con le regole dei segmenti stretti: una cifra entra da 11 px, due cifre da 15 px */
  @container (max-width: 10.99px){
    [data-rz-segmenti] .nz-bar .nz-seg[data-unita="%"][data-cifre="1"] > span{ display: none !important; }
  }
  @container (max-width: 14.99px){
    [data-rz-segmenti] .nz-bar .nz-seg[data-unita="%"][data-cifre="2"] > span{ display: none !important; }
  }
  /* nz, numeri senza %: una cifra entra da 4 px, due cifre da 8 px */
  @container (max-width: 3.99px){
    [data-rz-segmenti] .nz-bar .nz-seg[data-unita="n"][data-cifre="1"] > span{ display: none !important; }
  }
  @container (max-width: 7.99px){
    [data-rz-segmenti] .nz-bar .nz-seg[data-unita="n"][data-cifre="2"] > span{ display: none !important; }
  }
  /* rb principale con bandierina, .74rem: una cifra entra da 32 px, due cifre da 39 px */
  @container (max-width: 31.99px){
    [data-rz-segmenti] .rb-bar-main .rb-seg[data-unita="%"][data-icona="1"][data-cifre="1"] > span{ display: none !important; }
  }
  @container (max-width: 38.99px){
    [data-rz-segmenti] .rb-bar-main .rb-seg[data-unita="%"][data-icona="1"][data-cifre="2"] > span{ display: none !important; }
  }
  /* rb principale senza icona, .74rem: una cifra entra da 17 px, due cifre da 24 px */
  @container (max-width: 16.99px){
    [data-rz-segmenti] .rb-bar-main .rb-seg[data-unita="%"][data-icona="0"][data-cifre="1"] > span{ display: none !important; }
  }
  @container (max-width: 23.99px){
    [data-rz-segmenti] .rb-bar-main .rb-seg[data-unita="%"][data-icona="0"][data-cifre="2"] > span{ display: none !important; }
  }
  /* rb sotto-barra, .64rem: una cifra entra da 15 px, due cifre da 20 px */
  @container (max-width: 14.99px){
    [data-rz-segmenti] .rb-bar-sub .rb-seg[data-unita="%"][data-cifre="1"] > span{ display: none !important; }
  }
  @container (max-width: 19.99px){
    [data-rz-segmenti] .rb-bar-sub .rb-seg[data-unita="%"][data-cifre="2"] > span{ display: none !important; }
  }
  /* Barre per ruolo (rb-) sul telefono: la correzione dei segmenti stretti "a tutti i lavori
     con barre" (Capo 15/09), che le regole della Fase 1 davano solo alle barre nz-.
     - Barra principale a tutta riga, come .nz-bar-main.
     - Sotto-barra U23 in scala: --quota = quota vera U23/totale, scritta nel markup.
       Minimo 30% = 18% / 0,6: il minimo di oggi (18% della riga, con la barra principale
       al 60%) riportato alla barra a tutta riga, cosi' le due restano in proporzione.
     - Da computer non cambia nulla: resta la larghezza pubblicata nello stile in linea,
       max(18%, quota x 0,6) arrotondata al decimale (per questo !important sotto 760 px).
       Senza --quota (sezioni non rimontate) la regola non si applica. */
  @media (max-width: 760px){
    [data-rz-segmenti="mobile-pieno"] .rb-bar-main{ width: 100%; }
    [data-rz-segmenti="mobile-pieno"] .rb-sub-wrap[style*="--quota"]{ width: max(30%, var(--quota)) !important; }
  }
  /* Barra principale per squadra con la larghezza scritta nello stile (post d'esordio: 70%):
     da computer resta quella pubblicata, sul telefono a tutta riga come le altre nz-
     (!important perche' lo stile in linea vincerebbe sulla regola della Fase 1). */
  @media (max-width: 760px){
    [data-rz-segmenti="mobile-pieno"] .nz-bar-main[style*="width"]{ width: 100% !important; }
  }
  .nz-seg[data-rz-tip], .rb-seg[data-rz-tip]{ cursor: default; }
  /* stesso aspetto di .leagues-table td[data-tooltip]::after / ::before */
  .rz-tip{
    position: fixed; z-index: 60; transform: translate(-50%, -100%);
    background: var(--surface-raised); color: var(--ink); font-family: var(--font-body); font-size: .74rem; font-weight: 600;
    padding: 7px 11px; border-radius: 7px; border: 1px solid var(--border-strong); white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,.4); pointer-events: none; opacity: 0; transition: opacity .12s ease;
  }
  .rz-tip.rz-tip-on{ opacity: 1; }
  .rz-tip::after{
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--surface-raised);
  }

  /* ==========================================================================
     Elementi nascosti — Capo 16/09/2026
     Un elemento con l'attributo hidden deve sparire ANCHE se una regola di questo
     foglio gli impone un display. Senza questa riga "nascondere" non nasconde.
     ========================================================================== */
  [hidden]{ display: none !important; }