/* write.css — the Escrever (ex-Red House Writer). Ported from writer-app/index.html (2026-10-01.1).
   Everything is scoped under .a-write: the three areas AND the Escrever's own modals carry that class, so the Writer's bare
   label / textarea / input / select / .row / .status rules cannot leak into the Quadro. Shared pieces (tokens, buttons, modals,
   toasts, dialogs) live in tokens.css / components.css. The one breakpoint (860 px) block stays LAST so it wins the cascade. */
.a-write [hidden] { display: none !important; }

.a-write .tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.a-write .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.a-write .panel h2 { font-size: 15px; margin: 0 0 12px; }

.a-write label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
.a-write label.sr-only { margin: -1px; }
.a-write label small { font-weight: 400; color: var(--muted); }
.a-write textarea, .a-write input, .a-write select {
  width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px; font-size: 14px; font-family: inherit;
}
.a-write textarea { resize: vertical; line-height: 1.5; min-height: 0; }
.a-write input[type="checkbox"] { width: auto; }
.a-write label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 12px 0 4px; }
.a-write .row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.a-write .row.tight { margin-top: 8px; }

.a-write button { font-family: inherit; }
.a-write button.small { padding: 6px 11px; font-size: 13px; }
.a-write .chip { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.a-write .chip:hover:not(:disabled) { border-color: var(--crimson); }
.a-write .chip.active { border-color: var(--crimson); background: var(--panel); }
.a-write .linklike { font-size: 13px; }
[data-theme="dark"] .a-write .linklike { color: #ff8a9c; }
.a-write .status { color: var(--muted); font-size: 13px; }
.a-write .status.err { color: var(--danger); font-weight: 600; }
.a-write .hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; line-height: 1.5; }

.a-write .callout { border: 1px solid var(--border); background: var(--panel-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.a-write .callout .row { margin-top: 8px; }
.a-write .empty { color: var(--muted); font-size: 14px; font-style: normal; padding: 8px 2px; }
.a-write .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.a-write .tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.a-write .tag.route { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }

.a-write .msgcard { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 2px 14px 14px; }
.a-write .msgpart { white-space: pre-wrap; color: var(--muted); padding: 12px 0 8px; font-size: 14px; }
.a-write .msgpart.sig { padding: 10px 0 0; }
#rMessage { min-height: 220px; background: var(--panel); border-radius: 10px; padding: 14px; }
#rBody, #rFull { min-height: 110px; background: var(--panel-2); border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.55; overflow: hidden; }
#rFull { min-height: 200px; }
#exInput, #exBody { min-height: 120px; font-size: 13px; }
.a-write .exrow, .a-write .histrow { border: 1px solid var(--border); background: var(--panel-2); border-radius: 10px; padding: 9px 12px; margin: 8px 0; font-size: 13px; }
.a-write .exrow .meta, .a-write .histrow .meta { color: var(--muted); font-size: 12px; }
.a-write .exrow .row, .a-write .histrow .row { margin-top: 6px; }
.a-write .histrow pre { white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; font-size: 13px; font-family: inherit; }
.a-write .exgroup { font-weight: 700; font-size: 13px; margin: 14px 0 2px; }
#aDetails { min-height: 130px; background: var(--panel); border-radius: 10px; padding: 12px; }
#aText { min-height: 260px; background: var(--panel-2); border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.55; overflow: hidden; }
#rulesAnn { min-height: 280px; font-size: 13px; }
#oNotes { min-height: 260px; background: var(--panel); border-radius: 10px; padding: 14px; }
#oHeader { min-height: 150px; font-size: 14px; }
#oReport, #oRawNotes { min-height: 220px; background: var(--panel-2); border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.55; overflow: hidden; }
.a-write .infobox { margin-top: 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.a-write .infobox ul { margin: 6px 0 0; padding-left: 18px; }
.a-write .infobox li { margin: 6px 0; }
.a-write .infobox .lv { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; font-size: 12px; padding: 0 6px; border-radius: 6px; background: var(--navy); color: #fff; margin-right: 6px; }
.a-write .infobox .lv.none { background: var(--panel); color: var(--muted); border: 1px solid var(--border); font-weight: 600; }
.a-write .infobox .why { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.a-write .warnbox { margin-top: 14px; background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.a-write .warnbox ul { margin: 6px 0 0; padding-left: 18px; }
.a-write .rawbox { margin: 12px 0 0; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; }

.write-foot { max-width: 1200px; margin: 0 auto; padding: 8px 24px 28px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* modals of the Escrever (Configurações, Salvar como exemplo, Testar as regras, Histórico, O que foi enviado à IA) */
.modal-overlay.a-write { padding: 48px 16px; }
.a-write .modal { color: var(--text); background: var(--panel); }
.a-write .modal.wide { max-width: 860px; }
.a-write .modal-head { gap: 10px; }
.a-write .modal-sub { margin: 6px 0 8px; }
.a-write .modal-foot { gap: 8px; flex-wrap: wrap; }
.a-write .settabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0 4px; border-bottom: 1px solid var(--border); }
.a-write .settabs button { background: transparent; color: var(--muted); border-radius: 0; border-bottom: 3px solid transparent; padding: 8px 9px; font-size: 13px; }
.a-write .settabs button.active { color: var(--text); border-bottom-color: var(--crimson); }
.a-write .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#rulesReply { min-height: 340px; font-size: 13px; }
#factsText { min-height: 240px; font-size: 13px; }
#obsRubric { min-height: 160px; font-size: 12px; }
#rulesObs { min-height: 260px; font-size: 13px; }
#tplText { min-height: 200px; font-size: 13px; }
.a-write .previewbox { white-space: pre-wrap; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-top: 6px; }
.a-write pre.diag { margin: 8px 0 0; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }

/* Small screens — LAST, so it wins the cascade over the base rules above (a lesson from the Notes app). */
@media (max-width: 860px) {
  .a-write .tool { grid-template-columns: 1fr; }
  .a-write .panel { padding: 14px; }
  .a-write input, .a-write select, .a-write textarea { font-size: 16px; }    /* below 16px, iOS zooms the page when a field gets focus */
  #rBody, #rFull, #oReport, #oRawNotes, #oHeader, #aText { font-size: 16px; }
  #rMessage, #oNotes { min-height: 180px; }
  .a-write .grid2 { grid-template-columns: 1fr; }
  .modal-overlay.a-write { padding: 20px 10px; }
  .a-write button { min-height: 40px; }
  .write-foot { padding: 6px 12px 24px; }
}