/* ============================================================================
 * viewer.css — the file viewer: a file of a project's space over the window
 *
 * ui/viewer.js (the sheet, its head, the band of what was recorded and checked, the panes), ui/md_view.js (a Markdown document and its
 * contents), ui/code_view.js (numbered lines, a CSV's table, a picture), views/file_view.js (View, a reference to a file). Its own sheet,
 * after views.css; var() only (css/tokens.css "the file viewer"), both themes from the tokens.
 * ==========================================================================*/

/* --- the sheet: the window less a gutter, a column of head, band, tabs, body and status; the browser's full screen takes it whole --- */

.rms-modal.rms-viewer {
  width: var(--g-viewer-w);
  max-width: none;
  height: var(--g-viewer-h);
  max-height: none;
  padding: 0;
  overflow: hidden;
}
.rms-viewer[open] { display: flex; flex-direction: column; }
.rms-modal.rms-viewer.is-full { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; }

.rms-viewer-head {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-2) var(--g-space-4);
  padding: var(--g-space-3) var(--g-space-4);
  border-bottom: var(--g-border) solid var(--c-border);
}
.rms-viewer-names { display: flex; align-items: center; gap: var(--g-space-3); min-width: 0; }
.rms-viewer-name { min-width: 0; }
.rms-viewer-title { margin: 0; font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-heading); letter-spacing: var(--t-track-title); }
.rms-viewer-where { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); overflow-wrap: anywhere; }
.rms-viewer-kind {
  flex: none;
  min-width: var(--g-space-8);
  padding: var(--g-pad-chip-y) var(--g-space-2);
  border: var(--g-border) solid var(--kind, var(--c-border-strong));
  border-radius: var(--g-radius-sm);
  color: var(--kind, var(--c-text-muted));
  font-family: var(--t-mono);
  font-size: var(--t-size-tag);
  text-align: center;
}
.rms-viewer-kind[data-kind="markdown"], .rms-viewer-kind[data-kind="text"] { --kind: var(--c-accent); }
.rms-viewer-kind[data-kind="plantuml"] { --kind: var(--c-cat-design); }
.rms-viewer-kind[data-kind="image"] { --kind: var(--c-life-review); }
.rms-viewer-kind[data-kind="csv"] { --kind: var(--c-ok); }
.rms-viewer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-viewer-version { width: auto; max-width: var(--g-select-w); }

/* what was recorded and what the bytes read hash to: verified in proof's colour, a mismatch boxed in the red pen, in words both */
.rms-viewer-band { display: grid; flex: none; gap: var(--g-space-1); padding: var(--g-space-2) var(--g-space-4); border-bottom: var(--g-border) solid var(--c-border); background: var(--c-elevated); font-size: var(--t-size-sm); }
.rms-viewer-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-2); margin: 0; color: var(--c-text-muted); }
.rms-viewer-sep { color: var(--c-text-muted); }
.rms-viewer-sha { padding: 0; border: 0; background: none; font-family: var(--t-mono); cursor: copy; }
.rms-viewer-sha:hover { color: var(--c-text); text-decoration: underline; }
.rms-viewer-check { margin: 0; color: var(--c-text-muted); overflow-wrap: anywhere; }
.rms-viewer-check.is-verified { color: var(--c-ok); }
.rms-viewer-check.is-mismatch { padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-err); border-radius: var(--g-radius-sm); background: var(--c-bad-tint); color: var(--c-text); }
.rms-viewer-check.is-mismatch strong, .rms-viewer-check.is-mismatch .rms-viewer-mark { color: var(--c-err); }
.rms-viewer-mark { font-weight: var(--t-weight-semibold); }

.rms-viewer-tabs { flex: none; padding: var(--g-space-2) var(--g-space-4) 0; }
.rms-viewer-tabs:empty { display: none; }
.rms-viewer-tabs .rms-tabs { margin: 0; box-shadow: none; }
.rms-viewer-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.rms-viewer .rms-viewer-pane { flex: 1; min-height: 0; padding: 0; overflow: auto; overscroll-behavior: contain; }
.rms-viewer .rms-viewer-pane[hidden] { display: none; }
.rms-viewer .rms-viewer-pane:focus-visible, .rms-viewer .rms-pic-stage:focus-visible { outline-offset: calc(-1 * var(--g-focus-ring)); } /* the ring inside the pane it scrolls */
.rms-viewer-body > .rms-loading { margin: 0; padding: var(--g-space-4); }
.rms-viewer .rms-viewer-only { display: grid; align-content: start; gap: var(--g-space-3); padding: var(--g-space-5); }
.rms-viewer-only p { margin: 0; max-width: var(--g-text-measure); }
.rms-viewer-status { flex: none; min-height: calc(var(--t-size-xs) * var(--t-lh-base) + 2 * var(--g-space-1)); margin: 0; padding: var(--g-space-1) var(--g-space-4); border-top: var(--g-border) solid var(--c-border); color: var(--c-text-muted); font-size: var(--t-size-xs); overflow-wrap: anywhere; }

.rms-viewer-note { margin: 0 0 var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); border-left: var(--g-border-frame) solid var(--c-border-strong); background: var(--c-elevated); font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-viewer-note.is-hint { border-left-color: var(--c-accent); }
.rms-viewer-note.is-warn { border-left-color: var(--c-warn); background: var(--c-warn-tint); }
.rms-viewer-note.is-bad { border-left-color: var(--c-err); background: var(--c-bad-tint); }
.rms-viewer-pane > div > .rms-viewer-note { margin: var(--g-space-3) var(--g-space-4); }
.rms-viewer-picwrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rms-viewer-picslot { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.rms-viewer-picslot > .rms-help { padding: var(--g-space-4); }

/* --- numbered lines (code_view.js drawSource): the numbers stay at the left edge, every line one height, a marked range under its lines - */

.rms-code { display: flex; min-width: max-content; min-height: 100%; font-family: var(--t-mono); font-size: var(--t-size-sm); line-height: var(--g-code-line); color: var(--c-text); }
.rms-code pre { margin: 0; padding: var(--g-space-2) 0; font: inherit; line-height: inherit; white-space: pre; }
.rms-code .rms-code-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  padding-inline: var(--g-space-3);
  border-right: var(--g-border) solid var(--c-border);
  background: var(--c-elevated);
  color: var(--c-text-muted);
  text-align: right;
  cursor: pointer;
  user-select: none;
}
.rms-code-text { position: relative; flex: 1; }
.rms-code .rms-code-lines { position: relative; padding-inline: var(--g-space-3) var(--g-space-6); }
.rms-code-lines code { font: inherit; }
.rms-code-band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--g-space-2) + (var(--rms-band-from, 1) - 1) * var(--g-code-line));
  height: calc(var(--rms-band-n, 1) * var(--g-code-line));
  border-left: var(--g-border-frame) solid var(--c-code-mark-edge);
  background: var(--c-code-mark);
}
.rms-code-band[hidden] { display: none; }
.rms-code-kw { color: var(--c-code-kw); font-weight: var(--t-weight-medium); }
.rms-code-dir { color: var(--c-code-dir); font-weight: var(--t-weight-semibold); }
.rms-code-arrow { color: var(--c-code-arrow); }
.rms-code-str { color: var(--c-code-str); }
.rms-code-col { color: var(--c-code-col); }
.rms-code-com { color: var(--c-code-com); font-style: italic; }

/* --- a CSV (code_view.js drawCsv): the bundle's table in its box, the row's number first ------------------------------------------- */

.rms-viewer-csvbox { padding: var(--g-space-3) var(--g-space-4); }
.rms-viewer-csvbox > .rms-help { margin-bottom: var(--g-space-2); }
.rms-viewer-csv td { white-space: pre-wrap; }
.rms-viewer-csv th { white-space: pre; } /* a column's name: its spaces kept, one line */
.rms-viewer-csv .rms-viewer-csv-n { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); text-align: right; }

/* --- a picture (code_view.js drawPicture): its bar, then the stage that scrolls it, centred while it is smaller; on paper ------------ */

.rms-pic { display: flex; flex: 1; flex-direction: column; height: 100%; min-height: 0; }
.rms-pic-bar { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-4); border-bottom: var(--g-border) solid var(--c-border); }
.rms-pic-scale { min-width: var(--g-space-8); color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); text-align: center; }
.rms-pic-stage { display: flex; flex: 1; min-height: 0; overflow: auto; padding: var(--g-space-4); background: var(--c-canvas); cursor: grab; }
.rms-pic-stage.is-dragging { cursor: grabbing; }
.rms-pic-plate { flex: none; margin: auto; padding: var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); background: var(--c-picture-plate); line-height: 0; }
.rms-pic-img { display: block; width: var(--rms-pic-w, auto); max-width: none; height: auto; user-select: none; }

/* --- a Markdown document (md_view.js): its contents a side column beside it (css/layout.css .rms-split: as wide as its entries, each on
 *     one line), the document the rest of the sheet, its paragraphs alone at a reading measure (.rms-prose), its marked section in the
 *     highlighter --------------------------------------------------------------------------------------------------------------------*/

.rms-viewer-mdwrap { column-gap: var(--g-space-7); padding: var(--g-space-4) var(--g-space-6) var(--g-space-7); }
.rms-md-outline { max-height: var(--g-viewer-outline-h); overflow: auto; padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); font-size: var(--t-size-sm); }
.rms-md-outline-title { margin: 0 0 var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-md-outline ol { margin: 0; padding: 0; list-style: none; }
.rms-md-outline-item { padding-left: calc((var(--rms-md-level, 1) - 1) * var(--g-space-3)); }
.rms-md-outline-go { display: block; width: 100%; padding: var(--g-space-1) var(--g-space-2); border: 0; border-radius: var(--g-radius-sm); background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.rms-md-outline-go:hover { background: var(--c-hover); }
.rms-md-outline-go[aria-current="location"] { background: var(--c-selection); color: var(--c-on-select); }

.rms-md { font-size: var(--t-size-md); line-height: var(--t-lh-text); }
.rms-md > :first-child { margin-top: 0; }
.rms-md p, .rms-md-list, .rms-md-quote, .rms-md-pre, .rms-md-puml, .rms-md-tablebox { margin: 0 0 var(--g-space-4); }
.rms-md-h { position: relative; margin: var(--g-space-6) 0 var(--g-space-3); font-family: var(--t-title); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-heading); letter-spacing: var(--t-track-title); scroll-margin-top: var(--g-space-4); }
h1.rms-md-h { padding-bottom: var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); font-size: var(--t-size-display); letter-spacing: var(--t-track-display); }
h2.rms-md-h { padding-bottom: var(--g-space-1); border-bottom: var(--g-border) solid var(--c-border); font-size: var(--t-size-xl); }
h3.rms-md-h { font-size: var(--t-size-lg); }
h4.rms-md-h, h5.rms-md-h, h6.rms-md-h { font-size: var(--t-size-md); }
h6.rms-md-h { color: var(--c-text-muted); }
.rms-md-copy { margin-left: var(--g-space-2); height: auto; padding: 0 var(--g-space-1); border-color: transparent; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); vertical-align: middle; opacity: 0; }
.rms-md-h:hover .rms-md-copy, .rms-md-copy:focus-visible, .rms-md-h.is-marked-head .rms-md-copy { opacity: 1; }
.rms-md .is-marked { position: relative; background: var(--c-code-mark); box-shadow: calc(-1 * var(--g-space-3)) 0 0 var(--c-code-mark), var(--g-space-3) 0 0 var(--c-code-mark); }
.rms-md .is-marked-head { box-shadow: calc(-1 * var(--g-space-3)) 0 0 var(--c-code-mark), var(--g-space-3) 0 0 var(--c-code-mark), calc(-1 * var(--g-space-3) - var(--g-border-frame)) 0 0 var(--c-code-mark-edge); }
.rms-md a, .rms-md-a { color: var(--c-link); text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: var(--g-underline-offset); cursor: pointer; }
.rms-md a:hover, .rms-md-a:hover { text-decoration-color: currentColor; }
.rms-md-a-off { color: var(--c-text-muted); text-decoration: underline dotted; text-underline-offset: var(--g-underline-offset); }
.rms-md-code { padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: var(--c-elevated); font-family: var(--t-mono); font-size: var(--g-viewer-code-em); }
.rms-md-pre { padding: var(--g-space-3) var(--g-space-4); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); background: var(--c-elevated); font-family: var(--t-mono); font-size: var(--t-size-sm); line-height: var(--g-code-line); overflow: auto; white-space: pre; overflow-wrap: normal; } /* a long line scrolls inside its block */
.rms-md-pre code { font: inherit; }
.rms-md-puml { border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); overflow: auto; }
.rms-md-puml figcaption { margin: 0; padding: var(--g-space-2) var(--g-space-3); border-top: var(--g-border) solid var(--c-border); }
.rms-md-quote { padding: 0 var(--g-space-4); border-left: var(--g-border-frame) solid var(--c-border-strong); color: var(--c-text-muted); }
.rms-md-quote > :last-child, .rms-md-list li > :last-child { margin-bottom: 0; }
.rms-md-list { padding-left: var(--g-space-6); }
.rms-md-list li + li { margin-top: var(--g-space-1); }
.rms-md-list:not(.is-tight) li + li { margin-top: var(--g-space-3); }
.rms-md-list.is-tight li > p { margin: 0; }
.rms-md-list.has-tasks { padding-left: var(--g-space-5); list-style: none; }
.rms-md-task { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g-space-2); }
.rms-md-task > input { flex: none; margin: 0; }
.rms-md-task > :not(input) { flex: 1 1 0; min-width: 0; }
.rms-md-hr { height: 0; margin: var(--g-space-6) 0; border: 0; border-top: var(--g-border-strong) solid var(--c-border); }
.rms-md-table th.is-center, .rms-md-table td.is-center { text-align: center; }
.rms-md-table.is-headless > tbody > tr > td:first-child { color: var(--c-text-muted); white-space: nowrap; } /* a front table's keys: Document, Issue, Prepared by */
.rms-md-table th.is-right, .rms-md-table td.is-right { text-align: right; }
.rms-md-table th.is-left, .rms-md-table td.is-left { text-align: left; }
.rms-md-img-slot { display: inline-block; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-md-imglink { display: inline-block; padding: var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); background: var(--c-picture-plate); line-height: 0; cursor: zoom-in; }
.rms-md-img { display: block; max-width: 100%; height: auto; }
.rms-md-img-off, .rms-md-extimg { color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* --- a reference to a file (file_view.js refNode): a link into the viewer, or its words saying the space holds no such file --------- */

.rms-ref.is-file { color: var(--c-link); text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: var(--g-underline-offset); cursor: pointer; }
.rms-ref.is-file:hover { text-decoration-color: currentColor; }
.rms-ref.is-missing { text-decoration: underline dotted var(--c-text-muted); text-underline-offset: var(--g-underline-offset); }
.rms-ref-missing { color: var(--c-text-muted); font-size: var(--t-size-xs); }