/* tool.css — fixes: modal closed by default (no reliance on [hidden]), and UI messages hidden unless JS toggles state */

.pn-tool-tts { display:block; }
.pn-tool-tts .pn-tts-layout{ align-items:start; }

.pn-tool-tts .pn-tts-panel{
  padding: 16px;
  border-radius: var(--tool-radius, 14px);
}

.pn-tool-tts .pn-tts-panel__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.pn-tool-tts .pn-tts-panel__title{ margin:0; font-size:1.05rem; }

.pn-tool-tts .pn-tts-counters{
  display:flex;
  align-items:baseline;
  gap:8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.pn-tool-tts .pn-tts-dot{ opacity:.75; }

.pn-tool-tts .pn-tts-actions{ margin-top:14px; display:grid; gap:10px; }

.pn-tool-tts .pn-tts-actions__row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (min-width: 720px){
  .pn-tool-tts .pn-tts-actions__row{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .pn-tool-tts .pn-tts-actions__row--secondary{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.pn-tool-tts .pn-tts-btn,
.pn-tool-tts .pn-tts-pill{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.pn-tool-tts .pn-tts-hintrow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.pn-tool-tts .pn-tts-muted{ color: var(--muted); }

/* IMPORTANT: hide “lines” by default (in case attributes get stripped) */
.pn-tool-tts [data-pn-tts-longwarn]{ display:none; }
.pn-tool-tts.is-longtext [data-pn-tts-longwarn]{ display:block; }

.pn-tool-tts [data-pn-tts-text-msg]{ display:none; }
.pn-tool-tts.is-text-error [data-pn-tts-text-msg]{ display:flex; }

.pn-tool-tts .pn-tts-warnline{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--tool-control-bg) 70%, var(--bg));
  color: var(--fg);
  font-size: 0.92rem;
}

.pn-tool-tts .pn-tts-panel--compact .pn-tts-overview{ display:grid; gap:10px; }

.pn-tool-tts .pn-tts-overview__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.pn-tool-tts .pn-tts-overview__label{
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.pn-tool-tts .pn-tts-overview__value{ font-size:1.05rem; font-weight:900; }
.pn-tool-tts .pn-tts-overview__sub{ color:var(--muted); font-size:0.92rem; }

.pn-tool-tts .pn-tts-statuspill{
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--tool-control-bg) 70%, var(--bg));
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 0.82rem;
  white-space:nowrap;
}

.pn-tool-tts .pn-tts-progress{ margin: 4px 0 2px; }

.pn-tool-tts .pn-tts-voice-summary,
.pn-tool-tts .pn-tts-lastaction{ font-size:0.92rem; color:var(--fg); }

.pn-tool-tts .pn-tts-quick{ margin-top:4px; }

/* Unsupported message hidden unless JS marks unsupported */
.pn-tool-tts .pn-tts-inline-support{
  display:none;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.pn-tool-tts.is-unsupported .pn-tts-inline-support{ display:block; }

.pn-tool-tts .pn-tts-link{
  appearance:none;
  border:0;
  background:transparent;
  color: var(--brand2);
  font-weight: 900;
  cursor:pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pn-tool-tts .pn-tts-link:focus-visible{
  outline: 2px solid var(--tool-control-focus);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Modal: CLOSED BY DEFAULT */
.pn-tool-tts .pn-tts-modal{ display:none; position:fixed; inset:0; z-index:9999; place-items:center; }
.pn-tool-tts .pn-tts-modal.is-open{ display:grid; }

.pn-tool-tts .pn-tts-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.42);
  border:0;
  padding:0;
  cursor:pointer;
}

.pn-tool-tts .pn-tts-modal__dialog{
  position:relative;
  width: min(920px, calc(100vw - 24px));
  max-height: min(86vh, 820px);
  overflow:auto;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.pn-tool-tts .pn-tts-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.pn-tool-tts .pn-tts-modal__title{ margin:0; font-size:1.1rem; }
.pn-tool-tts .pn-tts-modal__desc{ margin-top:4px; color:var(--muted); font-size:0.92rem; }

.pn-tool-tts .pn-tts-iconbtn{ width:auto; min-width:44px; padding-inline:10px; }

.pn-tool-tts .pn-tts-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.pn-tool-tts .pn-tts-tab{
  appearance:none;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--tool-control-bg) 70%, var(--bg));
  color: var(--fg);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
}
.pn-tool-tts .pn-tts-tab[aria-selected="true"]{
  border-color: color-mix(in oklab, var(--brand2) 55%, var(--border));
  background: color-mix(in oklab, var(--brand2) 15%, var(--tool-control-bg));
}
.pn-tool-tts .pn-tts-tab:focus-visible{
  outline: 2px solid var(--tool-control-focus);
  outline-offset: 2px;
}

.pn-tool-tts .pn-tts-pane__grid{ display:grid; gap:12px; }
@media (min-width: 820px){
  .pn-tool-tts .pn-tts-pane__grid{ grid-template-columns: 1fr 1fr; align-items:start; }
}

.pn-tool-tts .pn-tts-sliders{ display:grid; gap:10px; margin-top:10px; }
.pn-tool-tts .pn-tts-toggles{ display:grid; gap:12px; margin-top:10px; }

.pn-tool-tts .pn-tts-inline-msg{ display:none; margin-top:8px; color:var(--muted); font-size:0.92rem; }
.pn-tool-tts.is-filter-empty [data-pn-tts-lang-msg]{ display:block; }
.pn-tool-tts.is-voice-empty [data-pn-tts-voice-msg]{ display:block; }

.pn-tool-tts [data-pn-tts-remember-hint]{ display:none; }
.pn-tool-tts.is-remember-on [data-pn-tts-remember-hint]{ display:block; }

.pn-tool-tts .pn-tts-settings-footer{ display:grid; gap:10px; margin-top:4px; }
.pn-tool-tts .pn-tts-privacyline{ font-size:0.9rem; }

.pn-tool-tts .pn-tts-modal__foot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Status tab */
.pn-tool-tts .pn-tts-statuscard{ display:grid; gap:12px; }

.pn-tool-tts .pn-tts-statuscard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.pn-tool-tts .pn-tts-statuscard__label{ color:var(--muted); font-size:0.85rem; font-weight:800; }
.pn-tool-tts .pn-tts-statuscard__value{ font-size:1.05rem; font-weight:900; margin-top:2px; }
.pn-tool-tts .pn-tts-statuscard__sub{ margin-top:2px; color:var(--muted); font-size:0.9rem; }

.pn-tool-tts .pn-tts-log{ display:grid; gap:10px; }
.pn-tool-tts .pn-tts-log__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pn-tool-tts .pn-tts-log__title{ font-weight:900; font-size:0.92rem; }

.pn-tool-tts .pn-tts-log__list{
  list-style:none;
  padding: 10px;
  margin: 0;
  display:grid;
  gap:8px;
  max-height: 260px;
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--tool-control-bg) 70%, var(--bg));
}

.pn-tool-tts .pn-tts-log__item{ display:flex; gap:10px; align-items:flex-start; font-size:0.92rem; line-height:1.35; }
.pn-tool-tts .pn-tts-log__time{ color:var(--muted); font-variant-numeric: tabular-nums; white-space:nowrap; }
.pn-tool-tts .pn-tts-log__text{ color: var(--fg); }
.pn-tool-tts .pn-tts-log__text.is-error{
  color: color-mix(in oklab, var(--danger, #ef4444) 75%, var(--fg));
  font-weight: 800;
}

/* SR live region */
.pn-tool-tts .pn-tts-sr{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}