/* Type on PDF — workshop layout: controls left, page preview right.
 * Text overlays are DOM elements over the rendered page (browser shaping,
 * incl. native Arabic), re-rendered into the PDF with embedded fonts on
 * export. Coordinate mapping is the critical seam: the canvas renders at
 * viewport scale S (pdf pt -> css px), overlays live in css px, and export
 * converts back pdfX = cssX / S, pdfY = pageH - cssY / S. */
.kw-tp { display: grid; gap: var(--kw-space-4); }
.kw-tp__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kw-space-3); align-items: center; }
.kw-tp__toolbar .kw-hint {
  margin: 0; flex: 1 1 0; min-width: 260px; line-height: 1.5; min-height: 3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kw-tp__toolbar .kw-actions { flex: 0 0 auto; margin-left: auto; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }

.kw-tp__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--kw-space-6); align-items: start; }
@media (max-width: 1023px) { .kw-tp__layout { grid-template-columns: 1fr; } }

.kw-tp__controls { display: grid; gap: var(--kw-space-4); }
.kw-tp__drop {
  display: grid; justify-items: center; gap: var(--kw-space-2); text-align: center;
  border: 2px dashed var(--kw-line-strong); border-radius: var(--kw-radius-lg);
  padding: var(--kw-space-6) var(--kw-space-4); cursor: pointer; min-height: 160px; align-content: center;
}
.kw-tp__drop.is-dragover { border-style: solid; background: var(--kw-primary-soft); }
.kw-tp__drop .kw-drop__meta { font-size: var(--kw-fs-sm); color: var(--kw-muted); }
.kw-tp__drop .kw-drop__note { font-size: var(--kw-fs-sm); color: var(--kw-muted); }

.kw-tp__field { display: grid; gap: var(--kw-space-1); margin: 0; }
.kw-tp__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kw-space-3); }
.kw-tp__color { padding: 4px; height: 44px; cursor: pointer; }

.kw-tp__pages { display: flex; gap: var(--kw-space-3); align-items: center; justify-content: center; }
.kw-tp__pagenum { font-variant-numeric: tabular-nums; color: var(--kw-text-2); }

.kw-tp__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kw-space-1); }
.kw-tp__items li {
  display: flex; justify-content: space-between; gap: var(--kw-space-2); align-items: center;
  border: 1px solid var(--kw-line); border-radius: var(--kw-radius); padding: 4px 10px;
  font-size: var(--kw-fs-sm); color: var(--kw-text-2);
}
.kw-tp__items li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-tp__items li button { border: 0; background: none; color: var(--kw-muted); cursor: pointer; padding: 4px; line-height: 1; }
.kw-tp__items li button:hover { color: var(--kw-danger); }

.kw-tp__preview-col { position: sticky; top: var(--kw-space-4); display: grid; gap: var(--kw-space-3); }
@media (max-width: 1023px) { .kw-tp__preview-col { position: static; } }
.kw-tp__canvas-wrap { position: relative; border: 1px solid var(--kw-line-strong); border-radius: var(--kw-radius); overflow: hidden; background: var(--kw-surface-2); }
/* static child (not an overlay): while no file is open the placeholder itself gives
 * the preview box its height; with a file open it is hidden and the canvas rules. */
.kw-tp__empty {
  display: grid; place-content: center; justify-items: center; gap: var(--kw-space-3);
  min-height: 260px; padding: var(--kw-space-6) var(--kw-space-4); text-align: center;
}
.kw-tp__empty[hidden] { display: none; }
.kw-tp__empty .kw-icon { width: 36px; height: 36px; color: var(--kw-muted); }
.kw-tp__empty p { margin: 0; max-width: 34ch; color: var(--kw-muted); font-size: var(--kw-fs-sm); }
.kw-tp__canvas-wrap canvas { display: block; width: 100%; }
.kw-tp__canvas-wrap canvas[hidden] { display: none; }
.kw-tp__overlay { position: absolute; inset: 0; }
.kw-tp__overlay.is-empty { cursor: default; }
.kw-tp__mark {
  position: absolute; transform: translate(0, -100%); /* anchor: left baseline */
  padding: 1px 3px; margin: -1px -3px; border: 1px dashed transparent; border-radius: 2px;
  cursor: grab; white-space: pre; line-height: 1.25; user-select: none; touch-action: none;
}
.kw-tp__mark:hover { border-color: var(--kw-line-strong); }
.kw-tp__mark.is-selected { border-style: solid; }
.kw-tp__mark.is-dragging { cursor: grabbing; }
.kw-tp__locknote {
  display: flex; gap: var(--kw-space-2); align-items: center;
  border: 1px solid var(--kw-warning); border-radius: var(--kw-radius);
  background: var(--kw-warning-soft); color: var(--kw-warning);
  padding: var(--kw-space-2) var(--kw-space-3); font-size: var(--kw-fs-sm);
}
.kw-tp__locknote[hidden] { display: none; }
.kw-tp__raster-confirm {
  display: flex; flex-wrap: wrap; gap: var(--kw-space-3); align-items: center; justify-content: space-between;
  border: 1px solid var(--kw-line-strong); border-radius: var(--kw-radius);
  padding: var(--kw-space-2) var(--kw-space-3); background: var(--kw-surface);
}
.kw-tp__raster-confirm[hidden] { display: none; }
.kw-tp__raster-confirm .kw-hint { margin: 0; flex: 1 1 260px; }

.kw-tp__export { margin: 0; }
@media (max-width: 767px) { .kw-tp__export .kw-btn--primary { width: 100%; } }