/*
 * Markdown viewer: workspace layout and containment.
 *
 * Layer: tool. Prefix: .mdv-  (see .claude/rules/css.md)
 * Loads after css/style.css and css/components/tool-shell.css.
 *
 * Typography for the rendered preview arrives in a later phase; the
 * containment rules below ship here because every phase from the render
 * pipeline onward relies on them to keep a wide table or a long code line
 * from scrolling the page sideways at 320px.
 */

.mdv-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 3vw, 1.25rem);
  padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

/* Two panes side by side once there is room. Below this the panes stay
   stacked and BOTH remain visible: a live preview is the point of the tool,
   so no view mode may hide it on a phone. */
@media (min-width: 768px) {
  .mdv-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* min-width:0 lets a grid child actually shrink, which is what stops a wide
   table inside it from pushing the whole page wider than the viewport. */
.mdv-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white-color, #fff);
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius, 10px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
  overflow: hidden;
}

.mdv-pane-title {
  font-size: clamp(14px, 3.6vw, 15px);
  font-weight: 600;
  color: var(--secondary-color, #005B95);
  padding: var(--space-3, 0.75rem) clamp(0.75rem, 3vw, 1rem);
  border-block-end: 1px solid #e2e8f0;
  background: #F9FBFD;
}

.mdv-pane-body {
  padding: clamp(0.75rem, 3vw, 1.25rem);
  min-width: 0;
}

/* --- editor ------------------------------------------------------------ */

#mdv-editor {
  display: block;
  width: 100%;
  min-height: clamp(240px, 55vh, 70vh);
  padding: clamp(0.75rem, 3vw, 1rem);
  border: 0;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* max() keeps this at 16px+ so iOS Safari does not zoom on focus, and
     because the global root font-size floors at 14px on phones. */
  font-size: max(16px, 1rem);
  line-height: 1.6;
  color: var(--text-color, #2D3748);
  tab-size: 2;
  background: var(--white-color, #fff);
}

#mdv-editor:focus-visible {
  outline: 2px solid transparent;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px var(--secondary-color, #005B95);
}

.mdv-hint {
  font-size: clamp(13px, 3.4vw, 14px);
  color: var(--text-light, #4A5568);
  padding: 0 clamp(0.75rem, 3vw, 1rem) var(--space-3, 0.75rem);
}

/* --- drop overlay ------------------------------------------------------ */

/* pointer-events:none so the overlay can never swallow a click if a
   dragleave is missed; the dashed border plus text means the state is not
   signalled by colour alone. */
.mdv-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: 3px dashed var(--secondary-color, #005B95);
  border-radius: var(--border-radius, 10px);
  background: rgba(255, 255, 255, 0.92);
  font-size: clamp(16px, 4.4vw, 19px);
  font-weight: 600;
  color: var(--secondary-color, #005B95);
  text-align: center;
  padding: var(--space-4, 1rem);
}

.mdv-workspace.is-dragover .mdv-drop-overlay {
  display: flex;
}

/* --- containment (relied on from the render phase onward) -------------- */

/* A wide table scrolls inside its own region instead of widening the page.
   The wrapper is created by postProcess, not by markup. */
.mdv-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.mdv-prose pre {
  /* Long unbroken code lines wrap rather than forcing a horizontal scroll. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* Code is always read left-to-right, even inside an RTL document. */
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.mdv-prose code,
.mdv-prose kbd {
  direction: ltr;
  unicode-bidi: isolate;
}

.mdv-prose img {
  max-width: 100%;
  height: auto;
}

.mdv-preview {
  min-height: clamp(240px, 55vh, 70vh);
  min-width: 0;
}

.mdv-preview:empty::after {
  content: "";
}

/* ======================================================================
 * Preview typography
 *
 * Sizes use px minimums inside clamp() on purpose: the global root font-size
 * floors at 14px on phones (css/style.css), so a rem-based scale renders ~12%
 * smaller than it reads. Spacing uses logical properties throughout so the
 * Hebrew twin mirrors without a second stylesheet.
 * ==================================================================== */

.mdv-prose {
  font-size: clamp(16px, 4.4vw, 17px);
  line-height: 1.7;
  color: var(--text-color, #2D3748);
  overflow-wrap: break-word;
}

.mdv-prose > :first-child {
  margin-block-start: 0;
}

.mdv-prose > :last-child {
  margin-block-end: 0;
}

/* --- headings ---------------------------------------------------------- */

.mdv-prose h1,
.mdv-prose h2,
.mdv-prose h3,
.mdv-prose h4,
.mdv-prose h5,
.mdv-prose h6 {
  color: var(--secondary-color, #005B95);
  line-height: 1.3;
  margin-block: 1.6em 0.6em;
  text-wrap: balance;
}

.mdv-prose h1 { font-size: clamp(25px, 6.4vw, 30px); }
.mdv-prose h2 { font-size: clamp(21px, 5.4vw, 25px); }
.mdv-prose h3 { font-size: clamp(18px, 4.8vw, 20px); }
.mdv-prose h4 { font-size: clamp(17px, 4.5vw, 18px); }
.mdv-prose h5,
.mdv-prose h6 { font-size: clamp(16px, 4.4vw, 17px); }

/* A rule under the top two levels, matching how README files usually read. */
.mdv-prose h1,
.mdv-prose h2 {
  padding-block-end: 0.25em;
  border-block-end: 1px solid #e2e8f0;
}

/* --- text -------------------------------------------------------------- */

.mdv-prose p {
  margin-block: 0 1em;
}

.mdv-prose strong { font-weight: 700; }
.mdv-prose em { font-style: italic; }
.mdv-prose del { color: var(--text-light, #4A5568); }

.mdv-prose a {
  /* Never inherit page.css's #9698A5, which is ~2.6:1 on white. */
  color: var(--secondary-color, #005B95);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mdv-prose a:hover {
  color: #00719F;
}

.mdv-prose a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--secondary-color, #005B95);
  border-radius: 2px;
}

/* --- lists ------------------------------------------------------------- */

.mdv-prose ul,
.mdv-prose ol {
  margin-block: 0 1em;
  padding-inline-start: 1.5em;
}

.mdv-prose li {
  margin-block-end: 0.35em;
}

.mdv-prose li > ul,
.mdv-prose li > ol {
  margin-block: 0.35em 0;
}

/* GFM task lists: the marker is the checkbox, so drop the bullet. */
.mdv-prose li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-inline-start: -1.4em;
}

.mdv-prose input[type="checkbox"] {
  margin-inline-end: 0.45em;
  /* Read-only by design — the hook forces `disabled`. */
  cursor: default;
}

/* --- quotes, rules ----------------------------------------------------- */

.mdv-prose blockquote {
  margin-block: 0 1em;
  margin-inline: 0;
  padding-inline-start: 1em;
  border-inline-start: 4px solid #cbd5e0;
  color: var(--text-light, #4A5568);
}

.mdv-prose hr {
  height: 1px;
  margin-block: 1.75em;
  border: 0;
  background: #e2e8f0;
}

/* --- code -------------------------------------------------------------- */

.mdv-prose code,
.mdv-prose kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

/* Inline code only: a fenced block styles the <pre>, not the <code>. */
.mdv-prose :not(pre) > code {
  padding: 0.15em 0.4em;
  background: #f1f5f9;
  border-radius: 4px;
  color: #9d174d;
}

.mdv-prose pre {
  margin-block: 0 1em;
  padding: clamp(0.7rem, 3vw, 1rem);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius, 8px);
  font-size: clamp(13px, 3.5vw, 14px);
  line-height: 1.6;
}

.mdv-prose kbd {
  padding: 0.1em 0.45em;
  border: 1px solid #cbd5e0;
  border-block-end-width: 2px;
  border-radius: 4px;
  background: #f8fafc;
  font-size: 0.85em;
}

/* --- tables ------------------------------------------------------------ */

.mdv-table-wrap {
  margin-block: 0 1em;
}

.mdv-prose table {
  border-collapse: collapse;
  /* Not width:100% — a narrow table should stay narrow rather than stretch. */
  font-size: clamp(14px, 3.8vw, 15px);
}

.mdv-prose th,
.mdv-prose td {
  padding: 0.45em 0.75em;
  border: 1px solid #e2e8f0;
  text-align: start;
}

.mdv-prose th {
  background: #f8fafc;
  font-weight: 600;
  color: var(--secondary-color, #005B95);
}

/* --- media ------------------------------------------------------------- */

.mdv-prose img {
  margin-block: 0.25em;
  border-radius: 4px;
}

/* --- print ------------------------------------------------------------- */

@media print {
  /* Only the rendered document is worth paper. */
  .tool-header,
  .tool-toolbar,
  .tool-status,
  .tool-intro,
  .mdv-pane--editor,
  .mdv-hint,
  .footer,
  .tool-skip-link {
    display: none !important;
  }

  .mdv-workspace {
    display: block;
  }

  .mdv-pane {
    border: 0;
    box-shadow: none;
  }

  .mdv-pane-title {
    display: none;
  }

  .mdv-prose a {
    color: #000;
  }

  .mdv-prose pre,
  .mdv-prose blockquote,
  .mdv-table-wrap {
    break-inside: avoid;
  }
}

@media (forced-colors: active) {
  .mdv-prose pre,
  .mdv-prose :not(pre) > code,
  .mdv-prose kbd,
  .mdv-prose th,
  .mdv-prose td {
    border: 1px solid CanvasText;
  }

  .mdv-prose blockquote {
    border-inline-start: 4px solid CanvasText;
  }
}

/* --- view modes -------------------------------------------------------- */

/* Only meaningful at the two-column breakpoint; below it both panes stay. */
@media (min-width: 768px) {
  .mdv-workspace.is-mode-editor,
  .mdv-workspace.is-mode-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .mdv-workspace.is-mode-editor .mdv-pane--preview,
  .mdv-workspace.is-mode-preview .mdv-pane--editor {
    display: none;
  }
}

/* --- print ------------------------------------------------------------- */

/*
 * Print ALWAYS shows the preview, whatever view mode is active. These
 * selectors are more specific than the mode rules above on purpose: printing
 * from "Editor only" would otherwise produce a blank page.
 */
@media print {
  .mdv-workspace.is-mode-editor .mdv-pane--preview,
  .mdv-workspace.is-mode-preview .mdv-pane--preview,
  .mdv-workspace.is-mode-both .mdv-pane--preview {
    display: block !important;
  }

  .mdv-workspace.is-mode-editor .mdv-pane--editor,
  .mdv-workspace.is-mode-preview .mdv-pane--editor,
  .mdv-workspace.is-mode-both .mdv-pane--editor {
    display: none !important;
  }

  .tool-view,
  .tool-seg,
  .tool-count {
    display: none !important;
  }
}