/* RC88 · pagina di lettura dei racconti documentaristici dei capoluoghi.
   Contiene il menu delle città per regione e l'area di lettura. I paragrafi
   statici di servizio restano nascosti: vengono sostituiti dal menu appena il
   modulo è pronto, ma se il modulo non si carica il testo di prova è comunque
   leggibile. */

.narrative-admin-entry {
  border-color: rgba(255, 210, 122, .42) !important;
  background: linear-gradient(135deg, #2b2f3a, #17191f) !important;
  color: #ffd27a !important;
}

.narrative-admin-entry:hover {
  filter: brightness(1.14) saturate(1.05);
}

.narrative-admin-entry:focus-visible {
  outline: 3px solid rgba(255, 210, 122, .55);
  outline-offset: 3px;
}

.narrative-page {
  min-height: 100vh;
  padding: clamp(16px, 4vw, 42px) clamp(12px, 4vw, 32px) 64px;
  background: radial-gradient(120% 90% at 12% 0%, #2d3038 0%, #1b1d23 58%, #171a1f 100%);
  color: #f3eee5;
}

.narrative-page[hidden] {
  display: none !important;
}

.narrative-shell {
  width: min(1020px, 100%);
  margin: 0 auto;
}

.narrative-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid #ffffff1c;
}

.narrative-eyebrow {
  margin: 0 0 10px;
  color: #ffd27a;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.narrative-head h1 {
  margin: 0;
  color: #fffaf0;
  font: 900 clamp(1.7rem, 4.4vw, 2.8rem)/1.04 Georgia, serif;
}

.narrative-lead {
  margin: 12px 0 0;
  max-width: 68ch;
  color: #cbc6bf;
  font-size: .95rem;
  line-height: 1.55;
}

.narrative-back {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid #ffd27a66;
  border-radius: 11px;
  background: #ffd27a16;
  color: #fff0bd;
  font: 850 .78rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.narrative-back:hover {
  background: #ffd27a2b;
}

.narrative-back:focus-visible {
  outline: 3px solid #ffd27a80;
  outline-offset: 3px;
}

/* Menu dei capoluoghi: gruppi per regione, un pulsante per città. */
.narrative-picker {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #ffffff1c;
  border-radius: 20px;
  background: #ffffff08;
}

.narrative-picker-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 16px;
}

.narrative-picker-title {
  margin: 0;
  color: #fffaf0;
  font: 900 clamp(1.05rem, 2.4vw, 1.35rem)/1.2 Georgia, serif;
}

.narrative-picker-hint {
  margin: 0;
  color: #aeb4bd;
  font-size: .8rem;
  line-height: 1.4;
}

.narrative-group + .narrative-group {
  margin-top: 16px;
}

.narrative-group-title {
  margin: 0 0 9px;
  color: #ffd27a;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.narrative-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.narrative-chip {
  display: grid;
  gap: 2px;
  min-height: 46px;
  min-width: 132px;
  padding: 8px 14px;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  background: #14161c;
  color: #f3eee5;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.narrative-chip:hover {
  border-color: #ffd27a80;
  background: #1d2027;
  transform: translateY(-1px);
}

.narrative-chip:focus-visible {
  outline: 3px solid #ffd27a80;
  outline-offset: 2px;
}

.narrative-chip.is-active {
  border-color: #ffd27a;
  background: linear-gradient(135deg, #ffd27a2e, #ffd27a12);
}

.narrative-chip-city {
  font: 850 .92rem/1.2 system-ui, sans-serif;
}

.narrative-chip-province {
  color: #aeb4bd;
  font: 700 .7rem/1.25 system-ui, sans-serif;
}

.narrative-chip.is-active .narrative-chip-city {
  color: #fff6df;
}

.narrative-chip.is-active .narrative-chip-province {
  color: #ffd27a;
}

.narrative-article {
  margin-top: 28px;
}

.narrative-meta {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ffffff1c;
  color: #aeb4bd;
  font: 800 .74rem/1.4 system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.narrative-audio {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  background: #ffffff0d;
}

.narrative-audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.narrative-audio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  background: #ffffff14;
  color: #f3eee5;
  cursor: pointer;
  font: 800 .86rem/1 system-ui, sans-serif;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.narrative-audio-button:hover:not(:disabled) {
  background: #ffffff24;
  transform: translateY(-1px);
}

.narrative-audio-button:focus-visible {
  outline: 3px solid rgba(255, 210, 122, .5);
  outline-offset: 3px;
}

.narrative-audio-button:disabled {
  opacity: .55;
  cursor: progress;
}

.narrative-audio-button.is-primary {
  border-color: #ffd27a66;
  background: linear-gradient(135deg, #3d3423, #201d16);
  color: #ffd27a;
}

.narrative-audio-button.is-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #4a3f29, #262218);
}

.narrative-audio-status {
  margin-top: 12px;
  color: #cbc6bf;
  font: 750 .8rem/1.45 system-ui, sans-serif;
}

.narrative-audio-status:empty {
  display: none;
}

.narrative-audio-status[data-state="busy"] {
  color: #ffd27a;
}

.narrative-audio-status[data-state="ok"] {
  color: #9fe0b0;
}

.narrative-audio-status[data-state="error"] {
  color: #ffb3a0;
}

.narrative-audio-hint {
  margin-top: 8px;
  color: #8d9199;
  font: 600 .74rem/1.5 system-ui, sans-serif;
}

.narrative-audio-link {
  color: #ffd27a;
  font-weight: 800;
}

.narrative-article p {
  margin: 0 0 19px;
  color: #f3eee5;
  font: 500 clamp(1rem, 1.4vw, 1.15rem)/1.75 Georgia, serif;
}

.narrative-article p.narrative-meta {
  color: #aeb4bd;
  font: 800 .74rem/1.4 system-ui, sans-serif;
}

.narrative-article p:first-of-type:not(.narrative-meta)::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  color: #ffd27a;
  font-size: 2.6em;
  line-height: .88;
}

.narrative-notice {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #ffac9855;
  border-radius: 12px;
  background: #ffac9814;
  color: #ffd7cb;
  font: 700 .9rem/1.5 system-ui, sans-serif;
}

.narrative-source {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ffffff1c;
  color: #aeb4bd;
  font-size: .74rem;
  line-height: 1.5;
}

/* Ingresso di servizio: si vede solo se la barra comandi non è disponibile,
   cioè quando l'avvio dell'app si è interrotto. Sta sopra il pulsante
   dell'area riservata, con la stessa forma e la stessa misura. */
.narrative-fallback-trigger {
  display: none;
}

.narrative-fallback-trigger:not([hidden]) {
  display: flex;
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 48px);
  z-index: 81;
  align-items: center;
  min-height: 44px;
  max-width: min(76vw, 300px);
  padding: 0 14px;
  border: 1px solid #ffd27a66;
  border-radius: 999px;
  background: linear-gradient(135deg, #2b2f3a, #17191f);
  color: #ffd27a;
  box-shadow: 0 10px 26px #0006;
  cursor: pointer;
  font: 850 11.5px/1.2 system-ui, sans-serif;
  letter-spacing: .02em;
  text-align: left;
}

.narrative-fallback-trigger:not([hidden]):hover {
  filter: brightness(1.14) saturate(1.05);
  transform: translateY(-1px);
}

.narrative-fallback-trigger:not([hidden]):focus-visible {
  outline: 3px solid rgba(255, 210, 122, .55);
  outline-offset: 3px;
}

/* Secondo ingresso di servizio (racconti dei monumenti): sta sopra quello dei
   capoluoghi, con la stessa forma, per non sovrapporsi né al primo né al
   pulsante dell'area riservata. */
.narrative-fallback-trigger--upper:not([hidden]) {
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 98px);
  z-index: 82;
}

/* I nomi dei monumenti sono più lunghi dei nomi delle città: il pulsante del
   menu si adatta su due righe invece di tagliare il testo. */
.narrative-chip-city {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .narrative-page {
    padding: 16px 14px 48px;
  }

  .narrative-audio-button {
    flex: 1 1 100%;
  }

  .narrative-head {
    display: grid;
  }

  .narrative-back {
    justify-self: start;
  }

  .narrative-picker {
    padding: 14px;
    border-radius: 16px;
  }

  .narrative-chip {
    flex: 1 1 46%;
    min-width: 0;
    min-height: 48px;
  }

  .narrative-fallback-trigger--upper:not([hidden]) {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 96px);
  }
}

/* ── Fondo scuro della lettura ─────────────────────────────────────────
   La pagina dei racconti dei monumenti ha un identificativo proprio
   (#monumentsStoriesPage): prima condivideva #monumentsPage con la vetrina
   dei tesori, che ha una superficie chiara imposta con !important dai fogli
   della Home. Quelle regole arrivavano anche qui e il testo chiaro spariva
   sul fondo crema. La superficie scura della lettura resta comunque fissata
   con precedenza sulla regola generica. */
#monumentsStoriesPage.narrative-page {
  background: radial-gradient(120% 90% at 12% 0%, #2d3038 0%, #1b1d23 58%, #171a1f 100%) !important;
  color: #f3eee5 !important;
}

#monumentsStoriesPage.narrative-page h1 {
  color: #fffaf0 !important;
}

#monumentsStoriesPage.narrative-page .narrative-lead {
  color: #cbc6bf !important;
}

/* Nella dashboard /mao i racconti non stanno su una pagina scura ma dentro un
   pannello chiaro: senza un fondo proprio il testo chiaro non si leggeva.
   Ogni racconto riceve la stessa superficie scura della pagina di lettura. */
#maoNarrativePreview .narrative-shell {
  margin: 0 0 26px;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid #ffd27a55;
  border-radius: 22px;
  background: linear-gradient(135deg, #2d3038 0%, #1e2027 68%, #362c20 100%);
  box-shadow: 0 20px 48px #0004;
  color: #f3eee5;
}

#maoNarrativePreview .narrative-shell:last-child {
  margin-bottom: 0;
}

#maoNarrativePreview .narrative-head {
  padding-bottom: 18px;
}

#maoNarrativePreview .narrative-article p {
  color: #f3eee5;
}

/* Rimandi dentro il racconto: il nome di un altro luogo resta una parola del
   testo, ma si tocca. Nessun colore acceso, nessuna icona: solo una riga
   dorata sotto il nome, come una nota a margine. */
.narrative-mention {
  display: inline;
  margin: 0;
  padding: 0 1px;
  border: 0;
  border-bottom: 1px dashed #ffd27a99;
  background: transparent;
  color: #ffd27a;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.narrative-mention:hover {
  border-bottom-style: solid;
  background: #ffd27a1f;
}

.narrative-mention:focus-visible {
  outline: 3px solid #ffd27a80;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Fascia dei racconti collegati, in fondo alla lettura. */
.narrative-related {
  display: grid;
  gap: 13px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #ffffff1c;
}

.narrative-related-head {
  display: grid;
  gap: 5px;
}

.narrative-related-title {
  margin: 0;
  color: #ffd27a;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.narrative-related-hint {
  margin: 0;
  max-width: 62ch;
  color: #aeb4bd;
  font-size: .82rem;
  line-height: 1.5;
}

.narrative-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.narrative-related-chip {
  display: grid;
  gap: 2px;
  min-height: 44px;
  max-width: 100%;
  padding: 9px 13px;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  background: #ffffff0a;
  color: #fffaf0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.narrative-related-chip:hover {
  transform: translateY(-1px);
  border-color: #ffd27a99;
  background: #ffd27a14;
}

.narrative-related-chip:focus-visible {
  outline: 3px solid #ffd27a66;
  outline-offset: 2px;
}

.narrative-related-chip strong {
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.2;
}

.narrative-related-chip small {
  color: #aeb4bd;
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.25;
}

.narrative-related-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.narrative-related-place {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid #ffd27a66;
  border-radius: 11px;
  background: #ffd27a16;
  color: #fff0bd;
  font: 850 .8rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .16s ease;
}

.narrative-related-place:hover {
  background: #ffd27a2b;
}

.narrative-related-place:focus-visible {
  outline: 3px solid #ffd27a80;
  outline-offset: 3px;
}

.narrative-related-status {
  margin: 0;
  color: #ffac98;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.4;
}

.narrative-related-status:empty {
  display: none;
}

@media (max-width: 640px) {
  .narrative-related-chip {
    flex: 1 1 100%;
  }

  .narrative-related-place {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .narrative-related-chip,
  .narrative-related-place {
    transition: none;
  }
}