/* JECC Markdown Viewer — document (reader) styles. */

.md-body {
  max-width: var(--reader-max);
  margin: 0 auto;
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-lh);
  color: var(--text);
  overflow-wrap: break-word;
}
body.full-width .md-body { max-width: none; }
.md-body :lang(ml), .md-body .ml { font-family: var(--font-ml); }

.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  color: var(--heading);
  line-height: 1.25;
  margin: 1.4em 0 .55em;
  position: relative;
  scroll-margin-top: 16px;
}
.md-body h1 { font-size: 2em; padding-bottom: .25em; border-bottom: 2px solid var(--gold); }
.md-body h2 { font-size: 1.5em; padding-bottom: .2em; border-bottom: 1px solid var(--border); }
.md-body h3 { font-size: 1.25em; }
.md-body h4 { font-size: 1.08em; }
.md-body h5 { font-size: 1em; }
.md-body h6 { font-size: .92em; color: var(--text-muted); }
.md-body .heading-number { color: var(--text-muted); font-weight: 600; margin-right: .1em; }
.md-body .heading-anchor {
  margin-left: .35em;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  font-size: .8em;
}
.md-body h1:hover .heading-anchor, .md-body h2:hover .heading-anchor, .md-body h3:hover .heading-anchor,
.md-body h4:hover .heading-anchor, .md-body h5:hover .heading-anchor, .md-body h6:hover .heading-anchor,
.md-body .heading-anchor:focus-visible { opacity: 1; }
@media (hover: none) { .md-body .heading-anchor { opacity: .45; } }

.md-body p, .md-body ul, .md-body ol, .md-body dl, .md-body blockquote, .md-body pre, .md-body .table-wrap, .md-body details, .md-body .callout { margin: 0 0 1em; }
.md-body a { color: var(--link); }
.md-body a.external::after { content: "↗"; font-size: .7em; vertical-align: super; margin-left: 1px; text-decoration: none; display: inline-block; }
.md-body ul, .md-body ol { padding-left: 1.6em; }
.md-body li + li { margin-top: .2em; }
.md-body li > p { margin: .25em 0; }
.md-body li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.3em; }
.md-body input[type="checkbox"] { margin: 0 .45em 0 0; vertical-align: -1px; accent-color: var(--navy); }
.md-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.6em 0; }
.md-body blockquote { border-left: 4px solid var(--border); padding: .3em 1em; color: var(--text-muted); background: var(--surface); border-radius: 0 6px 6px 0; }
.md-body blockquote > :last-child { margin-bottom: 0; }
.md-body mark { background: var(--mark); color: inherit; padding: 0 .1em; border-radius: 2px; }
.md-body abbr[title] { text-decoration: underline dotted; cursor: help; }
.md-body img { max-width: 100%; height: auto; cursor: zoom-in; border-radius: 3px; }
.md-body dt { font-weight: 700; margin-top: .5em; }
.md-body dd { margin: 0 0 .4em 1.6em; }
.md-body details { border: 1px solid var(--border); border-radius: 8px; padding: .5em .9em; background: var(--surface); }
.md-body summary { cursor: pointer; font-weight: 600; }
.md-body details[open] summary { margin-bottom: .5em; }
.md-body sup, .md-body sub { line-height: 0; }
.md-body .page-break { border-top: 2px dashed var(--border); margin: 1.5em 0; position: relative; height: 0; }
.md-body .page-break::after { content: "page break"; position: absolute; left: 50%; top: -.75em; transform: translateX(-50%); background: var(--bg); padding: 0 .6em; font: 11px var(--font-ui); color: var(--text-muted); }
.md-body .footnotes { font-size: .9em; color: var(--text-muted); margin-top: 2em; }
.md-body .footnotes hr { margin: 1em 0; }
.md-body .footnote-ref { text-decoration: none; }
.md-body .footnote-ref::before { content: "["; } .md-body .footnote-ref::after { content: "]"; }

/* Inline code + code blocks */
.md-body code { font-family: var(--font-mono); font-size: .86em; background: var(--code-bg); padding: .12em .35em; border-radius: 4px; border: 1px solid var(--border); }
.code-block { position: relative; border: 1px solid var(--border); border-radius: 8px; background: var(--code-bg); margin: 0 0 1em; overflow: hidden; }
.code-block pre { margin: 0; padding: 12px 14px; overflow: auto; font-size: 13.5px; line-height: 1.5; tab-size: 4; display: flex; }
.code-block pre code { background: none; border: 0; padding: 0; font-size: inherit; flex: 1 1 auto; white-space: pre; }
.code-block.wrap pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-block .gutter { flex: 0 0 auto; text-align: right; padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--border); color: var(--text-muted); user-select: none; white-space: pre; font-family: var(--font-mono); }
.code-toolbar { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--border); background: var(--surface); font: 12px var(--font-ui); }
.code-toolbar .lang { flex: 1; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.code-toolbar button { font-size: 11.5px; padding: 2px 7px; }

/* Callouts (FR-6b) */
.callout { border: 1px solid var(--c-border, var(--border)); border-left: 5px solid var(--c, var(--navy)); background: var(--c-bg, var(--surface)); border-radius: 6px; padding: .6em 1em; }
.callout-title { font: 600 .92em var(--font-ui); color: var(--c); display: flex; align-items: center; gap: .45em; margin-bottom: .25em; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-icon::before { font-size: 1.05em; }
.callout-note { --c: var(--note); --c-bg: var(--note-bg); }
.callout-note .callout-icon::before { content: "ℹ️"; }
.callout-tip { --c: var(--tip); --c-bg: var(--tip-bg); }
.callout-tip .callout-icon::before { content: "💡"; }
.callout-important { --c: var(--important); --c-bg: var(--important-bg); border-left-color: var(--important-border); }
.callout-important .callout-icon::before { content: "❗"; }
.callout-warning { --c: var(--warning); --c-bg: var(--warning-bg); border-left-color: var(--warning-border); }
.callout-warning .callout-icon::before { content: "⚠️"; }
.callout-caution { --c: var(--caution); --c-bg: var(--caution-bg); }
.callout-caution .callout-icon::before { content: "⛔"; }

/* Math & Mermaid placeholders */
.math-inline:not(.rendered), .math-display:not(.rendered) { font-family: var(--font-mono); font-size: .85em; color: var(--text-muted); }
.math-display { display: block; text-align: center; margin: 0 0 1em; overflow-x: auto; overflow-y: hidden; padding: .3em 0; }
.math-display:not(.rendered) { white-space: pre-wrap; text-align: left; background: var(--code-bg); padding: .6em; border-radius: 6px; }
.math-display-inline.rendered { display: inline-block; }
.math-error { color: #C62828; font-family: var(--font-mono); font-size: .85em; }
.mermaid { margin: 0 0 1em; text-align: center; overflow-x: auto; }
.mermaid:not(.rendered) { white-space: pre; text-align: left; font: 13px/1.45 var(--font-mono); background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; color: var(--text-muted); }
.mermaid svg { max-width: 100%; height: auto; }
.diagram-wrap { position: relative; border: 1px solid var(--border); border-radius: 8px; margin: 0 0 1em; background: var(--bg); }
.diagram-wrap .mermaid { margin: 0; padding: 10px; }
.diagram-toolbar { display: flex; gap: 4px; justify-content: flex-end; padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--surface); border-radius: 8px 8px 0 0; }

/* Images */
.img-placeholder {
  display: inline-flex; align-items: center; gap: .4em;
  border: 1px dashed var(--border); border-radius: 6px; padding: .5em .8em;
  color: var(--text-muted); font: 13px var(--font-ui); background: var(--surface);
}
.img-placeholder::before { content: "🖼"; }
.img-placeholder.drag-over { border-color: var(--gold); background: var(--surface-2); }

/* Inline TOC */
.inline-toc { border: 1px solid var(--border); border-radius: 8px; padding: .6em 1em; background: var(--surface); margin: 0 0 1.2em; font-size: .95em; }
.inline-toc-title { font: 600 .85em var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .3em; }
.inline-toc ul { margin: 0; padding-left: 1.2em; }
.inline-toc > ul { padding-left: .2em; list-style: none; }

/* Tables (§5.4) */
.table-block { margin: 0 0 1.2em; position: relative; }
.table-block.fullscreen { position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: 14px; margin: 0; display: flex; flex-direction: column; overflow: hidden; }
.table-block.fullscreen .table-wrap { max-height: none; flex: 1 1 auto; }
.table-toolbar {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  padding: 4px 0 6px; font: 12px var(--font-ui);
  opacity: 0; transition: opacity .15s;
}
.table-block:hover .table-toolbar, .table-block:focus-within .table-toolbar, .table-block.fullscreen .table-toolbar { opacity: 1; }
@media (hover: none) { .table-toolbar { opacity: 1; } }
.table-toolbar .title { flex: 1 1 auto; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 60px; }
.table-toolbar input[type="search"] { width: 130px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); font-size: 12px; }
.table-toolbar .mini-btn { font-size: 11.5px; padding: 2px 6px; }
.md-body .table-wrap {
  overflow: auto;
  max-height: 75vh;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0;
  position: relative;
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11,37,69,.22), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11,37,69,.22), transparent) right center / 14px 100% no-repeat scroll;
  background-color: var(--bg);
}
.table-block.expanded .table-wrap { max-height: none; }
.table-block.expanded { width: calc(100vw - var(--toc-w) - 70px); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
body.toc-closed .table-block.expanded { width: calc(100vw - 60px); }
.md-body table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .93em; line-height: 1.4; }
.md-body th, .md-body td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: .45em .75em; vertical-align: top; text-align: left; }
.md-body th:last-child, .md-body td:last-child { border-right: 0; }
.md-body tbody tr:last-child td { border-bottom: 0; }
.md-body th[align="center"], .md-body td[align="center"] { text-align: center; }
.md-body th[align="right"], .md-body td[align="right"] { text-align: right; }
.md-body thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--navy); color: #fff; font-family: var(--font-ui); font-weight: 600; font-size: .95em;
  white-space: nowrap;
}
:root[data-theme="dark"] .md-body thead th { background: #23385A; }
.md-body thead th.sortable { cursor: pointer; user-select: none; }
.md-body thead th .sort-ind { opacity: .6; margin-left: .3em; font-size: .8em; }
.md-body tbody tr:nth-child(even) td { background: var(--zebra); }
.md-body tbody tr:hover td { background: var(--surface-2); }
.md-body tbody tr.selected td { background: color-mix(in srgb, var(--gold) 22%, var(--bg)); }
.md-body td code { white-space: nowrap; }
/* Opt-in first-column pin (FR-28: off by default) */
.table-block.pinned tbody td:first-child, .table-block.pinned thead th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 2px 0 0 var(--border); }
.table-block.pinned tbody td:first-child { background: var(--bg); }
.table-block.pinned tbody tr:nth-child(even) td:first-child { background: var(--zebra); }
.table-block.pinned thead th:first-child { z-index: 3; }
.table-footer { font: 12px var(--font-ui); color: var(--text-muted); padding: 4px 2px 0; display: flex; justify-content: space-between; }

/* Find highlights */
mark.find-hit { background: var(--find); color: inherit; border-radius: 2px; padding: 0; }
mark.find-hit.current { background: var(--find-current); color: #000; outline: 2px solid var(--find-current); }

/* Document info card */
.docinfo { max-width: var(--reader-max); margin: 0 auto 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: 13px var(--font-ui); }
body.full-width .docinfo { max-width: none; }
.docinfo summary { padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--heading); }
.docinfo dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; padding: 0 12px 10px; }
.docinfo dt { color: var(--text-muted); }
.docinfo dd { margin: 0; }
.docinfo .confidential { color: var(--caution); font-weight: 700; }

@media (max-width: 767.98px) {
  .md-body { font-size: calc(var(--reader-size) - 1px); }
  .table-block.expanded { width: auto; left: 0; transform: none; }
}