/* "Open text" reader for diagram, task and subtask texts. Uses the woodland theme tokens from the
   end of site.css (wood-*, antique-gold); the fallbacks only matter if that layer is missing. */

/* Small chip under the text or field it belongs to - same family as .dashboard-icon-button. */
.text-preview-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .4rem 0 0;
  padding: .28rem .65rem;
  border: 1px solid var(--wood-line, rgba(172,136,72,.46));
  border-radius: 999px;
  background: linear-gradient(180deg, #1d2513, var(--wood-surface, #11170d));
  color: var(--wood-copy, #c9b991);
  font: 600 .78rem/1.2 var(--font, system-ui, sans-serif);
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,230,170,.06), 0 2px 5px rgba(0,0,0,.35);
  transition: border-color var(--transition, .16s ease), color var(--transition, .16s ease), background var(--transition, .16s ease);
}
.text-preview-button:hover { border-color: var(--wood-line-strong, rgba(199,165,103,.72)); background: linear-gradient(180deg, #27321a, #151c0f); color: var(--wood-ink, #f0dfb4); }
.text-preview-button:focus-visible { outline: 2px solid var(--wood-focus, #f0c66e); outline-offset: 2px; }
.text-preview-button__icon { font-size: .95rem; line-height: 1; color: var(--antique-gold, #c7a567); }
[data-text-preview-for="field"] { display: block; }

/* The reader: a parchment-dark panel like .dashboard-modal__panel. */
.text-preview-dialog {
  box-sizing: border-box;
  width: min(48rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(46rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 3px ridge rgba(103,76,35,.82);
  border-radius: 10px;
  background: radial-gradient(circle at 80% 20%, rgba(82,101,42,.10), transparent 30%), linear-gradient(110deg, var(--wood-surface-raised, #192012), #10150d 72%);
  color: var(--wood-copy, #c9b991);
  box-shadow: inset 0 0 0 1px rgba(195,155,80,.13), inset 0 0 24px rgba(0,0,0,.62), 0 1.5rem 4rem rgba(0,0,0,.7);
  font-family: var(--font, system-ui, sans-serif);
}
.text-preview-dialog[open] { animation: text-preview-in .16s ease-out; }
.text-preview-dialog::backdrop { background: rgba(3,5,3,.76); backdrop-filter: blur(3px); }

.text-preview-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.25rem .8rem;
  border-bottom: 3px double var(--wood-line, rgba(172,136,72,.46));
  background: linear-gradient(180deg, #2d1e11, #181109);
}
.text-preview-dialog h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--wood-ink, #f0dfb4);
  font: 600 1.15rem/1.3 Georgia, "Times New Roman", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-preview-dialog__close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--wood-line, rgba(172,136,72,.46));
  border-radius: 999px;
  background: var(--wood-surface, #12170e);
  color: #d7bd82;
  font: 1.4rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.text-preview-dialog__close:hover { border-color: var(--wood-line-strong, rgba(199,165,103,.72)); color: #fff1c5; }
.text-preview-dialog__close:focus-visible { outline: 2px solid var(--wood-focus, #f0c66e); outline-offset: 2px; }

.text-preview-dialog__body {
  max-height: min(37rem, calc(100dvh - 7.5rem));
  padding: 1.15rem 1.35rem 1.5rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: var(--antique-gold-dim, #846431) transparent;
}
.text-preview-dialog .task-rich-text,
.text-preview-plain { font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; color: var(--wood-copy, #c9b991); }
.text-preview-plain { white-space: pre-wrap; }
.text-preview-dialog .task-rich-text h2,
.text-preview-dialog .task-rich-text h3,
.text-preview-dialog .task-rich-text h4 { color: var(--wood-ink, #f0dfb4); font-family: Georgia, "Times New Roman", serif; }
.text-preview-dialog .task-rich-text a { color: var(--antique-gold, #c7a567); }
.text-preview-dialog .task-rich-text a:hover { color: #fff1c5; }
/* site.css still gives blockquotes the old light-blue accent background */
.text-preview-dialog .task-rich-text blockquote { border-left-color: var(--antique-gold, #c7a567); background: rgba(83,97,42,.22); color: var(--wood-ink, #f0dfb4); }
.text-preview-dialog pre { max-width: 100%; overflow: auto; border: 1px solid var(--wood-line, rgba(172,136,72,.46)); background: var(--wood-control, #090e08); color: #f3ead2; }
.text-preview-dialog img, .text-preview-dialog svg { max-width: 100%; }

/* The source file stays local; this dialog only previews the text that will enter the editor. */
.markdown-import-dialog__body { display: grid; gap: 1rem; }
.markdown-import-dialog__file { margin: 0; overflow-wrap: anywhere; color: var(--wood-ink, #f0dfb4); font-weight: 700; }
.markdown-import-dialog__choices { display: grid; gap: .55rem; margin: 0; padding: .8rem 1rem; border: 1px solid var(--wood-line, rgba(172,136,72,.46)); border-radius: 7px; }
.markdown-import-dialog__choices legend { padding: 0 .25rem; color: var(--wood-ink, #f0dfb4); font-weight: 700; }
.markdown-import-dialog__choices label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.markdown-import-dialog__count { margin: 0; color: var(--wood-copy, #c9b991); }
.markdown-import-dialog__count--error { color: #ffb4a4; font-weight: 700; }
.markdown-import-dialog__preview { max-height: 17rem; padding: .85rem 1rem; overflow: auto; border: 1px solid var(--wood-line, rgba(172,136,72,.46)); border-radius: 7px; background: rgba(0,0,0,.2); }
.markdown-import-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.markdown-import-dialog__actions button:disabled { cursor: not-allowed; opacity: .55; }

@keyframes text-preview-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .text-preview-dialog[open] { animation: none; } }

@media (max-width: 600px) {
  .text-preview-dialog { width: calc(100vw - 1.25rem); max-width: calc(100vw - 1.25rem); max-height: calc(100dvh - 1.25rem); }
  .text-preview-dialog__header { padding: .8rem 1rem .7rem; }
  .text-preview-dialog__body { max-height: calc(100dvh - 6.5rem); padding: 1rem; }
}