/* ═══ dictionary.css | Vocabolario Calitrano ═══ */

/* ════════════════════════════════════════
       VOCABOLARIO PAGE
    ════════════════════════════════════════ */

    /* Accent band under topbar */
    .voc-hero-band {
      height: 4px;
      background: linear-gradient(to right,
        var(--rosso) 0%, var(--rosso) 28%,
        var(--oro)   28%, var(--oro)  46%,
        var(--verde) 46%, var(--verde) 64%,
        var(--oro)   64%, var(--oro)  82%,
        var(--rosso) 82%, var(--rosso) 100%);
    }

    /* Two-column layout: sidebar + main */
    .voc-layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      min-height: calc(100svh - var(--topbar-h) - var(--sat) - 4px);
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 1.5rem calc(2rem + var(--sab));
      gap: 0;
      align-items: start;
    }

    /* ── SIDEBAR ── */
    .voc-sidebar {
      position: sticky;
      top: calc(var(--topbar-h) + var(--sat) + 4px);
      height: calc(100svh - var(--topbar-h) - var(--sat) - 4px);
      overflow-y: auto;
      padding: 1.5rem 1.2rem 2rem 0;
      border-right: 1px solid var(--carta3);
      display: flex; flex-direction: column; gap: .9rem;
      /* scrollbar minimal */
      scrollbar-width: thin;
      scrollbar-color: var(--carta3) transparent;
    }

    .voc-sidebar-brand {
      display: flex; align-items: center; gap: .65rem;
      padding-bottom: .9rem;
      border-bottom: 1px solid var(--carta3);
      flex-shrink: 0;
    }

    .voc-sidebar-title {
      font-family: 'Cinzel', serif;
      font-size: .82rem; font-weight: 700;
      letter-spacing: .06em; color: var(--ink2); line-height: 1.1;
    }

    .voc-sidebar-sub {
      font-family: 'Raleway', sans-serif;
      font-size: .72rem; letter-spacing: .14em;
      text-transform: uppercase; color: var(--muted);
      margin-top: 1px;
    }

    /* Search inside sidebar */
    .voc-search-wrap { flex-shrink: 0; }

    .voc-search-box {
      display: flex;
      border: 1.5px solid var(--carta3);
      background: var(--bianco);
      border-radius: var(--r-sm);
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
    }

    .voc-search-box:focus-within {
      border-color: var(--rosso);
      box-shadow: 0 2px 10px rgba(139,26,26,.1);
    }

    .voc-search-input {
      flex: 1; min-width: 0;
      background: transparent; border: none; outline: none;
      padding: 0 .75rem; height: 38px;
      font-family: 'Raleway', sans-serif; font-style: normal; font-weight: 400;
      font-size: max(16px, .9rem); color: var(--ink);
    }

    .voc-search-input::placeholder { color: var(--muted); }

    .voc-search-btn {
      background: var(--rosso); border: none; cursor: pointer;
      width: 38px; height: 38px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--argento); transition: background .2s;
      min-width: 44px; min-height: 44px;
    }

    .voc-search-btn:hover { background: var(--rosso-mid); }

    /* Direction toggle in sidebar */
    .voc-dir-wrap { flex-shrink: 0; }

    .voc-dir-toggle {
      display: flex;
      background: var(--carta2); border: 1px solid var(--carta3);
      border-radius: 4px; overflow: hidden;
      height: 34px; position: relative; width: 100%;
    }

    .voc-dir-track {
      position: absolute; top: 2px; bottom: 2px;
      width: calc(50% - 2px); left: 2px;
      background: var(--rosso-deep);
      border-radius: 3px;
      transition: transform .25s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
    }

    .voc-dir-toggle[data-dir="it"] .voc-dir-track {
      transform: translateX(100%);
    }

    .voc-dir-btn {
      flex: 1; height: 100%; padding: 0 .6rem;
      border: none; background: transparent; cursor: pointer;
      font-family: 'Raleway', sans-serif;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--muted);
      position: relative; z-index: 1;
      transition: color .2s ease;
      white-space: nowrap; min-height: 34px;
    }

    .voc-dir-btn.active { color: var(--argento); }

    .voc-dir-sep {
      width: 1px; align-self: stretch;
      background: var(--carta3);
      position: relative; z-index: 1;
      transition: opacity .2s;
    }

    .voc-dir-toggle[data-dir="dial"] .voc-dir-sep,
    .voc-dir-toggle[data-dir="it"]   .voc-dir-sep { opacity: 0; }

    /* Alpha label */
    .voc-alpha-label {
      font-family: 'Raleway', sans-serif;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--muted); flex-shrink: 0;
    }

    /* Alpha grid */
    .voc-alpha-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 3px; flex-shrink: 0;
    }

    .voc-alpha-btn {
      aspect-ratio: 1;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: .76rem; font-weight: 600;
      color: var(--muted); background: transparent;
      border: 1px solid var(--carta3); cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }

    .voc-alpha-btn:hover { background: var(--carta2); color: var(--ink); }

    .voc-alpha-btn.has-data {
      border-color: var(--rosso);
      color: var(--rosso);
    }

    .voc-alpha-btn.has-data:hover {
      background: var(--rosso);
      color: var(--argento);
      border-color: var(--rosso);
    }

    .voc-alpha-btn.active {
      background: var(--rosso-deep) !important;
      color: var(--argento) !important;
      border-color: var(--rosso-deep) !important;
    }

    /* ── MAIN ── */
    .voc-main {
      padding: 1.5rem 0 1.5rem 1.8rem;
    }

    .voc-page-header {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 1rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--rosso);
      margin-bottom: 1.2rem;
    }

    .voc-page-letter-wrap {
      display: flex; align-items: baseline; gap: .75rem;
    }

    .voc-page-letter {
      font-family: 'Cinzel', serif;
      font-size: 3rem; font-weight: 700;
      line-height: 1; color: var(--rosso); flex-shrink: 0;
      margin: 0; /* reset heading margin */
    }

    .voc-page-info { display: flex; flex-direction: column; gap: .2rem; }

    .voc-page-count {
      font-family: 'Raleway', sans-serif;
      font-size: .73rem; letter-spacing: .14em;
      text-transform: uppercase; color: var(--muted);
    }

    .voc-dir-badge {
      display: inline-flex; align-items: center; gap: .35rem;
      font-family: 'Raleway', sans-serif;
      font-size: .72rem; letter-spacing: .1em;
      text-transform: uppercase; color: var(--muted);
    }

    .voc-dir-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
      background: var(--rosso); transition: background .2s;
    }

    .voc-back-btn {
      display: none; /* shown only on mobile */
      align-items: center; gap: .35rem;
      background: none; border: 1px solid var(--carta3);
      cursor: pointer; padding: .4rem .85rem;
      font-family: 'Raleway', sans-serif;
      font-size: .73rem; font-weight: 500;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--muted);
      min-height: 36px;
      transition: color .2s, border-color .2s;
      white-space: nowrap;
    }

    .voc-back-btn:hover { color: var(--rosso); border-color: var(--rosso); }

    /* ── BOOK TABLE ── */
    /* ════ BOOK TABLE — ispirato a vocabolariocalitrano.it ════ */
    .book-table-wrap {
      background: var(--bianco);
      border: 1px solid var(--carta3);
      border-radius: var(--r-sm);
      overflow: hidden;
      /* Ombra libro — spessore + spine oro */
      box-shadow:
        0 2px 0 var(--carta3),
        3px 3px 0 var(--carta2),
        5px 5px 0 rgba(200,150,50,.08);
      position: relative;
    }

    /* Spine sinistra dorata — rilegatura del dizionario */
    .book-table-wrap::after {
      content: '';
      position: absolute; top: 0; left: 0; bottom: 0;
      width: 4px;
      background: linear-gradient(180deg,
        var(--oro-light) 0%, var(--oro) 40%, rgba(139,26,26,.4) 100%);
      z-index: 5; pointer-events: none;
    }

    .book-table {
      width: 100%; border-collapse: collapse;
      table-layout: fixed;          /* colonne stabili, no layout-shift */
      position: relative; z-index: 1;
    }

    /* Proporzioni colonne book-table */
    .book-table col.col-dial     { width: 44%; }
    .book-table col.col-trad     { width: 44%; }
    .book-table col.col-audio-col{ width: 12%; min-width: 52px; }

    /* Intestazione — rosso profondo, elegante */
    .book-table thead tr {
      background: var(--rosso-deep);
      border-bottom: 2px solid var(--oro);
    }

    .book-table thead th {
      padding: .9rem 1rem .9rem 1.4rem;
      font-family: 'Cinzel', serif;
      font-size: .7rem; font-weight: 600;
      letter-spacing: .2em; text-transform: uppercase;
      color: rgba(242,237,226,.75); text-align: left;
      border-right: 1px solid rgba(255,255,255,.06);
      white-space: nowrap;
    }

    .book-table thead th:first-child { padding-left: 1.6rem; } /* compensa spine */
    .book-table thead th:last-child  { border-right: none; text-align: center; }

    /* Righe corpo */
    .book-table tbody tr {
      border-bottom: 1px solid rgba(200,180,150,.25);
      transition: background .12s ease;
    }

    .book-table tbody tr:last-child { border-bottom: none; }

    /* Hover: sfondo carta con accento rosso sottile */
    .book-table tbody tr:hover {
      background: rgba(139,26,26,.038);
    }

    /* Righe pari: alternanza percettibile ma non aggressiva */
    .book-table tbody tr:nth-child(even) {
      background: rgba(237,230,212,.18);
    }
    .book-table tbody tr:nth-child(even):hover {
      background: rgba(139,26,26,.05);
    }

    /* Celle */
    .book-table td {
      padding: .8rem 1rem .8rem 1.4rem;
      vertical-align: middle;
      overflow-wrap: break-word;   /* evita overflow su voci dialettali lunghe */
      word-break: break-word;
    }

    .book-table td:first-child { padding-left: 1.6rem; } /* compensa spine */
    .book-table td:last-child  { text-align: center; }

    /* Colonna dialetto — voce principale */
    .td-dial {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600; font-size: 1.08rem;
      color: var(--rosso); line-height: 1.2;
      letter-spacing: .01em;
    }

    /* Categoria grammaticale — inline dopo la voce */
    .td-cat {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-size: .8rem;
      color: var(--muted); display: block;
      margin-top: .08rem; font-weight: 300;
    }

    /* Colonna italiano — traduzione */
    .td-it {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem; color: var(--ink); line-height: 1.4;
      font-weight: 400;  /* 300 quasi invisibile su Firefox */
    }

    /* Colonna audio */
    .col-audio { width: 52px; text-align: center; }

    .play-btn {
      width: 30px; height: 30px; border-radius: 50%;
      background: transparent;
      border: 1px solid var(--carta3);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--muted); margin: 0 auto;
      transition: background .15s, color .15s, border-color .15s, transform .12s;
      position: relative;
      flex-shrink: 0;
    }

    /* Spinner: anello che ruota sul bordo del bottone durante il loading */
    .play-btn.loading {
      border-color: transparent;
      color: var(--verde);
      cursor: wait;
    }
    .play-btn.loading::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      border: 2px solid var(--carta3);
      border-top-color: var(--verde);
      animation: spin .7s linear infinite;
    }

    /* Playing: colore verde, border pieno */
    .play-btn.playing {
      background: rgba(58,90,40,.1);
      border-color: var(--verde);
      color: var(--verde);
    }
    .play-btn.playing:hover {
      background: rgba(58,90,40,.18);
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .play-btn:hover {
      background: rgba(58,90,40,.1);
      border-color: var(--verde);
      color: var(--verde);
      transform: scale(1.08);
    }

    .play-btn.playing {
      background: var(--verde); border-color: var(--verde); color: #fff;
      animation: pulsePlay .9s ease-in-out infinite;
    }

    @keyframes pulsePlay {
      0%,100% { box-shadow: 0 0 0 0 rgba(58,90,40,.4); }
      50%      { box-shadow: 0 0 0 5px rgba(58,90,40,0); }
    }

    /* Stato empty */
    .voc-empty {
      padding: 3.5rem 1.5rem; text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-size: 1.1rem; color: var(--muted);
    }

    /* ── PAGINATION ── */
    .voc-pagination {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.2rem .8rem;
      border-top: 1px solid var(--carta3);
      background: var(--carta2);
      flex-wrap: wrap; gap: .6rem;
    }

    .voc-page-num {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: .9rem; color: var(--muted);
    }

    .voc-pag-btns { display: flex; gap: .4rem; }

    .voc-pag-btn {
      display: flex; align-items: center; gap: .35rem;
      padding: .45rem .9rem; min-height: 36px;
      background: var(--carta); border: 1px solid var(--carta3);
      font-family: 'Cinzel', serif; font-size: .73rem; font-weight: 600;
      letter-spacing: .1em; color: var(--muted); cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }

    .voc-pag-btn:hover:not(:disabled) {
      background: var(--rosso-deep); color: var(--argento);
      border-color: var(--rosso-deep);
    }

    .voc-pag-btn:disabled { opacity: .35; cursor: not-allowed; }

    /* Rose separator */
    .voc-footer-sep {
      display: flex; align-items: center; gap: 1rem; margin: 1.8rem 0 .5rem;
    }
    .voc-footer-sep::before, .voc-footer-sep::after {
      content: ''; flex: 1; height: 1px; background: var(--carta3);
    }
    .voc-footer-sep img {
      object-fit: contain;
      opacity: .5;
      filter: drop-shadow(0 1px 2px rgba(100,20,20,.15));
    }

    /* Empty state */
    .voc-empty {
      padding: 3rem 1.5rem; text-align: center;
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: 1.1rem; color: var(--muted);
    }

    /* ── TABLE ERROR STATE ── */
    /* Shown inside #table-vocabular when the fetch fails or times out.
       Uses swapTableContent so it inherits the same fade-in transition. */
    .vl-table-error {
      padding: 3rem 1.5rem;
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--rosso-mid);
    }

    /* ── AUDIO ERROR TOAST ── */
    /* Fixed bottom-right notification shown when audio playback fails.
       Toggled between invisible and visible via the .vl-toast--visible class
       so the CSS opacity transition produces a smooth fade-in / fade-out. */
    .vl-toast {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 9000;
      max-width: 320px;
      padding: .75rem 1.1rem;
      background: var(--rosso-deep);
      color: var(--argento);
      font-family: 'Raleway', sans-serif;
      font-size: .85rem;
      font-weight: 500;
      border-left: 3px solid var(--oro);
      border-radius: var(--r-sm);
      box-shadow: 0 4px 16px rgba(26, 21, 16, .35);
      opacity: 0;
      transform: translateY(.5rem);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events: none; /* don't block clicks while fading */
    }

    .vl-toast--visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── RESPONSIVE ── */
    /* Tablet: 600–820px — sidebar vocabolario a colonna */
    @media (max-width: 820px) and (min-width: 601px) {
      .voc-layout {
        grid-template-columns: 1fr;
        padding: 0 1.5rem 2rem;
      }
      .voc-sidebar {
        position: static; height: auto; overflow: visible;
        border-right: none; border-bottom: 2px solid var(--oro);
        padding: 1rem 0;
        display: grid; grid-template-columns: 1fr 1fr;
        gap: .75rem;
      }
      .voc-sidebar-brand { grid-column: 1 / -1; }
      .voc-alpha-label   { grid-column: 1 / -1; }
      .voc-alpha-grid    { grid-column: 1 / -1; grid-template-columns: repeat(11, 1fr); }
      .voc-search-wrap   { grid-column: 1 / -1; }
      .voc-main { padding: 1.2rem 0; }
      .voc-back-btn { display: inline-flex; }
    }

    @media (max-width: 820px) {
      .voc-layout { grid-template-columns: 1fr; padding: 0 1rem 2rem; }

      .voc-sidebar {
        position: static; height: auto; overflow: visible;
        border-right: none; border-bottom: 2px solid var(--oro);
        padding: 1.2rem 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
      }

      .voc-sidebar-brand { grid-column: 1 / -1; padding-bottom: .75rem; }
      .voc-alpha-label   { grid-column: 1 / -1; }
      .voc-alpha-grid    { grid-column: 1 / -1; grid-template-columns: repeat(11, 1fr); }
      .voc-search-wrap   { grid-column: 1 / -1; }

      .voc-main { padding: 1.2rem 0; }
      .voc-back-btn { display: inline-flex; }

      .book-table thead th:nth-child(2) { min-width: 120px; }
      .col-audio { display: none; }
    }

    @media (max-width: 560px) {
      .voc-alpha-grid { grid-template-columns: repeat(8, 1fr); }
      .voc-page-letter { font-size: 2rem; }
    }


    /* ── Voc-list page ── */
    .inner-page-wrap--wide {
      max-width: 920px;
      padding-left: 1.2rem;
      padding-right: 1.2rem;
      /* Assicura contenimento orizzontale */
      width: 100%;
      overflow-x: hidden;
    }

    /* ── Vocabolario list: header compatto ── */
    .vl-header {
      display: flex; align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: .5rem .8rem;
      margin-bottom: 1rem !important;
      padding-bottom: .7rem;
      border-bottom: 2px solid var(--rosso);
    }

    .vl-header-left { min-width: 0; flex: 1 1 auto; }
    .vl-header-right { flex: 0 1 auto; min-width: 0; }

    .vl-title,
    h1.vl-title, h2.vl-title {
      font-family: 'Cinzel', serif;
      font-size: clamp(1.2rem, 3.5vw, 1.7rem);
      font-weight: 700; letter-spacing: .03em;
      color: var(--ink2); line-height: 1.05; margin: 0;
    }

    .vl-subtitle {
      font-family: 'Raleway', sans-serif;
      font-size: .64rem; letter-spacing: .14em;
      text-transform: uppercase; color: var(--ink2);
      margin-top: .25rem;
    }

    /* Server-rendered default visibility — JS overrides on resize */
    .vl-title--hidden,
    .vl-subtitle--hidden { display: none; }

    .vl-count-badge {
      font-family: 'Cinzel', serif;
      font-size: 1rem; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--oro);
      background: rgba(200,146,42,.1);
      border: 1px solid rgba(200,146,42,.25);
      border-radius: var(--r-sm);
      padding: .25rem .6rem;
      /* Su mobile può andare a capo; su tablet+ rimane su una riga */
      white-space: nowrap;
      flex-shrink: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── Toggle direzione voc-list — stesso stile hero ── */
    .vl-lang-toggle {
      display: flex; gap: 6px;
      margin-top: 1.5rem;
      margin-bottom: .75rem;
      background: var(--carta2);
      border: 1px solid var(--carta3);
      border-radius: 6px;
      padding: 4px;
      width: 100%;
      /* Assicura che non ecceda il contenitore */
      box-sizing: border-box;
      overflow: hidden;
    }

    .vl-lang-pill {
      flex: 1; padding: .62rem .75rem;
      font-family: 'Raleway', sans-serif;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .05em; text-transform: uppercase;
      color: var(--muted);
      background: transparent; border: none; cursor: pointer;
      border-radius: 4px;
      min-height: 44px;
      /* Flex interno per label + freccia + label */
      display: flex; align-items: center; justify-content: center;
      gap: .35rem;
      /* Evita overflow: i label possono ridursi */
      min-width: 0;
      overflow: hidden;
      transition: background .18s, color .18s, box-shadow .18s;
    }

    .pill-label {
      /* Testo pill: tronca se necessario, non rompe layout */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      flex-shrink: 1;
    }

    .pill-arrow {
      flex-shrink: 0; /* la freccia non si comprime mai */
      display: block;
    }

    .vl-lang-pill.active {
      background: var(--rosso-deep); color: var(--argento);
      box-shadow: 0 1px 4px rgba(94,14,14,.25);
    }

    .vl-lang-pill:not(.active):hover {
      background: var(--carta3); color: var(--ink);
    }

    /* Search box voc-list — stesso stile hero */
    .vl-search-box {
      display: flex;
      border: 2px solid var(--rosso);
      background: var(--bianco);
      border-radius: var(--r-sm);
      box-shadow: 0 4px 16px rgba(139,26,26,.1), 0 2px 6px rgba(80,10,10,.06);
      overflow: hidden;
      margin-bottom: .75rem;
      transition: border-color .2s, box-shadow .2s;
    }

    .vl-search-box:focus-within {
      border-color: var(--oro);
      box-shadow: 0 6px 24px rgba(200,146,42,.18), 0 2px 6px rgba(80,10,10,.08);
    }

    /* Striscia colore sinistra — indica direzione */
    .vl-search-bar {
      width: 4px; flex-shrink: 0;
      background: var(--rosso);
      transition: background .2s;
    }

    .vl-search-bar.it { background: var(--verde); }

    .vl-search-input {
      flex: 1; min-width: 0;
      background: transparent; border: none; outline: none;
      padding: 0 .9rem; height: 44px;
      font-family: 'Raleway', sans-serif; font-style: normal; font-weight: 400;
      font-size: max(16px, 1rem); color: var(--ink);
    }

    .vl-search-input::placeholder { color: var(--muted); font-style: normal; }

    .vl-search-go {
      background: var(--rosso); border: none; cursor: pointer;
      width: 44px; height: 44px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--argento);
      min-width: 44px; min-height: 44px;
      transition: background .2s;
    }

    .vl-search-go:hover  { background: var(--rosso-mid); }
    .vl-search-go:active { background: var(--rosso-deep); }


    .vl-search-hint {
      font-family: 'Raleway', sans-serif;
      font-size: .8rem; font-weight: 400;
      color: var(--ink2);
      margin-bottom: .9rem;
      display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    }

    .vl-hint-search-btn {
      background: none; border: none; cursor: pointer;
      font-family: 'Raleway', sans-serif;
      font-size: .8rem; font-weight: 600;
      color: var(--rosso);
      display: inline-flex; align-items: center; gap: .35rem;
      padding: 0;
      text-decoration: underline;
      text-decoration-color: rgba(139,26,26,.3);
      transition: text-decoration-color .2s, color .2s;
    }
    .vl-hint-search-btn:hover { color: var(--rosso-mid); text-decoration-color: var(--rosso); }

    /* Alpha index */
    .vl-alpha {
      display: flex;
      flex-wrap: nowrap;          /* singola riga */
      gap: 4px;
      margin-bottom: 1rem;
      overflow-x: auto;           /* scroll orizzontale se non entra */
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding-bottom: 2px;        /* spazio per scrollbar nascosta */
      /* Nascondi scrollbar ma mantieni funzionalità */
      scrollbar-width: none;
      justify-content: space-around;
    }
    .vl-alpha::-webkit-scrollbar { display: none; }

    .vl-alpha-btn {
      width: 32px; height: 32px;
      flex-shrink: 0;             /* non si comprime mai */
      scroll-snap-align: start;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 600;
      color: var(--muted); background: transparent;
      border: 1px solid var(--carta3); cursor: pointer;
      border-radius: 3px;
      transition: background .15s, color .15s, border-color .15s;
    }
    .vl-alpha-btn:hover    { background: var(--carta2); color: var(--ink); }
    .vl-alpha-btn.has-data { border-color: var(--rosso); color: var(--rosso); }
    .vl-alpha-btn.has-data:hover { background: var(--rosso); color: var(--argento); border-color: var(--rosso); }
    .vl-alpha-btn.active   { background: var(--rosso-deep) !important; color: var(--argento) !important; border-color: var(--rosso-deep) !important; }

    .vl-table-loading {
      padding: 2rem 1.5rem;
      font-family: 'Raleway', sans-serif; font-size: .82rem;
      letter-spacing: .08em; color: var(--muted);
      text-align: center;
    }

    /* ── Table container fade transitions ── */
    #table-vocabular {
      transition: opacity 220ms ease;
    }

    /* Applied while content is being swapped out (fetch started) */
    #table-vocabular.vl-is-loading {
      opacity: 0;
      pointer-events: none; /* prevent interaction during transition */
    }

    /* tbody-only fade — used for pagination / letter / search updates so that
       <thead> stays visible while new rows load. Mirrors the wrapper rule above. */
    #table-vocabular .vl-table tbody {
      transition: opacity 220ms ease;
    }

    #table-vocabular .vl-table tbody.vl-is-loading {
      opacity: 0;
      pointer-events: none;
    }

    /* Tabella vocabolario lista */
    /* ── Tabella vocabolario ── */
    .vl-table-wrap {
      background: var(--bianco);
      border: 1px solid var(--carta3);
      border-radius: var(--r-sm);
      overflow: hidden;                 /* clip decorazione bordi arrotondati */
      box-shadow: 0 2px 0 var(--carta3), 2px 2px 0 rgba(200,150,50,.1);
      position: relative;
      max-width: 100%;
      width: 100%;
    }

    /* Spine dorata sinistra — rimane ancorata: non scorre con la tabella */
    .vl-table-wrap::after {
      content: ''; position: absolute; top: 0; left: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--oro-light), var(--oro) 40%, rgba(139,26,26,.3) 100%);
      z-index: 5; pointer-events: none;
    }

    /* Contenitore scroll orizzontale — solo la tabella scorre, non la paginazione */
    .vl-table-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      /* Scrollbar sottile su sistemi che la mostrano */
      scrollbar-width: thin;
      scrollbar-color: var(--carta3) transparent;
    }
    .vl-table-scroll::-webkit-scrollbar { height: 4px; }
    .vl-table-scroll::-webkit-scrollbar-track { background: transparent; }
    .vl-table-scroll::-webkit-scrollbar-thumb { background: var(--carta3); border-radius: 2px; }

    .vl-table {
      width: 100%; border-collapse: collapse;
      table-layout: fixed;             /* colonne a larghezza fissa */
      /* larghezza minima: garantisce leggibilità senza overflow */
      min-width: 320px;
    }

    /* Colonne proporzionate: dialetto 43%, italiano 43%, dizione 14% */
    .vl-table col.col-d  { width: 43%; }   /* dialetto */
    .vl-table col.col-it { width: 43%; }   /* italiano */
    .vl-table col.col-dz { width: 14%; min-width: 44px; } /* dizione */

    .vl-table thead tr {
      background: var(--rosso-deep);
      border-bottom: 2px solid var(--oro);
    }

    .vl-table thead th {
      padding: .62rem .6rem .62rem .9rem;
      font-family: 'Cinzel', serif;
      font-size: .58rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: rgba(242,237,226,.75); text-align: left;
      border-right: 1px solid rgba(255,255,255,.06);
      white-space: nowrap; overflow: hidden;
    }
    .vl-table thead th:first-child { padding-left: 1rem; }
    .vl-table thead th:last-child  { border-right: none; text-align: center; }

    /* Righe */
    .vl-table tbody tr {
      border-bottom: 1px solid rgba(200,180,150,.18);
      transition: background .1s;
    }
    .vl-table tbody tr:last-child { border-bottom: none; }
    .vl-table tbody tr:hover      { background: rgba(139,26,26,.035); }
    .vl-table tbody tr:nth-child(even) { background: rgba(237,230,212,.15); }
    .vl-table tbody tr:nth-child(even):hover { background: rgba(139,26,26,.05); }

    /* Celle */
    .vl-table td {
      padding: .55rem .5rem .55rem .8rem;
      vertical-align: middle;
      overflow-wrap: break-word;
      word-break: break-word;
      /* non usare overflow: hidden — clip silenzioso del testo */
    }
    .vl-table td:first-child { padding-left: 1rem; }
    .vl-table td:last-child  { text-align: center; vertical-align: middle; }

    /* Testo celle — base mobile-first */
    .vl-td-dial {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600; font-size: .88rem;
      color: var(--rosso); line-height: 1.2;
      word-break: break-word;
    }
    .vl-td-cat {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-size: .64rem;
      color: var(--muted); display: block; margin-top: .03rem;
    }
    .vl-td-it {
      font-family: 'Cormorant Garamond', serif;
      font-size: .86rem; color: var(--ink2);
      font-weight: 600; line-height: 1.35;
      word-break: break-word;
    }

    /* Bottone play */
    .vl-play-btn {
      width: 30px; height: 30px; border-radius: 50%;
      background: transparent; border: 1px solid var(--carta3);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--muted); margin: 0 auto;
      flex-shrink: 0;
      position: relative;
      transition: background .15s, color .15s, border-color .15s;
    }
    .vl-play-btn:hover:not(.loading):not(.playing) {
      background: rgba(58,90,40,.1);
      border-color: var(--verde); color: var(--verde);
    }
    .vl-play-btn.loading {
      border-color: transparent;
      color: var(--verde);
      cursor: wait;
    }
    .vl-play-btn.loading::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      border: 2px solid var(--carta3);
      border-top-color: var(--verde);
      animation: spin .7s linear infinite;
    }
    .vl-play-btn.playing {
      background: rgba(58,90,40,.1);
      border-color: var(--verde);
      color: var(--verde);
    }
    .vl-play-btn.playing:hover {
      background: rgba(58,90,40,.18);
    }

    /* Paginazione */
    .vl-pagination {
      display: flex; align-items: center;
      justify-content: center; gap: 1rem;
      padding: .9rem 1rem .8rem 1.2rem;
      background: var(--carta2);
      border-top: 1px solid var(--carta3);
      flex-wrap: wrap;
    }
    .vl-count {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-size: .92rem; color: var(--muted);
      flex-basis: 100%; text-align: center; margin-bottom: .3rem;
    }
    .vl-pag-btns { display: flex; align-items: center; gap: .6rem; }
    .vl-page-num {
      font-family: 'Raleway', sans-serif;
      font-size: .82rem; letter-spacing: .1em; color: var(--muted);
      min-width: 52px; text-align: center;
    }
    .vl-pag-btn {
      /* visual size increased; tap target stays ≥44px via ::after */
      width: 40px; height: 40px; border-radius: var(--r-sm);
      background: var(--carta); border: 1px solid var(--carta3);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--muted);
      transition: background .15s, color .15s;
      position: relative; flex-shrink: 0;
    }
    /* Invisible tap-target expansion — does not affect layout */
    .vl-pag-btn::after {
      content: '';
      position: absolute;
      inset: 50% 50%;
      transform: translate(-50%, -50%);
      min-width: 44px;
      min-height: 44px;
    }
    .vl-pag-btn svg { width: 14px; height: 14px; }
    .vl-pag-btn:hover:not(:disabled) {
      background: var(--rosso-deep); color: var(--argento);
      border-color: var(--rosso-deep);
    }
    .vl-pag-btn:disabled { opacity: .3; cursor: not-allowed; }

    /* CTA apri vocabolario completo */
    .vl-open-full { margin-top: 1.5rem; text-align: center; }
    .vl-open-btn {
      display: inline-flex; align-items: center; gap: .6rem;
      padding: .8rem 2rem;
      background: var(--rosso); color: var(--argento);
      font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 600;
      letter-spacing: .14em; text-transform: uppercase;
      border: none; cursor: pointer; border-radius: var(--r-sm);
      transition: background .2s, transform .15s;
    }
    .vl-open-btn:hover { background: var(--rosso-mid); transform: translateY(-1px); }

    /* Tablet: 601px — 1024px — leggero aumento rispetto al mobile base */
    @media (min-width: 601px) and (max-width: 1024px) {
      .vl-td-dial { font-size: .95rem; }
      .vl-td-it   { font-size: .93rem; }
      .vl-td-cat  { font-size: .67rem; }

      /* Pagination tablet */
      .vl-pagination { justify-content: center; gap: 1.1rem; padding: .8rem 1rem; }
      .vl-count { flex-basis: 100%; text-align: center; margin-bottom: .3rem; font-size: .9rem; }
      .vl-page-num { font-size: .8rem; min-width: 50px; }
      .vl-pag-btn { width: 38px; height: 38px; }
      .vl-pag-btn svg { width: 13px; height: 13px; }
    }

    /* Desktop: > 1024px — dimensioni full, solo qui si ingrandisce */
    @media (min-width: 1025px) {
      .vl-td-dial { font-size: 1.13rem; }
      .vl-td-it   { font-size: 1.08rem; }
      .vl-td-cat  { font-size: .76rem; }

      /* Pagination desktop — spread layout */
      .vl-pagination { justify-content: space-between; gap: 1.5rem; }
      .vl-count { flex-basis: auto; margin-bottom: 0; font-size: .95rem; }
      .vl-pag-btns { margin-left: auto; gap: .7rem; }
      .vl-page-num { font-size: .86rem; min-width: 56px; }
      .vl-pag-btn { width: 42px; height: 42px; }
      .vl-pag-btn svg { width: 15px; height: 15px; }
    }

    @media (max-width: 600px) {
      /* Header */
      .vl-header {flex-wrap: wrap; }
      .vl-title { font-size: 1.2rem; }

      /* Toggle direzione — compatto su mobile */
      .vl-lang-toggle { padding: 3px; gap: 4px; }
      .vl-lang-pill {
        font-size: .65rem;
        padding: .5rem .5rem;
        gap: .3rem;
        min-height: 38px;
      }
      .pill-arrow { width: 11px; height: 7px; flex-shrink: 0; }

      /* Mobile: show dizione column by reducing text columns */
      .vl-table col.col-d  { width: 38%; }
      .vl-table col.col-it { width: 38%; }
      .vl-table col.col-dz { width: 24%; min-width: 44px; }

      /* Padding celle mobile */
      .vl-table td, .vl-table thead th { padding: .4rem .35rem .4rem .6rem; }
      .vl-table td:first-child,
      .vl-table thead th:first-child { padding-left: .75rem; }

      /* Pagination mobile */
      .vl-pagination { padding: .7rem .9rem; gap: .8rem; }
      .vl-count { font-size: .82rem; margin-bottom: .2rem; }
      .vl-page-num { font-size: .76rem; min-width: 42px; }
      .vl-pag-btn { width: 36px; height: 36px; }
      .vl-pag-btn svg { width: 13px; height: 13px; }

      /* Font già al minimo nel base — nessuna riduzione aggiuntiva */

      /* Search hint — slight scale-down on mobile */
      .vl-search-hint { font-size: .75rem; margin-bottom: .75rem; gap: .35rem; }
      .vl-hint-search-btn { font-size: .75rem; gap: .3rem; }

      .inner-page-wrap--wide { padding: 2rem .75rem 2.25rem; }
    }

    /* Extra-small: < 360px — ulteriore compressione */
    @media (max-width: 360px) {
      .vl-lang-pill { font-size: .6rem; padding: .45rem .4rem; }
      .pill-label { letter-spacing: 0; }

      /* Pagination extra-small */
      .vl-pagination { padding: .6rem .7rem; gap: .6rem; }
      .vl-count { font-size: .78rem; margin-bottom: .15rem; }
      .vl-page-num { font-size: .7rem; min-width: 38px; }
      .vl-pag-btn { width: 34px; height: 34px; }
      .vl-pag-btn svg { width: 12px; height: 12px; }

      /* Search hint — minimum legible size on tiny screens */
      .vl-search-hint { font-size: .72rem; margin-bottom: .65rem; gap: .3rem; }
      .vl-hint-search-btn { font-size: .72rem; gap: .25rem; }
    }

    /* ── Label ricerca voc-list ── */
    .vl-search-label {
      font-family: 'Raleway', sans-serif;
      font-size: .68rem; font-weight: 500;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted);
      margin-bottom: .35rem;
    }
    .vl-search-label strong {
      color: var(--rosso); font-weight: 700;
      font-family: 'Cinzel', serif;
    }