/* MH Cerca Video — stile dell'interfaccia di ricerca.
   Tutto è annidato sotto .mhrag: nessuna regola tocca il resto della pagina.
   I colori arrivano dai temi reali dei due siti (club smeraldo, .com sabbia/oro)
   e passano da variabili, così il tema si sceglie con una sola classe. */

.mhrag {
  --mhrag-bg:        #ffffff;
  --mhrag-panel:     #f7f7f7;
  --mhrag-ink:       #2b2f36;
  --mhrag-ink-soft:  #4b4f58;
  --mhrag-ink-mute:  #858a92;
  --mhrag-rule:      #e4e4e2;
  --mhrag-accent:    #019e7c;
  --mhrag-accent-ink:#ffffff;
  --mhrag-accent-sf: #e4f4f0;
  --mhrag-danger:    #a3342a;
  --mhrag-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color: var(--mhrag-ink);
  line-height: 1.6;
}

.mhrag--mhcom {
  --mhrag-bg:        #fffdf8;
  --mhrag-panel:     #f2f0e6;
  --mhrag-ink:       #333022;
  --mhrag-ink-soft:  #57523c;
  --mhrag-ink-mute:  #857f66;
  --mhrag-rule:      #e0d9c6;
  --mhrag-accent:    #a37a00;
  --mhrag-accent-ink:#ffffff;
  --mhrag-accent-sf: #efe6cd;
}

.mhrag *,
.mhrag *::before,
.mhrag *::after { box-sizing: border-box; }

.mhrag-intro {
  max-width: 58ch;
  margin: 0 0 1.15rem;
  color: var(--mhrag-ink-soft);
}

/* ---------- pannello "come funziona" ---------- */

.mhrag-howto {
  border: 1px solid var(--mhrag-rule);
  background: var(--mhrag-panel);
  margin: 0 0 1.15rem;
}
.mhrag-howto > summary {
  cursor: pointer;
  list-style: none;
  padding: .7rem .95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--mhrag-ink);
}
.mhrag-howto > summary::-webkit-details-marker { display: none; }
.mhrag-howto > summary::before {
  content: "";
  width: .42rem;
  height: .42rem;
  flex: none;
  border-right: 2px solid var(--mhrag-accent);
  border-bottom: 2px solid var(--mhrag-accent);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.mhrag-howto[open] > summary::before { transform: rotate(45deg); }
.mhrag-howto > summary:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: -2px; }

.mhrag-howto-body { padding: 0 .95rem 1rem 2rem; }
.mhrag-howto-body dl { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.mhrag-howto-body dt { font-weight: 600; color: var(--mhrag-ink); }
.mhrag-howto-body dd {
  margin: .1rem 0 0;
  font-size: .95em;
  color: var(--mhrag-ink-soft);
}
.mhrag-example {
  font-family: var(--mhrag-mono);
  font-size: .9em;
  background: var(--mhrag-bg);
  border: 1px solid var(--mhrag-rule);
  padding: .1em .45em;
  color: var(--mhrag-ink);
}

/* ---------- schede ---------- */

.mhrag-tabs {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--mhrag-rule);
  margin-bottom: 1.1rem;
}
.mhrag-tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--mhrag-ink-mute);
  padding: .55rem .95rem;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
}
/* Lo sfondo va dichiarato SEMPRE, anche dove sembra superfluo: i temi WordPress
   colorano button:hover di scuro, e lasciando cadere la proprieta' la linguetta
   diventava nera con il testo scuro sopra — illeggibile. */
.mhrag .mhrag-tab { background: transparent; }
.mhrag .mhrag-tab:hover {
  color: var(--mhrag-ink);
  background: var(--mhrag-accent-sf);
  border-color: transparent;
}
.mhrag .mhrag-tab[aria-selected="true"]:hover {
  background: var(--mhrag-bg);
  border-color: var(--mhrag-rule);
  border-bottom-color: var(--mhrag-bg);
}
.mhrag-tab:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: -3px; }
.mhrag-tab[aria-selected="true"] {
  color: var(--mhrag-ink);
  background: var(--mhrag-bg);
  border-color: var(--mhrag-rule);
  border-bottom: 1px solid var(--mhrag-bg);
}
.mhrag-count {
  font-family: var(--mhrag-mono);
  font-size: .78em;
  font-variant-numeric: tabular-nums;
  background: var(--mhrag-accent);
  color: var(--mhrag-accent-ink);
  border-radius: 999px;
  padding: .05em .5em;
  line-height: 1.5;
}
.mhrag-tab[aria-selected="false"] .mhrag-count { background: var(--mhrag-ink-mute); }

/* ---------- barra di ricerca ---------- */

.mhrag-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.mhrag-form input[type="text"] {
  flex: 1 1 16rem;
  min-width: 0;
  font: inherit;
  padding: .68rem .85rem;
  border: 1px solid var(--mhrag-rule);
  background: var(--mhrag-bg);
  color: var(--mhrag-ink);
}
.mhrag-form input[type="text"]:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: -1px; }
.mhrag-form input[type="text"]:disabled { opacity: .55; cursor: not-allowed; }

.mhrag .mhrag-btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--mhrag-accent);
  background: var(--mhrag-accent);
  color: var(--mhrag-accent-ink);
  padding: .68rem 1.25rem;
  border-radius: 0;
  text-decoration: none;
}
.mhrag .mhrag-btn:hover { filter: brightness(1.07); }
.mhrag .mhrag-btn:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: 2px; }
.mhrag .mhrag-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.mhrag .mhrag-btn-ghost {
  background: none;
  color: var(--mhrag-accent);
  border-color: var(--mhrag-rule);
}
.mhrag .mhrag-btn-ghost:hover { background: var(--mhrag-accent-sf); filter: none; }
.mhrag .mhrag-btn-sm { padding: .4rem .75rem; font-size: .9em; }
.mhrag .mhrag-btn-danger {
  background: none;
  color: var(--mhrag-danger);
  border-color: var(--mhrag-rule);
}
.mhrag .mhrag-btn-danger:hover { background: #fbeceb; filter: none; }

/* ---------- contatore delle ricerche ---------- */

.mhrag-quota:empty { display: none; }
.mhrag-quota {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  font-size: .9em;
  color: var(--mhrag-ink-soft);
}
.mhrag-pips { display: flex; gap: .22rem; }
.mhrag-pip { width: 1.5rem; height: .38rem; background: var(--mhrag-accent); border-radius: 1px; }
.mhrag-pip[data-spent="true"] { background: var(--mhrag-rule); }
.mhrag-why {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: .95em;
  color: var(--mhrag-ink-mute);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}
.mhrag-why:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: 2px; }
.mhrag-quota-note {
  flex-basis: 100%;
  margin: .2rem 0 0;
  padding: .55rem .8rem;
  max-width: 60ch;
  background: var(--mhrag-panel);
  border-left: 3px solid var(--mhrag-accent);
  color: var(--mhrag-ink-soft);
}

/* ---------- risultati ---------- */

.mhrag-results-wrap { margin-top: 1.3rem; }
.mhrag .mhrag-results { list-style: none; margin: 0; padding: 0; }
.mhrag-video {
  padding: .95rem 0;
  border-bottom: 1px solid var(--mhrag-rule);
}
.mhrag-video:last-child { border-bottom: none; }
.mhrag .mhrag-title {
  font-size: 1.08em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mhrag-ink);
  text-decoration: none;
}
.mhrag .mhrag-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.mhrag-reserved {
  display: inline-block;
  margin-left: .4em;
  padding: .05em .5em;
  border-radius: .3em;
  background: #f5e6b3;
  color: #6b4e00;
  font-size: .78em;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: .12em;
}
.mhrag .mhrag-positions {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mhrag-position { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.mhrag .mhrag-minute,
.mhrag-badge {
  flex: none;
  font-family: var(--mhrag-mono);
  font-variant-numeric: tabular-nums;
  font-size: .82em;
  padding: .14rem .45rem;
  border: 1px solid var(--mhrag-rule);
  white-space: nowrap;
}
.mhrag .mhrag-minute {
  color: var(--mhrag-accent);
  background: var(--mhrag-accent-sf);
  text-decoration: none;
}
.mhrag .mhrag-minute:hover { text-decoration: underline; }
.mhrag-badge { color: var(--mhrag-ink-mute); background: var(--mhrag-panel); }
.mhrag .mhrag-quote {
  margin: 0;
  padding: 0;
  border: none;
  font-size: .92em;
  font-style: italic;
  color: var(--mhrag-ink-soft);
}

/* Continuazione del parlato: e' li' che di solito sta la soluzione, ma non e'
   il passaggio che ha fatto scattare la ricerca — un filo piu' tenue. */
.mhrag .mhrag-seguito {
  opacity: .72;
}

.mhrag-empty,
.mhrag-error,
.mhrag-limit,
.mhrag-login { color: var(--mhrag-ink-soft); }
.mhrag-suggest { margin-bottom: .3rem; color: var(--mhrag-ink-soft); }

/* ---------- riquadri in coda ai risultati ---------- */

.mhrag-savebox,
.mhrag-cta {
  margin-top: 1.1rem;
  padding: .85rem .95rem;
  background: var(--mhrag-panel);
  border: 1px dashed var(--mhrag-rule);
}
.mhrag-cta { border-style: solid; border-left: 3px solid var(--mhrag-accent); }
.mhrag-cta p { margin: 0; color: var(--mhrag-ink-soft); }
.mhrag-cta a { color: var(--mhrag-accent); font-weight: 600; }

.mhrag-savebox-row {
  display: flex;
  gap: .55rem;
  align-items: center;
  flex-wrap: wrap;
}
.mhrag-savebox-row[hidden] { display: none; }
.mhrag-savebox-row label { color: var(--mhrag-ink-soft); font-size: .95em; }
.mhrag-savebox input[type="text"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: .95em;
  padding: .45rem .6rem;
  border: 1px solid var(--mhrag-rule);
  background: var(--mhrag-bg);
  color: var(--mhrag-ink);
}
.mhrag-savebox input[type="text"]:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: -1px; }
.mhrag-savebox-msg { margin: 0; font-size: .95em; color: var(--mhrag-ink); }
.mhrag-savebox-msg:empty { display: none; }

/* ---------- spazio salvataggi ---------- */

.mhrag-saved { display: flex; flex-direction: column; gap: .75rem; }
/* display:flex vincerebbe sull'attributo hidden con cui il JS nasconde la scheda. */
.mhrag-saved[hidden] { display: none; }
.mhrag-saved-intro,
.mhrag-empty-saved { margin: 0; max-width: 60ch; color: var(--mhrag-ink-soft); }
.mhrag-empty-saved {
  border: 1px dashed var(--mhrag-rule);
  padding: 1.4rem 1.1rem;
  text-align: center;
  max-width: none;
}

.mhrag-card { border: 1px solid var(--mhrag-rule); background: var(--mhrag-panel); }
.mhrag-card > summary {
  cursor: pointer;
  list-style: none;
  padding: .75rem .9rem;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
}
.mhrag-card > summary::-webkit-details-marker { display: none; }
.mhrag-card > summary:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: -2px; }
.mhrag-card-name { font-weight: 600; color: var(--mhrag-ink); }
.mhrag-card-meta {
  font-family: var(--mhrag-mono);
  font-size: .78em;
  font-variant-numeric: tabular-nums;
  color: var(--mhrag-ink-mute);
}
.mhrag-card-progress {
  margin-left: auto;
  font-family: var(--mhrag-mono);
  font-size: .78em;
  font-variant-numeric: tabular-nums;
  color: var(--mhrag-accent);
  border: 1px solid var(--mhrag-rule);
  background: var(--mhrag-bg);
  padding: .08rem .45rem;
}
.mhrag-card-body {
  padding: 0 .9rem .9rem;
  background: var(--mhrag-bg);
  border-top: 1px solid var(--mhrag-rule);
}
.mhrag .mhrag-watchlist {
  list-style: none;
  margin: 0;
  padding: .3rem 0 0;
  display: flex;
  flex-direction: column;
}
.mhrag-watchlist > li { border-bottom: 1px solid var(--mhrag-rule); }
.mhrag-watchlist > li:last-child { border-bottom: none; }
.mhrag-watch {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .1rem;
  cursor: pointer;
}
.mhrag-watch input[type="checkbox"] {
  margin: .3rem 0 0;
  accent-color: var(--mhrag-accent);
  width: 1rem;
  height: 1rem;
  flex: none;
}
.mhrag-watch input[type="checkbox"]:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: 2px; }
.mhrag-watch-text { display: flex; flex-direction: column; gap: .15rem; }
.mhrag .mhrag-watch-title { color: var(--mhrag-ink); text-decoration: none; line-height: 1.35; }
.mhrag .mhrag-watch-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.mhrag-watch input[type="checkbox"]:checked ~ .mhrag-watch-text .mhrag-watch-title {
  color: var(--mhrag-ink-mute);
  text-decoration: line-through;
}
.mhrag-watch-time {
  font-family: var(--mhrag-mono);
  font-size: .8em;
  font-variant-numeric: tabular-nums;
  color: var(--mhrag-accent);
}
.mhrag-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .8rem; }

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

/* --- riga compatta dei minuti + estratti a scomparsa --- */

.mhrag-minutes {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .45rem;
}
.mhrag-extracts { margin-top: .5rem; }
.mhrag-extracts > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9em;
  color: var(--mhrag-accent);
  padding: .1rem 0;
}
.mhrag-extracts > summary::-webkit-details-marker { display: none; }
.mhrag-extracts > summary::before {
  content: "";
  width: .38rem;
  height: .38rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.mhrag-extracts[open] > summary::before { transform: rotate(45deg); }
.mhrag-extracts > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.mhrag-extracts > summary:focus-visible { outline: 2px solid var(--mhrag-accent); outline-offset: 2px; }
.mhrag-extracts .mhrag-positions { margin-top: .55rem; }

/* Stessa difesa sugli altri elementi cliccabili che il tema potrebbe ridipingere. */
.mhrag .mhrag-why,
.mhrag .mhrag-why:hover { background: transparent; }
.mhrag .mhrag-extracts > summary,
.mhrag .mhrag-extracts > summary:hover,
.mhrag .mhrag-howto > summary,
.mhrag .mhrag-howto > summary:hover { background: transparent; }
.mhrag .mhrag-card > summary,
.mhrag .mhrag-card > summary:hover { background: var(--mhrag-panel); }

/* ---------- vetrina per chi non può ancora cercare ---------- */

.mhrag-invito {
  border: 1px solid var(--mhrag-rule);
  border-left: 3px solid var(--mhrag-accent);
  background: var(--mhrag-panel);
  padding: 1.2rem 1.3rem;
  max-width: 62ch;
}
.mhrag-invito p { margin: 0 0 .8rem; color: var(--mhrag-ink-soft); }
.mhrag-invito p:last-child { margin-bottom: 0; }
.mhrag-invito-titolo {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--mhrag-ink);
}
.mhrag-invito-azioni { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.mhrag-invito-nota { font-size: .92em; color: var(--mhrag-ink-mute); }

/* Attesa della ricerca. Tre modelli leggono le trascrizioni e devono trovarsi
   d'accordo: possono volerci una quindicina di secondi. I puntini dicono che
   il lavoro procede, il testo (in JS) dice a che punto e'. */
.mhrag-attesa {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .9rem 0;
  color: var(--mhrag-ink-soft);
}

.mhrag-attesa-puntini { display: inline-flex; gap: .28rem; }

.mhrag-attesa-puntini i {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--mhrag-accent);
  opacity: .35;
  animation: mhrag-pulsa 1.2s ease-in-out infinite;
}

.mhrag-attesa-puntini i:nth-child(2) { animation-delay: .18s; }
.mhrag-attesa-puntini i:nth-child(3) { animation-delay: .36s; }

@keyframes mhrag-pulsa {
  0%, 80%, 100% { opacity: .35; transform: scale(1); }
  40%           { opacity: 1;   transform: scale(1.25); }
}

/* Chi ha chiesto meno animazioni vede i puntini fermi, non assenti: servono
   comunque a distinguere "sta lavorando" da "ha finito e non ha trovato". */
@media (prefers-reduced-motion: reduce) {
  .mhrag-attesa-puntini i { animation: none; opacity: .55; }
}