/* PDF42 Editor app shell — layout + chrome on theme.css tokens.
   Owned by WS0. Module-internal styles live with their module's mount
   (scoped under the mount id); this file never styles inside a mount. */

html, body { height: 100%; }

body.editor-app {
  display: grid;
  grid-template-rows: 56px 1fr;
  grid-template-columns: 76px 1fr auto;
  grid-template-areas:
    "topbar topbar topbar"
    "toolrail canvas panelrail";
  height: 100dvh;
  overflow: hidden;
  background: var(--lavender-mist);
  line-height: 1.4;
}

/* ---------- Top bar ---------- */
.ed-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid var(--divider);
  z-index: 20;
}
.ed-topbar .brand { flex: none; }
.ed-topbar .brand span.name { font-size: 15px; }
.ed-doc-title {
  /* Flexible middle zone: takes the space between the modes pill and the
     actions, so the filename shows as fully as room allows (ellipsis only
     when it genuinely can't fit) and never collides with the pill. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-ink);
}
.ed-doc-title .fname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ed-doc-title .dirty-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-orange);
  flex: none;
  visibility: hidden;
}
body[data-dirty="true"] .ed-doc-title .dirty-dot { visibility: visible; }

/* Mode switcher — now a vertical stack at the top of the left rail. Each mode
   is an icon with a small label under it. (theme.css sets a global
   `nav{height:64px}`; height:auto here keeps the rail nav content-sized.) */
.ed-modes {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
  padding: 0 6px;
  box-sizing: border-box;
}
.ed-modes .ed-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--soft-text);
  padding: 8px 2px 6px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.ed-modes .ed-mode svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ed-modes .ed-mode:hover { background: var(--lavender-mist); color: var(--blue-ink); }
.ed-modes .ed-mode[aria-selected="true"] {
  background: var(--primary-blue-10, #E8ECFE);
  color: var(--primary-blue);
}
/* Divider between the mode switcher and the mode's tools below it. */
.ed-modes-sep {
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--divider);
  margin: 8px 0 6px;
}
/* Hide the separator + tools zone spacing when there are no tools (View mode). */
body[data-mode="view"] .ed-modes-sep { display: none; }

.ed-topbar .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.ed-iconbtn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--soft-text);
  cursor: pointer;
}
.ed-iconbtn:hover { background: var(--lavender-mist); color: var(--blue-ink); }
.ed-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-topbar .btn { padding: 9px 18px; font-size: 14px; }
.ed-topbar .btn:disabled { opacity: .45; cursor: default; }
.ed-topbar .btn:disabled:hover { background: var(--primary-blue); }

.ed-privacy {
  font-size: 12px;
  color: var(--secondary-text);
  flex: none;
}
@media (max-width: 1100px) { .ed-privacy { display: none; } }

/* ---------- Left tool rail (modes + per-mode tools) ---------- */
.ed-toolrail {
  grid-area: toolrail;
  background: #fff;
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
}
/* WS3's annotation tools (built as .tr-tool / .tr-action) belong to Comment
   mode; hide them in the other modes so the rail shows only what's relevant.
   The mode switcher (.ed-modes) and its separator always stay visible. */
body:not([data-mode="comment"]) #tool-rail .tr-tool,
body:not([data-mode="comment"]) #tool-rail .tr-action,
body:not([data-mode="comment"]) #tool-rail .tr-sep,
body:not([data-mode="comment"]) #tool-rail .tr-spacer {
  display: none;
}

/* ---------- Text-layer box normalization ----------
   Aligns per-line selection/highlight boxes to a common band for documents
   with per-word font-size variation (scanned/OCR'd books), so text selection,
   search hits, and highlight annotations render as clean bands instead of a
   ragged, overlapping envelope. viewer.js (normalizeTextLayerBoxes) sets two
   properties per span from the line's median top/bottom — --hy (a scaleY
   ratio, equalizes box height) and --ty (a translateY in px, aligns the box
   top/baseline) — which we compose into pdf.js's own span transform.

   The transform below MUST mirror the vendored pdf_viewer.css span rule
   (`.textLayer > :not(.markedContent)` etc.: rotate → scaleX → scale) exactly,
   or we'd drop rotation / min-font-size handling. Order matters and is paired
   with `transform-origin: 0 0`: translateY(--ty) is applied FIRST (leftmost),
   in unscaled screen px, to move the box top to the line's median top; then
   pdf.js's rotate/scaleX; then scaleY(--hy) grows the box down from that top
   to the median height; then the min-font-size scale. Both vars default to
   the identity (0px / 1) so untouched spans are unchanged. This selector
   equals pdf.js's specificity and editor.css loads after pdf_viewer.css, so
   it wins. */
.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
  transform: translateY(var(--ty, 0px)) rotate(var(--rotate, 0deg))
    scaleX(var(--scale-x, 1)) scaleY(var(--hy, 1))
    scale(var(--min-font-size-inv, 1));
  transform-origin: 0 0;
}

/* ---------- Canvas area ---------- */
.ed-canvas {
  grid-area: canvas;
  position: relative;
  background: #E7E4F0;
  overflow: hidden;
}
#viewer-container {
  position: absolute;
  inset: 0;
  overflow: auto;
}
body[data-mode="organize"] #viewer-container { display: none; }
#organize-grid {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: none;
}
body[data-mode="organize"] #organize-grid { display: block; }

/* Empty state (no document open) */
#empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body[data-doc="true"] #empty-state { display: none; }
.ed-drop-card {
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--r-xl);
  padding: 44px 48px;
  text-align: center;
  max-width: 420px;
}
.ed-drop-card.dragover { border: 2px dashed var(--primary-blue); }
.ed-drop-card .logo {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--primary-blue); color: #fff;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800;
  margin: 0 auto 18px;
}
.ed-drop-card h1 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.01em; }
.ed-drop-card p.hint { font-size: 14px; color: var(--soft-text); margin: 0 0 24px; }
.ed-drop-card p.privacy {
  font-size: 12.5px; color: var(--secondary-text); margin: 18px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ed-drop-card p.privacy svg { width: 14px; height: 14px; fill: none; stroke: var(--tool-tint-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Right panel rail ---------- */
.ed-panelrail {
  grid-area: panelrail;
  display: flex;
  background: #fff;
  border-left: 1px solid var(--divider);
  z-index: 10;
  /* Grid items default to min-height auto — without this, tall panel
     content (thumbnail strips, big outlines) inflates the whole app row. */
  min-height: 0;
}
.ed-panelbody {
  width: 264px;
  border-right: 1px solid var(--divider);
  display: none;
  flex-direction: column;
  min-height: 0;
}
body[data-panel] .ed-panelbody { display: flex; }
.ed-panelbody > section {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
body[data-panel="thumbnails"] #panel-thumbnails,
body[data-panel="outline"] #panel-outline,
body[data-panel="search"] #panel-search { display: block; }

.ed-paneltabs {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 4px;
}
.ed-paneltabs .ed-iconbtn[aria-pressed="true"] {
  background: var(--primary-blue-10);
  color: var(--primary-blue);
}
.ed-paneltabs .spacer { flex: 1; }
#nav-controls { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--deep-blue);
  color: #fff;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  max-width: min(520px, calc(100vw - 48px));
  z-index: 100;
}
#toast[hidden] { display: none; }
#toast.error { background: #B3261E; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ed-panelbody { width: 232px; }
}
@media (max-width: 720px) {
  .ed-paneltabs { width: 48px; }
  /* Panel body overlays the canvas instead of squeezing it */
  .ed-panelrail { position: relative; }
  .ed-panelbody {
    position: absolute;
    right: 48px;
    top: 0;
    bottom: 0;
    box-shadow: -8px 0 24px rgba(28, 35, 90, .12);
  }
}

/* Narrow: with the modes in the left rail, the top bar is simply
   brand · filename · actions and fits one row; hide the wordmark for room. */
@media (max-width: 560px) {
  .ed-topbar { gap: 10px; padding: 0 10px; }
  .ed-topbar .brand span.name { display: none; }
  .ed-doc-title { font-size: 13px; }
  .ed-topbar .btn { padding: 8px 14px; font-size: 13px; }
  .ed-drop-card { padding: 32px 24px; }
}