/* condivisi.css — Quello che serve a piu' schermate: l'accesso a Help e «Spiegazione», la
   tendina condivisa e il Pannello Admin.

   Uscito da `index.html` il 2026-09-20 (passo 1.1), dove il CSS era il 70%
   del file. ⚠️ L'ORDINE DEI `<link>` E' LA CASCATA: questi fogli sono stati
   tagliati dal foglio unico SENZA riordinare niente, e vanno caricati
   nell'ordine in cui `index.html` li elenca. Spostarne uno cambia quali
   regole vincono, e non alza nessun errore.

   Le regole 2, 3 e 12 di CLAUDE.md valgono qui come valevano prima:
   nessun colore fisso fuori dai temi, nessun valore modificabile nel CSS,
   e la guardia `[hidden]` non si tocca (sta in `base.css`). */

  /* ============================================================
     SHARED: Help entry point (+ "Spiegazione") — every module drops
     these two buttons into its .header-actions-row (see .header-2row
     in `stile/guscio.css`), wired to openHowItWorksOverlay()/openHelpFor().
     .header-actions-row > .btn already sets the sizing that applies to
     every button there, .help-btn is just the semantic/JS-hook marker.
     ============================================================ */
  .help-btn {}

  /* ---------- shared overlay (instructions + help panel) ---------- */
  .overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
  }

  .overlay.is-open { display: flex; }

  .overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 8, 0.55);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  .overlay-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Config panel only: same overlay panel, just wider — it holds many
     grouped fields, not a paragraph of text. */
  .overlay-panel-wide { max-width: 720px; }

  .overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .overlay-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text);
    opacity: 0.6;
    cursor: pointer;
    padding: 4px;
  }

  .overlay-close:hover { opacity: 1; color: var(--accent); }

  .overlay-close:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  .overlay-text { font-size: 0.92rem; opacity: 0.85; line-height: 1.5; text-align: left; }
  .overlay-text p { margin: 0 0 10px; }
  .overlay-text p:last-child { margin-bottom: 0; }

  /* Job: the Spiegazione popup must match the full-screen version —
     title + module name centered, body left-aligned (.overlay-text
     above already is). .overlay-header is shared with overlays that DO
     need a left title + close-X (Help, config panel), so this centers
     only the Spiegazione popup's own title, forcing it to the row's
     full width regardless of the shared header's space-between. */
  #howitworks-overlay-title {
    width: 100%;
    text-align: center;
  }

  .help-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .help-option {
    text-align: left;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .help-option:hover { border-color: var(--accent); color: var(--accent); }

  .help-option:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  .help-option-urgent { border-color: color-mix(in srgb, var(--wrong-ink) 45%, var(--border)); }

  .overlay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  /* ---------- hidden config panel (embryo of the future Admin panel) ----------
     Reuses .overlay/.overlay-panel-wide/.overlay-header/.overlay-close/
     .overlay-actions/input[type=text]/textarea verbatim (CLAUDE.md rule
     5/13) — only the field-group layout below is new. */
  .config-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .config-group {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 14px;
  }

  .config-group summary {
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.75;
    cursor: pointer;
  }

  .config-group-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 14px;
  }

  .config-subgroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 14px;
    border-left: 2px solid var(--border);
  }

  .config-subgroup-label {
    font-size: 0.76rem;
    opacity: 0.65;
    margin: 0;
  }

  .config-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .config-field-label {
    font-size: 0.76rem;
    color: var(--text);
    opacity: 0.65;
    font-family: var(--font-mono);
  }

  .config-field-hint { opacity: 0.6; text-transform: none; letter-spacing: 0; }

  /* Per-parameter description (CONFIG.configFieldDescriptions) — small,
     secondary tone, plain (not mono/uppercase like .config-field-label
     above it) so it reads as a sentence, not a technical caption. */
  .config-field-description {
    font-size: 0.76rem;
    opacity: 0.6;
    margin: 0;
  }

  .config-field-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .config-field-json textarea {
    font-family: var(--font-mono);
    font-size: 0.82rem;
  }

  .config-field-error {
    font-size: 0.78rem;
    color: var(--wrong-ink);
  }

  /* Read-only usage rows (job 6c, #config-audio-usage) — plain label/value
     pairs, not editable fields, so deliberately NOT .config-field. */
  .config-audio-usage-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
    padding: 3px 0;
  }

  /* La chiave e' lunga (voicepractice:d-1:0) e deve restare leggibile su un
     telefono: mono, piccola, e libera di andare a capo invece di spingere il
     pannello fuori dallo schermo. */
  .config-mastery-row {
    align-items: baseline;
  }

  .config-mastery-key {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    word-break: break-all;
  }

  .config-mastery-level {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .config-mastery-level[data-level="rosso"] { color: var(--wrong-ink); }
  .config-mastery-level[data-level="giallo"] { color: var(--similar-ink); }
  .config-mastery-level[data-level="verde"] { color: var(--correct-ink); }

  .config-audio-usage-total {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 7px;
    font-weight: 600;
  }

  /* La vista di riordino delle sequenze (see renderModuleOrderField) — one
     row per module id, up/down buttons instead of a raw JSON textarea. */
  /* ⚠️ E LA LISTA DEGLI EPISODI USA LE STESSE REGOLE, dal 2026-09-26: il
     selettore e' condiviso e non duplicato. *Due liste che nel codice sono
     gemelle (renderEpisodeOrderRows e renderModuleOrderRows) devono essere
     gemelle anche qui, o divergono al primo ritocco — regola 11.* Le RIGHE
     infatti portano già la stessa classe `config-module-order-row`: qui si
     aggiunge solo il contenitore. */
  .config-module-order-list,
  .config-episode-order-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .config-module-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-2);
  }

  .config-module-order-label {
    font-size: 0.85rem;
  }

  .config-module-order-controls {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }

  /* Il grado della riga: stesso .btn.btn-secondary.btn-sm delle frecce
     (CLAUDE.md regola 5), con una larghezza fissa perché la colonna non
     salti passando da "A" a "–". */
  /* Riga spenta: si vede che c'e' ma si legge come "fuori dall'episodio",
     senza sparire dalla vista di riordino — e' li' che la si riaccende. */
  .config-module-order-row.is-off .config-module-order-label {
    opacity: 0.45;
    text-decoration: line-through;
  }

  .config-module-order-grade {
    min-width: 30px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
  }