/* ── Notas vinculadas (Parte 3) ── */
.companion-row {
  padding-left: 28px;
  font-size: 12px;
  opacity: 0.85;
}

.companion-add-row {
  padding-left: 28px;
  font-size: 11.5px;
  color: var(--muted);
  border-left: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  margin-left: 12px;
}

.companion-add-row:hover {
  color: var(--primary);
  border-left-color: var(--primary);
}

.companion-add-row .material-symbols-outlined {
  font-size: 15px;
}

/* ── Editor Soneto (Parte 4) ── */
.specialized-editor {
  padding: 32px 48px 48px;
  max-width: 660px;
  margin: 0 auto;
  width: 100%;
}

.soneto-section {
  margin-bottom: 24px;
}

.soneto-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.soneto-section-label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--line);
}

.soneto-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.soneto-rhyme-tag {
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  border-radius: 3px;
  padding: 2px 5px;
  font-family: "Courier New", monospace;
  flex-shrink: 0;
}

.soneto-a { background: #EEEDFE; color: #3C3489; }
.soneto-b { background: #E1F5EE; color: #085041; }
.soneto-c { background: #FAECE7; color: #712B13; }
.soneto-d { background: #FAEEDA; color: #633806; }

.soneto-verso {
  flex: 1;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  outline: none;
  font-size: 15px;
  font-family: "Noto Serif", Georgia, serif;
  color: var(--ink);
  padding: 3px 0;
  transition: border-color var(--motion-quick);
}

.soneto-verso:focus {
  border-bottom-color: var(--line);
}

.soneto-verso::placeholder {
  color: var(--muted);
  font-style: italic;
}

.soneto-syl {
  font-size: 10px;
  font-family: "Courier New", monospace;
  color: var(--muted);
  min-width: 18px;
  text-align: right;
  flex-shrink: 0;
}

.soneto-syl.syl-ok   { color: var(--primary); font-weight: 700; }
.soneto-syl.syl-over { color: #993C1D; font-weight: 700; }

/* ── Editor Roteiro / Screenplay (Parte 5) ── */
.screenplay-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sp-block {
  margin-bottom: 20px;
}

.sp-slug-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sp-slug-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  width: 32px;
}

.sp-slug-input {
  flex: 1;
  border: none;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  outline: none;
  font-size: 12px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 3px 0;
}

.sp-slug-input::placeholder {
  font-weight: 400;
  text-transform: none;
  color: var(--muted);
}

.sp-action-area {
  width: 100%;
  border: none;
  border-left: 2px solid var(--line);
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: "Noto Serif", Georgia, serif;
  color: var(--soft-ink);
  padding: 4px 12px;
  resize: none;
  min-height: 48px;
  line-height: 1.65;
}

.sp-action-area::placeholder { color: var(--muted); font-style: italic; }

.sp-dialogue-block {
  padding-left: 80px;
  padding-right: 80px;
}

.sp-char-input {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 2px 0;
  margin-bottom: 4px;
}

.sp-char-input::placeholder { text-transform: none; font-weight: 400; color: var(--muted); letter-spacing: 0; }

.sp-lines-area {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: "Noto Serif", Georgia, serif;
  color: var(--ink);
  text-align: center;
  resize: none;
  min-height: 40px;
  line-height: 1.6;
}

.sp-lines-area::placeholder { font-style: italic; color: var(--muted); }

.sp-add-dialogue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sp-add-dialogue:hover { color: var(--primary); }
.sp-add-dialogue .material-symbols-outlined { font-size: 15px; }

.sp-add-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 6px;
  cursor: pointer;
  padding: 11px 18px;
  width: 100%;
  transition: background var(--motion-quick), border-color var(--motion-quick);
}
.sp-add-scene:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
}
.sp-add-scene .material-symbols-outlined { font-size: 18px; }

/* ── Editor Teatro ── */
.teatro-editor { display: flex; flex-direction: column; gap: 0; }

.teatro-block { margin-bottom: 14px; position: relative; }

.teatro-local-input {
  display: block; width: 100%;
  border: none; border-bottom: 1px solid var(--line);
  background: transparent; outline: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--muted); padding: 3px 0; font-family: "Noto Serif", Georgia, serif;
  font-style: italic;
}
.teatro-local-input::placeholder { font-weight: 400; color: var(--muted); opacity: 0.6; }

.teatro-char-input {
  display: block; width: 100%; text-align: center;
  border: none; background: transparent; outline: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
  padding: 2px 0; margin-bottom: 2px;
}
.teatro-char-input::placeholder { text-transform: none; font-weight: 400; color: var(--muted); letter-spacing: 0; }

.teatro-rub-input {
  display: block; width: 100%; text-align: center;
  border: none; background: transparent; outline: none;
  font-size: 12px; font-style: italic; color: var(--muted);
  padding: 1px 0; margin-bottom: 3px;
}
.teatro-rub-input::placeholder { color: var(--muted); opacity: 0.5; }

.teatro-dial-area {
  display: block; width: 100%;
  border: none; background: transparent; outline: none;
  font-size: 14px; font-family: "Noto Serif", Georgia, serif;
  color: var(--ink); text-align: center; resize: none; min-height: 36px;
  line-height: 1.65; padding: 2px 40px;
}
.teatro-dial-area::placeholder { font-style: italic; color: var(--muted); }

.teatro-rubrica-input {
  display: block; width: 100%; text-align: center;
  border: none; background: transparent; outline: none;
  font-size: 12px; font-style: italic; color: var(--soft-ink);
  padding: 3px 0;
}
.teatro-rubrica-input::placeholder { color: var(--muted); opacity: 0.5; }

.teatro-remove-btn {
  position: absolute; top: 2px; right: 0;
  background: none; border: none; cursor: pointer;
  color: var(--muted); opacity: 0; padding: 2px;
  transition: opacity 0.15s;
}
.teatro-remove-btn .material-symbols-outlined { font-size: 15px; }
.teatro-fala-block:hover .teatro-remove-btn { opacity: 1; }
.teatro-remove-btn:hover { color: var(--sienna); }

.teatro-add-row {
  display: flex; gap: 8px; margin-top: 12px;
}
.teatro-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); background: none;
  border: 1px dashed var(--line); border-radius: 6px;
  cursor: pointer; padding: 6px 12px;
}
.teatro-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.teatro-add-btn .material-symbols-outlined { font-size: 15px; }

/* ── Editor Slam ── */
.slam-editor { display: flex; flex-direction: column; height: 100%; }

.slam-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 48px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0; flex-wrap: wrap;
}

.slam-est {
  font-size: 22px; font-weight: 800;
  color: var(--primary); font-family: "Noto Serif", Georgia, serif;
  min-width: 60px;
}
.slam-est.slam-over { color: var(--sienna); }

.slam-sep { color: var(--muted); }

.slam-words { font-size: 12px; color: var(--soft-ink); font-weight: 600; }
.slam-limit { font-size: 12px; color: var(--muted); }

.slam-bar {
  flex: 1; min-width: 80px; height: 4px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.slam-bar i {
  display: block; height: 100%; width: var(--p, 0%);
  background: var(--primary); border-radius: 2px;
  transition: width 0.2s;
}
.slam-bar i.over { background: var(--sienna); }

.slam-writing-area {
  flex: 1; padding: 24px 48px;
  outline: none; font-family: "Noto Serif", Georgia, serif;
  font-size: 16px; line-height: 1.9; color: var(--ink);
  white-space: pre-wrap; overflow-y: auto;
}
.slam-writing-area:empty::before {
  content: attr(data-placeholder);
  color: var(--muted); opacity: 0.6; font-style: italic;
  pointer-events: none;
}



/* ── MODO LEITURA ────────────────────────────────────── */
/* ── MODO LEITURA — regra-mãe: só o texto pode chamar atenção ── */
.reader-overlay {
  position: fixed; inset: 0; z-index: 200;
  /* Substrato de leitura: fundo mais frio e neutro — sinal de "saiu da bancada de escrita" */
  background: #f0ede8;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(160,145,130,.08) 31px,
      rgba(160,145,130,.08) 32px
    );
  display: flex; flex-direction: column;
}
.reader-overlay[hidden] { display: none; }

/* Header: quase invisível — orienta, não performa */
.reader-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px;
  background: transparent;
  border-bottom: 1px solid transparent;
  position: sticky; top: 0; z-index: 10;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.reader-header:hover,
.reader-header:focus-within {
  opacity: 1;
}

/* Título em itálico quieto */
.reader-title {
  flex: 1; font-size: 13px; font-weight: 400; color: var(--muted);
  font-family: "Noto Serif", Georgia, serif; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.reader-controls { display: flex; gap: 4px; flex-wrap: wrap; }

/* Pills viram controles terciários — sem borda em repouso, sem peso */
.reader-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 4px 8px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.reader-pill:hover { background: var(--surface-low); color: var(--soft-ink); }
.reader-pill.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.reader-pill .material-symbols-outlined { font-size: 15px; }

/* Botão fechar: foco acessível mas não agressivo */
.reader-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  opacity: 1;
}

/* Canvas: espaço generoso para o texto respirar */
.reader-canvas {
  flex: 1; overflow-y: auto; padding: 40px 20px 80px;
  scroll-behavior: auto;
}

/* Artigo: mancha editorial — ink pleno, linha mais confortável */
.reader-article {
  max-width: 640px; margin: 0 auto;
  font-family: "Noto Serif", Georgia, serif;
  font-size: 18px; line-height: 1.75; color: var(--ink);
}
.reader-article p { margin-bottom: 1.2em; }
.reader-article h1, .reader-article h2, .reader-article h3 {
  color: var(--ink);
  margin: 1.4em 0 0.5em;
  font-family: "Noto Serif", Georgia, serif;
}

.reader-empty {
  color: var(--muted); font-style: italic;
  font-size: 16px; text-align: center;
  margin-top: 4rem; line-height: 1.6;
}

/* Régua: linha horizontal discreta, SEM backdrop-filter */
/* O blur era o principal responsável por tornar o texto ilegível */
.reader-ruler {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  display: flex; flex-direction: column; justify-content: center;
}
.reader-ruler::before, .reader-ruler::after {
  content: ''; flex: 1;
  /* Sem blur — apenas levíssimo overlay de fundo */
  background: color-mix(in srgb, var(--paper) 42%, transparent);
}
.reader-ruler::before { border-bottom: 1.5px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.reader-ruler::after  { border-top:    1.5px solid color-mix(in srgb, var(--primary) 22%, transparent); }

/* ── FICHA DE PERSONAGEM ─────────────────────────────── */
.personagem-editor {
  padding: 32px 48px 64px;
  max-width: 720px;
  margin: 0 auto;
}

.persona-section { margin-bottom: 40px; }

.persona-section-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.persona-section-title::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  display: none;
}

.persona-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.persona-field { display: flex; flex-direction: column; gap: 4px; }
.persona-field.wide { grid-column: 1 / -1; }
.persona-field.narrow { grid-column: span 1; }

.persona-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.persona-input {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  outline: none;
  font-size: 14px;
  font-family: "Noto Serif", Georgia, serif;
  color: var(--ink);
  padding: 4px 0;
  transition: border-color 0.15s;
  width: 100%;
}

.persona-input:focus { border-bottom-color: var(--primary); }
.persona-input::placeholder { color: var(--muted); opacity: 0.55; font-style: italic; }

.persona-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.6;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  border-radius: 4px;
  padding: 4px;
}
.persona-textarea:focus { border-color: var(--primary); }


/* Toast: nota vazia — não abre o leitor, mostra aviso breve */
.reader-hint-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 300;
  white-space: nowrap;
}
.reader-hint-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Header do leitor: comprime em mobile para texto aparecer primeiro */
@media (max-width: 600px) {
  .reader-header {
    padding: 6px 12px;
    gap: 6px;
  }
  .reader-title { font-size: 11px; }
  .reader-pill {
    font-size: 10px;
    padding: 3px 6px;
    gap: 3px;
  }
  .reader-canvas {
    padding: 24px 16px 60px;
  }
  .reader-article {
    font-size: 16px;
    line-height: 1.7;
  }
}