/* LEGAL TOOL styles — the "write on the page" box and its live page preview.
   ---------------------------------------------------------------------------
   Own stylesheet on purpose (client: "make js seprate and also css so it
   didnt concflit"): these classes are only ever used by the Legal tool's
   module (static/js/editor-legal.js), so nothing here can touch a normal
   document. Loaded by editor.html after editor.css. */

/* The live preview drawn over the page while typing (inside the page's
   overlay, so it turns with a rotated sheet and scales with zoom — the
   sizes come from px() in the kernel, passed through ctx). */
.legal-preview { position: absolute; overflow: hidden; pointer-events: none; z-index: 1; }
.legal-preview .lp-line { position: absolute; left: 0; right: 0; white-space: pre; }
.legal-preview .lp-marker { position: absolute; left: 0; width: 2.4em; text-align: left; }

/* The writing starts HERE — a small crosshair at the flow's origin.
   (Drawn right/down only: the host clips anything outside the area.) */
.lp-startmark { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lp-startmark::before, .lp-startmark::after {
  content: ""; position: absolute; background: rgba(25, 118, 210, .75);
}
.lp-startmark::before { left: 0; top: 0; width: 16px; height: 1px; }
.lp-startmark::after { left: 0; top: 0; width: 1px; height: 16px; }

/* While the start-point pick is armed, the sheets show a crosshair. */
body.legal-picking .overlay { cursor: crosshair; }
body.legal-picking .ed-legal-box .lb-btn[data-lb="start"] {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark);
}

/* The writing box itself: a card on the right of the workspace on desktop;
   phones and tablets get a bottom sheet (see the media query below).
   z-index 60 keeps it UNDER the toolbar menus (70/80) — the More menu drops
   down the right edge and must never be blocked by the panel (found live:
   "Insert blank page" was unreachable on a legal paper).
   Named .ed-legal-box on purpose: the site's Terms / Privacy pages already
   use .legal-box (app.css) and their paddings / margins leaked into this
   sheet (found live 2026-10-15 — the sheet got a 42px gap up top and ran
   110px too tall, cutting Cancel / Done off). */
.ed-legal-box {
  position: fixed; z-index: 60;
  top: calc(var(--ed-chrome-h, 146px) + 10px); right: 12px; bottom: 14px;
  width: 348px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e2e8ef; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(15, 35, 60, .18), 0 2px 8px rgba(15, 35, 60, .1);
  overflow: hidden;
  overflow-y: auto;
}
.ed-legal-box[hidden] { display: none !important; }
.lb-head {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 8px;
  border-bottom: 1px solid #eef2f6;
}
.lb-head strong { font-size: 14px; color: #1d2b3a; }
.lb-sub { font-size: 11.5px; color: #7a8894; flex: 1 1 auto; min-width: 0; }
.lb-head .props-close { position: static; margin-left: auto; }

/* "Write on" — the page picker: front of the stamp paper, its back, any
   dummy page (client: "let user decide to where to write the document"). */
.lb-target {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid #eef2f6; background: #fbfcfe;
}
.lb-target label { font-size: 11.5px; font-weight: 600; color: #55606c; text-transform: uppercase; letter-spacing: .4px; }
.lb-target select {
  flex: 1 1 auto; min-width: 0; height: 27px; padding: 0 6px;
  font: inherit; font-size: 12.5px; color: #37474f;
  border: 1px solid #dbe3ec; border-radius: 7px; background: #fff;
}

/* The dummy page colour — back page and inserted pages wear it (client:
   "dummy page size and color where is that"). */
.lb-paper {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid #eef2f6; background: #fbfcfe;
}
.lb-paper label { font-size: 11.5px; font-weight: 600; color: #55606c; text-transform: uppercase; letter-spacing: .4px; }
.lb-paper .fb-color { display: inline-flex; align-items: center; gap: 3px; }
.lb-paper input[type=color] { width: 27px; height: 27px; padding: 2px; border: 1px solid #dbe3ec; border-radius: 7px; background: #fff; }
.lb-paper-note { font-size: 11px; color: #8a97a3; }

.lb-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 8px 10px; border-bottom: 1px solid #eef2f6; background: #fbfcfe;
}
.lb-sep { width: 1px; height: 18px; background: #e3e9f0; margin: 0 2px; }
.lb-btn {
  min-width: 27px; height: 27px; padding: 0 7px;
  border: 1px solid #dbe3ec; border-radius: 7px; background: #fff;
  color: #37474f; font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer;
}
.lb-btn:hover { border-color: var(--accent-line); }
.lb-btn.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-dark); }
.lb-btn.lb-wide { font-size: 11.5px; }
.lb-tools select {
  height: 27px; max-width: 118px; padding: 0 4px; font: inherit; font-size: 12px;
  border: 1px solid #dbe3ec; border-radius: 7px; background: #fff; color: #37474f;
}
.lb-tools input[type=number] {
  width: 46px; height: 27px; padding: 0 5px; font: inherit; font-size: 12px;
  border: 1px solid #dbe3ec; border-radius: 7px;
}
.lb-tools .fb-color { display: inline-flex; align-items: center; gap: 3px; }
.lb-tools input[type=color] { width: 27px; height: 27px; padding: 2px; border: 1px solid #dbe3ec; border-radius: 7px; background: #fff; }

.lb-text {
  flex: 1 1 auto; overflow-y: auto; min-height: 96px;
  padding: 10px 13px; outline: none; color: #222;
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.lb-text:empty::before, .lb-text:has(> br:only-child)::before {
  content: attr(data-placeholder); color: #9aa7b4; pointer-events: none;
}
.lb-text ul, .lb-text ol { margin: 4px 0; padding-left: 22px; }

.lb-status {
  margin: 0; padding: 5px 12px; border-top: 1px solid #eef2f6;
  font-size: 11.5px; color: #6b7a89; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-status.warn { color: #a13e12; background: #fff4ec; }

.lb-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 9px 12px; border-top: 1px solid #eef2f6;
}
.ed-legal-box .lb-actions .btn { height: 34px; min-height: 0; padding: 0 16px; font-size: 13px; }

/* Every row keeps its height — the text area is the only part that flexes
   (and it scrolls inside itself), so the status line and the Cancel /
   Done buttons can never be squeezed off the sheet. */
.lb-head, .lb-target, .lb-paper, .lb-temp, .lb-tools,
.lb-status, .lb-actions { flex: 0 0 auto; }

/* Phones / tablets (and narrow desktop windows): the box is a bottom
   sheet, and the viewer keeps clear of it so the page (and the live
   preview) can be scrolled into view. Height is content-driven up to
   min(74vh, 480px) — enough for every row including Cancel / Done
   (found live: at 48vh the status and the buttons were clipped off the
   bottom of the sheet and unreachable). The sheet scrolls internally
   as a last resort on very short windows, so nothing can ever be lost. */
@media (max-width: 1024px) {
  .ed-legal-box {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-height: min(74vh, 480px);
    overflow-y: auto;
  }
  body.legal-open .viewer-wrap { padding-bottom: calc(min(74vh, 480px) + 18px); }
  body.legal-open .page-wrap { scroll-margin-top: 158px; }
}

/* ---------------------------------------------------------------- wizard
   The Legal tool's 3-step dialog (requirements -> front & back upload ->
   dummy page size + colour). Wired in editor-legal.js. */
.legal-wizard { width: min(560px, 94vw); position: relative; }
.lw-step h3 { margin: 2px 0 10px; font-size: 18px; color: #1d2b3a; }
.lw-lead { margin: 0 0 8px; color: #37474f; font-size: 14px; }
.lw-needs { margin: 0 0 10px; padding-left: 18px; color: #37474f; font-size: 13.5px; line-height: 1.55; }
.lw-needs li { margin-bottom: 6px; }
.lw-note { margin: 8px 0 0; }
.lw-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.lw-slots { display: grid; gap: 10px; }
.lw-slot {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; cursor: pointer; font: inherit;
  background: #fff; border: 1.5px dashed #c9d6e2; border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.lw-slot:hover { border-color: var(--accent-line); background: #f7fbff; }
.lw-slot-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: 14px;
}
.lw-slot-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lw-slot-tx strong { font-size: 14px; color: #1d2b3a; }
.lw-slot-tx small { font-size: 12px; color: #7a8894; }
.lw-slot-ok { flex: 0 0 auto; color: #2e7d32; font-weight: 700; font-size: 18px; }
.lw-slot.is-done { border-style: solid; border-color: #b6d7b9; background: #f5fbf5; }

.lw-grid { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.lw-grid label { display: block; font-size: 12px; font-weight: 600; color: #55606c; margin-bottom: 5px; }
.lw-grid select {
  width: 100%; height: 34px; padding: 0 8px; font: inherit; font-size: 13px; color: #37474f;
  border: 1px solid #dbe3ec; border-radius: 8px; background: #fff;
}
.lw-grid .fb-color { display: inline-flex; align-items: center; gap: 4px; }
.lw-grid input[type=color] { width: 34px; height: 34px; padding: 2px; border: 1px solid #dbe3ec; border-radius: 8px; background: #fff; }

/* The sketch's Print | Pdf choice (wizard step 1). */
.lw-source { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 4px; }
.lw-src {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 13px; cursor: pointer; font: inherit;
  background: #fff; border: 1.5px solid #d7e0ea; border-radius: 12px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.lw-src strong { font-size: 14px; color: #1d2b3a; }
.lw-src small { font-size: 11.5px; color: #7a8894; }
.lw-src.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(31, 122, 237, .12);
}

/* Templates row in the writing box (temp / savet / add + name field). */
.lb-temp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 12px; border-bottom: 1px solid #eef2f6; background: #fbfcfe;
}
.lb-temp label { font-size: 11.5px; font-weight: 600; color: #55606c; text-transform: uppercase; letter-spacing: .4px; }
.lb-temp select {
  min-width: 96px; max-width: 132px; height: 27px; padding: 0 6px;
  font: inherit; font-size: 12.5px; color: #37474f;
  border: 1px solid #dbe3ec; border-radius: 7px; background: #fff;
}
.lb-temp input[type=text] {
  width: 110px; height: 27px; padding: 0 7px;
  font: inherit; font-size: 12.5px; color: #37474f;
  border: 1px solid #dbe3ec; border-radius: 7px;
}