/* PDF page organizer — shared by /organize-pdf/ and /delete-pdf-pages/.
 *
 * SCOPING RULE (feedback_scope_css_to_page_wrapper): nav.html and footer-wasm.html
 * are shared includes that live OUTSIDE the tool markup. Nothing here may use a
 * bare element selector at body level, or it cascades into the site chrome — that
 * bug shipped once on the /pdf-to-word/ articles and is expensive to find by eye.
 * Everything below is class-scoped. The one exception is `body.og-page`, which sets
 * the page background, text colour, font stack and nav offset — those DO inherit into
 * the shared nav/footer, and that is deliberate: every WASM tool page on the site
 * (/merge-excel-online/, /redact/, the splitter) already renders its chrome in this
 * same system stack, so scoping the font to .og-wrap would make this page the odd
 * one out rather than fixing anything. Verified against /merge-excel-online/ 2026-08-18.
 */

:root {
  --og-bg: #ffffff;
  --og-panel: #f6f8f8;
  --og-accent: #0f766e;
  --og-accent-deep: #115e59;
  --og-amber: #b45309;
  --og-danger: #b91c1c;
  --og-text: #0f172a;
  --og-muted: #4b5563;
  --og-border: #dfe5e5;
  color-scheme: light;
}

body.og-page {
  margin: 0;
  background: var(--og-bg);
  color: var(--og-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  padding-top: 56px;
}

.og-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.og-wrap * { box-sizing: border-box; }

/* ---------- hero ---------- */
.og-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.og-hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.og-hero .og-sub { margin: 0 auto; max-width: 660px; font-size: 1.08rem; color: var(--og-muted); }
.og-hero .og-trust { margin: 0.9rem auto 0; font-size: 0.85rem; color: var(--og-muted); }

/* ---------- privacy banner ---------- */
.og-privacy {
  display: flex; align-items: center; gap: 1rem;
  border-radius: 10px; padding: 0.9rem 1.15rem; margin: 0 0 1.25rem;
  border: 1px solid var(--og-border); background: var(--og-panel);
}
.og-privacy.offline { border-color: #86efac; background: rgba(74, 222, 128, 0.10); }
.og-privacy .og-icon { font-size: 1.4rem; line-height: 1; }
.og-privacy .og-ptext { flex: 1; min-width: 0; }
.og-privacy h2 { margin: 0; font-size: 0.98rem; font-weight: 700; }
.og-privacy p { margin: 0.15rem 0 0; font-size: 0.87rem; color: var(--og-muted); }
.og-privacy .og-verify {
  border: 1px solid var(--og-border); background: #fff; color: var(--og-text);
  border-radius: 6px; padding: 0.4rem 0.75rem; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.og-privacy .og-verify:hover { border-color: var(--og-accent); color: var(--og-accent); }
.og-privacy .og-badge {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem; border-radius: 999px; background: #e5e7eb; color: var(--og-muted); white-space: nowrap;
}
.og-privacy.offline .og-badge { background: #16a34a; color: #fff; }

.og-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center; z-index: 2000; padding: 1rem;
}
.og-modal-bg.show { display: flex; }
.og-modal {
  background: #fff; border-radius: 12px; max-width: 540px; width: 100%;
  padding: 1.75rem; max-height: 90vh; overflow-y: auto;
}
.og-modal h2 { margin: 0 0 0.85rem; font-size: 1.2rem; }
.og-modal .og-check {
  background: rgba(15, 118, 110, 0.08); border: 1px solid rgba(15, 118, 110, 0.25);
  padding: 0.55rem 0.8rem; border-radius: 6px; margin: 0.6rem 0; font-size: 0.9rem;
}

/* ---------- dropzone ---------- */
.og-drop {
  border: 2px dashed var(--og-border); border-radius: 12px;
  padding: 2.5rem 1.5rem; text-align: center; cursor: pointer;
  background: var(--og-panel); transition: border-color .15s, background .15s;
}
.og-drop:hover, .og-drop.og-dragging { border-color: var(--og-accent); background: rgba(15, 118, 110, 0.05); }
.og-drop .og-drop-icon { font-size: 2.1rem; }
.og-drop .og-drop-main { margin: 0.5rem 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
.og-drop .og-drop-sub { margin: 0; font-size: 0.88rem; color: var(--og-muted); }

.og-toast {
  border-radius: 8px; padding: 0.75rem 1rem; margin: 0.75rem 0;
  font-size: 0.9rem; display: none;
}
.og-toast.show { display: block; }
.og-toast.err { background: rgba(185, 28, 28, 0.08); border: 1px solid var(--og-danger); color: var(--og-danger); }
.og-toast.ok  { background: rgba(15, 118, 110, 0.08); border: 1px solid var(--og-accent); color: var(--og-accent-deep); }

/* ---------- editor ---------- */
.og-editor { display: none; margin-top: 1.5rem; }
.og-editor.show { display: block; }

.og-bar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: var(--og-panel); border: 1px solid var(--og-border);
  border-radius: 10px 10px 0 0; padding: 0.75rem 1rem;
}
.og-bar .og-status { flex: 1 1 220px; font-size: 0.9rem; color: var(--og-muted); }
.og-bar .og-status strong { color: var(--og-text); font-variant-numeric: tabular-nums; }
.og-bar .og-status .og-cut { color: var(--og-danger); }
.og-bar-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.og-bar-actions button {
  padding: 0.4rem 0.7rem; font-size: 0.8rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--og-border); background: #fff; color: var(--og-text);
}
.og-bar-actions button:hover { border-color: var(--og-accent); color: var(--og-accent); }

.og-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.85rem; padding: 1.1rem;
  border: 1px solid var(--og-border); border-top: 0; border-radius: 0 0 10px 10px;
  background: #fff;
}
.og-thumb {
  position: relative; border: 2px solid var(--og-border); border-radius: 8px;
  padding: 0.4rem; background: #fff; cursor: grab;
  touch-action: none; user-select: none;
  transition: border-color .12s, box-shadow .12s, opacity .12s;
}
.og-thumb:hover { border-color: var(--og-accent); box-shadow: 0 2px 10px rgba(15, 118, 110, 0.15); }
.og-thumb:active { cursor: grabbing; }
.og-thumb.og-dragging { opacity: 0.35; }
.og-thumb.og-over-l { border-left-color: var(--og-amber); border-left-width: 5px; }
.og-thumb.og-over-r { border-right-color: var(--og-amber); border-right-width: 5px; }
.og-thumb.og-cut { opacity: 0.4; border-color: var(--og-danger); background: rgba(185, 28, 28, 0.04); }
.og-thumb.og-cut:hover { opacity: 0.85; }
.og-thumb.og-sel { border-color: var(--og-accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22); }

.og-thumb .og-canvas-box { overflow: hidden; border-radius: 4px; background: #fff; }
/* Rotation is re-rendered by pdf.js at the new angle rather than CSS-transformed,
 * so the thumbnail box always matches the real page shape. No transform here. */
.og-thumb canvas { width: 100%; height: auto; display: block; background: #fff; }

.og-thumb .og-pos {
  position: absolute; top: 0.3rem; left: 0.3rem; z-index: 2;
  background: var(--og-accent); color: #fff; font-size: 0.7rem; font-weight: 700;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.og-thumb.og-cut .og-pos { background: var(--og-danger); }
.og-thumb .og-label { text-align: center; font-size: 0.74rem; color: var(--og-muted); margin-top: 0.35rem; }
.og-thumb .og-tools {
  display: flex; justify-content: center; gap: 0.2rem; margin-top: 0.3rem;
}
.og-thumb .og-tools button {
  border: 1px solid var(--og-border); background: #fff; border-radius: 4px;
  width: 1.9rem; height: 1.6rem; font-size: 0.78rem; line-height: 1; cursor: pointer; color: var(--og-muted);
  display: flex; align-items: center; justify-content: center;
}
.og-thumb .og-tools button:hover { border-color: var(--og-accent); color: var(--og-accent); background: rgba(15,118,110,0.06); }
.og-thumb .og-tools button.og-del:hover { border-color: var(--og-danger); color: var(--og-danger); background: rgba(185,28,28,0.06); }

.og-loading { padding: 2rem; text-align: center; color: var(--og-muted); font-size: 0.92rem; }

/* ---------- save row ---------- */
.og-save {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding: 1rem 1.15rem;
  border: 1px solid var(--og-border); border-radius: 10px; background: var(--og-panel);
}
.og-save label { font-size: 0.88rem; color: var(--og-muted); }
.og-save input[type="text"] {
  flex: 1 1 220px; padding: 0.55rem 0.7rem; font-size: 0.92rem;
  border: 1px solid var(--og-border); border-radius: 6px; background: #fff; color: var(--og-text);
}
.og-btn {
  background: var(--og-accent); color: #fff; border: 1px solid var(--og-accent);
  border-radius: 8px; padding: 0.65rem 1.3rem; font-size: 0.98rem; font-weight: 700; cursor: pointer;
}
.og-btn:hover { background: var(--og-accent-deep); border-color: var(--og-accent-deep); }
.og-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.og-btn.og-ghost { background: #fff; color: var(--og-text); border-color: var(--og-border); font-weight: 600; }
.og-btn.og-ghost:hover { border-color: var(--og-accent); color: var(--og-accent); background: #fff; }

/* ---------- prose sections ---------- */
.og-sec { margin: 3rem 0 0; }
.og-sec h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.9rem; }
.og-sec h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 0.4rem; }
.og-sec p, .og-sec li { color: var(--og-muted); }
.og-sec p { margin: 0 0 0.9rem; }
.og-sec ul, .og-sec ol { margin: 0 0 0.9rem; padding-left: 1.3rem; }
.og-sec li { margin-bottom: 0.4rem; }

.og-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.og-card { border: 1px solid var(--og-border); border-radius: 10px; padding: 1.1rem 1.2rem; background: var(--og-panel); }
.og-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.og-card p { margin: 0; font-size: 0.9rem; }

.og-table-scroll { overflow-x: auto; }
.og-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 460px; }
.og-table th, .og-table td { border: 1px solid var(--og-border); padding: 0.6rem 0.75rem; text-align: left; }
.og-table th { background: var(--og-panel); font-weight: 700; }
.og-table .og-us { background: rgba(15, 118, 110, 0.06); }

.og-faq h3 { font-size: 1rem; margin: 1.3rem 0 0.3rem; color: var(--og-text); }

.og-upsell {
  margin-top: 2.5rem; border: 1px solid var(--og-border); border-left: 4px solid var(--og-accent);
  border-radius: 10px; padding: 1.25rem 1.4rem; background: var(--og-panel);
}
.og-upsell h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.og-upsell p { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--og-muted); }

.og-also {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--og-border);
  font-size: 0.9rem; color: var(--og-muted); text-align: center;
}
.og-also a { color: var(--og-accent); }

@media (max-width: 600px) {
  .og-wrap { padding: 0 1rem 2.5rem; }
  .og-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.6rem; padding: 0.8rem; }
  .og-privacy { flex-wrap: wrap; }
  .og-privacy .og-ptext { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .og-thumb, .og-thumb canvas { transition: none; }
}