/* ==========================================================================
   Markdific tools — shared styles for the /tools/* converter pages.
   Inherits the site's tokens AND type scale from styles.css (--br, --fg,
   --mut, Plus Jakarta Sans / Inter, 16px body). Buttons reuse the site's
   .btn / .btn-primary-lg / .btn-download vocabulary so a tool page reads like
   the rest of markdific.com, not a separate app.
   ========================================================================== */

/* ── page scaffold ── */
.tool-main { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.tool-hero { text-align: center; padding: 40px 0 20px; }
.tool-hero h1 { font-family: var(--disp); font-size: clamp(34px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
.tool-hero .sub { max-width: 620px; margin: 16px auto 0; font-size: 18px; line-height: 1.6; color: var(--mut); }

/* Privacy = our one real differentiator. Give it weight, not a corner. */
.tool-usp { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--brd); background: var(--brs); padding: 10px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--br) 30%, transparent); }
.tool-usp svg { width: 17px; height: 17px; flex-shrink: 0; }
.tool-usp b { font-weight: 700; }

/* ── converter workspace: a toolbar bar + two SEPARATE pane cards ── */
.converter { margin-top: 26px; }
.converter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; background: #fff; border: 1px solid var(--bd); border-radius: 14px; margin-bottom: 14px; }
.converter-bar .spacer { flex: 1; }

/* toolbar buttons — filled and all the SAME height (40px) so the row is even */
.tool-btn { font-family: var(--disp); font-weight: 600; font-size: 15px; cursor: pointer; border-radius: 10px; height: 40px; padding: 0 16px; border: 1px solid #94a3b8; background: var(--bg2); color: var(--fg); display: inline-flex; align-items: center; gap: 8px; transition: background .12s, border-color .12s, color .12s; }
.tool-btn:hover { background: #e7edf3; border-color: var(--fg); }
.tool-btn svg { width: 16px; height: 16px; color: var(--brd); }
.tool-btn.danger svg { color: #b91c1c; }
/* blue primary toolbar button (Upload .md and Download Word) */
.tool-btn.primary { background: var(--br); border-color: var(--br); color: #fff; }
.tool-btn.primary:hover { background: var(--brd); border-color: var(--brd); }
.tool-btn.primary svg { color: #fff; }

.converter-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; }
/* Fixed height so both boxes stay put and scroll INTERNALLY instead of the
   whole page stretching under a long document. */
.pane { display: flex; flex-direction: column; min-width: 0; height: 540px; border: 1px solid var(--bd); border-radius: 14px; background: #fff; overflow: hidden; }
.pane.preview { background: var(--bg2); }            /* distinct bg = clear separation */
.pane-head { display: flex; align-items: baseline; gap: 10px; font-family: var(--disp); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); padding: 12px 16px; border-bottom: 1px solid var(--bd); }
.pane-hint { font-family: var(--body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--sub); }
#md-input { flex: 1; border: 0; resize: none; padding: 16px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.65; color: var(--fg); outline: none; background: transparent; tab-size: 2; }
#md-input::placeholder { color: var(--sub); }
.md-preview { flex: 1; overflow: auto; padding: 22px 26px; background: #fff; }
.md-empty { color: var(--sub); font-size: 15px; text-align: center; margin-top: 32px; }

/* text tool: plain-text output pane */
#md-output { flex: 1; border: 0; resize: none; padding: 16px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.65; color: var(--fg); background: #fff; outline: none; }
.md-count { margin-left: auto; color: var(--sub); font-size: 13px; }

/* toolbar extras: option checkboxes and selects */
.tool-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mut); font-weight: 500; cursor: pointer; user-select: none; }
.tool-opt input { accent-color: var(--br); width: 15px; height: 15px; }
.tool-select { font-family: var(--disp); font-weight: 600; font-size: 14px; height: 40px; padding: 0 10px; border: 1px solid #94a3b8; border-radius: 10px; background: var(--bg2); color: var(--fg); cursor: pointer; }

/* html tool: preview/source view toggle + HTML source pane */
.view-toggle { display: inline-flex; gap: 2px; margin-left: auto; background: #e2e8f0; border-radius: 8px; padding: 2px; }
.view-toggle button { font-family: var(--disp); font-weight: 600; font-size: 12px; padding: 4px 11px; border: 0; background: transparent; color: var(--sub); border-radius: 6px; cursor: pointer; }
.view-toggle button.active { background: #fff; color: var(--fg); }
#md-source { flex: 1; border: 0; resize: none; padding: 16px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; color: var(--fg); background: #fff; outline: none; }

/* image tool: stage + exported card */
.img-stage { flex: 1; overflow: auto; padding: 24px; background: #e9eef4; display: flex; justify-content: center; align-items: flex-start; }
/* the exported card: reuses .md-preview typography but sizes to its content */
.md-image-card { flex: none; overflow: visible; width: 680px; max-width: 100%; background: #fff; border-radius: 14px; padding: 34px 38px; box-shadow: 0 2px 12px rgba(15,23,42,.08); }
.md-image-card > :first-child { margin-top: 0; }
.md-image-card > :last-child { margin-bottom: 0; }

/* drag overlay across both panes */
#md-dropzone.is-drag::after { content: "Drop your .md file to load it"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 700; font-size: 18px; color: var(--brd); background: color-mix(in srgb, var(--brs) 94%, transparent); border: 2px dashed var(--br); border-radius: 14px; z-index: 5; pointer-events: none; }

.converter-foot { min-height: 24px; padding: 12px 4px 0; font-size: 14px; color: var(--mut); }
#md-status[data-kind="err"] { color: #b91c1c; font-weight: 600; }
#md-status[data-kind="ok"] { color: #15803d; font-weight: 600; }

/* ── rendered document styles (preview + captured export) ── */
.md-preview, .markdific-document { color: var(--fg); font-size: 16px; line-height: 1.7; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 { font-family: var(--disp); font-weight: 700; line-height: 1.25; margin: 1.4em 0 .5em; letter-spacing: -0.01em; }
.md-preview h1 { font-size: 1.9em; margin-top: .2em; }
.md-preview h2 { font-size: 1.5em; border-bottom: 1px solid var(--bd); padding-bottom: .25em; }
.md-preview h3 { font-size: 1.25em; }
.md-preview p { margin: 0 0 1em; }
.md-preview a { color: var(--brd); text-decoration: underline; }
.md-preview ul, .md-preview ol { margin: 0 0 1em; padding-left: 1.5em; }
.md-preview li { margin: .35em 0; }
.md-preview blockquote { margin: 1em 0; padding: .3em 1em; border-left: 3px solid var(--br); color: var(--mut); background: var(--brs); border-radius: 0 8px 8px 0; }
.md-preview code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: #eef2f7; padding: .12em .4em; border-radius: 4px; }
.md-preview pre { background: #f8fafc; border: 1px solid var(--bd); border-radius: 10px; padding: 14px 16px; overflow: auto; margin: 0 0 1em; }
.md-preview pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.5; }
.md-preview table { border-collapse: collapse; width: 100%; margin: 0 0 1em; font-size: 15px; }
.md-preview th, .md-preview td { border: 1px solid var(--bd); padding: 8px 12px; text-align: left; }
.md-preview th { background: #eef2f7; font-weight: 600; }
.md-preview tbody tr:nth-child(even) td { background: #fbfcfe; }
.md-preview img { max-width: 100%; }
.md-preview hr { border: none; border-top: 1px solid var(--bd); margin: 1.5em 0; }
.md-preview .md-mermaid-rendered { text-align: center; margin: 1em 0; }
.md-preview .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* ── SEO body (matches the site's section rhythm) ── */
.tool-section { max-width: 960px; margin: 0 auto; padding: 60px 0 8px; }
.tool-section h2 { font-family: var(--disp); font-size: 30px; font-weight: 800; letter-spacing: -.02em; text-align: center; }
.tool-section .lead { text-align: center; max-width: 620px; margin: 12px auto 0; color: var(--mut); font-size: 17px; line-height: 1.6; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
.step { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 24px; }
.step .n { font-family: var(--disp); font-weight: 800; font-size: 15px; color: #fff; background: var(--br); width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.step h3 { font-family: var(--disp); font-size: 18px; font-weight: 700; margin: 15px 0 7px; }
.step p { color: var(--mut); font-size: 15px; line-height: 1.6; }

.fidelity { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 16px; }
.fidelity th, .fidelity td { border: 1px solid var(--bd); padding: 12px 15px; text-align: left; vertical-align: top; }
.fidelity thead th { background: var(--bg2); font-family: var(--disp); }
.fidelity td:first-child { width: 55%; }

.grid-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
.gcard { border: 1px solid var(--bd); border-radius: 14px; padding: 24px; background: #fff; }
.gcard-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brs); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.gcard-ic svg { width: 20px; height: 20px; color: var(--brd); }
.gcard h3 { font-family: var(--disp); font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.gcard p { color: var(--mut); font-size: 15px; line-height: 1.6; }

/* explainer section (What is …) */
.tool-explain { max-width: 720px; margin: 0 auto; }
.tool-explain p { color: var(--mut); font-size: 16.5px; line-height: 1.7; margin-top: 16px; text-align: center; }

/* bulleted content lists (Key facts, Why different, What it handles, Common uses) */
.tool-list { max-width: 820px; margin: 30px auto 0; padding: 0; list-style: none; text-align: left; }
.tool-list li { position: relative; padding-left: 26px; margin: 0 0 14px; color: var(--mut); font-size: 16px; line-height: 1.7; }
.tool-list li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 7px; height: 7px; border-radius: 2px; background: var(--br); }
.tool-list.feature-list li strong { color: var(--fg); font-weight: 700; }
.tool-list a { color: var(--brd); text-decoration: underline; }

.faq { margin-top: 32px; }
.faq details { border: 1px solid var(--bd); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; background: #fff; }
.faq summary { font-family: var(--disp); font-weight: 600; font-size: 17px; cursor: pointer; padding: 15px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--sub); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--mut); padding: 0 0 16px; font-size: 16px; line-height: 1.65; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.related a { border: 1px solid var(--bd); border-radius: 12px; padding: 17px 19px; background: #fff; font-family: var(--disp); font-weight: 600; font-size: 15px; transition: border-color .12s, background .12s; }
.related a:hover { border-color: var(--br); background: var(--brs); }
.related a span { display: block; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--sub); margin-top: 3px; }

/* app CTA — reuses the site's .online-cta look; kept clear of the footer */
.tool-cta { text-align: center; background: var(--bg2); border: 1px solid var(--bd); border-radius: 18px; padding: 48px 44px; margin: 64px auto 88px; max-width: 960px; }
.tool-cta h2 { font-family: var(--disp); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.tool-cta p { color: var(--mut); font-size: 16px; line-height: 1.6; margin: 10px auto 24px; max-width: 520px; }
.tool-cta .cta-note { font-size: 14px; color: var(--sub); margin-top: 16px; }

@media (max-width: 900px) {
  .steps, .related, .grid-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tool-main { padding: 0 16px; }
  .converter-panes { grid-template-columns: 1fr; }
  .pane { height: 380px; }
  .fidelity td:first-child { width: auto; }
}