/* ==========================================================================
   RTM.HTML

   A settings panel, a drag handle and a work area of tabs -- the same shape as
   facsimile.html, and for the same reason: a long model text and a chart both
   want the height, and the reader decides how to share the width. Colours are
   the tokens in kvot.css, so the page follows the theme toggle.
   ========================================================================== */

.rtm {
  display: grid;
  /* The panel's width is a variable so the drag handle has one thing to set. */
  grid-template-columns: var(--rtm-side-width, 330px) 8px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  font-family: verdana, sans-serif;
  font-size: 13px;
}

/* ---- the settings column ------------------------------------------------ */
.rtm-side {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.rtm-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 10px; }
.rtm-side-foot {
  flex: 0 0 auto;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.rtm-resize {
  cursor: col-resize;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: transparent;
  /* Above the main column, which reaches under it so that the tab strip's
     shading meets the panel instead of stopping 8px short. */
  position: relative;
  z-index: 1;
}
.rtm-resize::after {
  content: '';
  width: 3px;
  border-radius: 2px;
  transition: background 0.15s;
}
.rtm-resize:hover::after, .rtm-resize.active::after { background: var(--color-kvot-accent); }

/* ---- a folding section -------------------------------------------------- */
.rtm-sec { margin: 0 0 4px; }
.rtm-sec > summary {
  margin: 10px 0 6px;
  padding: 0 0 4px 16px;
  border-bottom: 1px solid var(--border-color);
  font: 700 0.95rem RawengulkSans, sans-serif;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.rtm-sec > summary::-webkit-details-marker { display: none; }
.rtm-sec > summary::before {
  content: '▸';
  position: absolute;
  left: 0;
  transition: transform 0.15s;
  color: var(--text-muted);
}
.rtm-sec[open] > summary::before { transform: rotate(90deg); }

/* ---- a labelled control ------------------------------------------------- */
.rtm-row { display: block; margin: 0 0 8px; }
.rtm-row[hidden] { display: none; }
.rtm-row label { display: block; margin: 0 0 2px; color: var(--text-primary); }
.rtm-row label .rtm-name {
  display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.rtm-row input, .rtm-row select {
  box-sizing: border-box;
  width: 100%;
  padding: 3px 5px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.rtm-check { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; cursor: pointer; }
.rtm-check[hidden] { display: none; }

.rtm-facts {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.rtm-muted { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.rtm-muted[hidden] { display: none; }

/* The "Advanced settings" link, and what it opens. */
.rtm-more {
  display: inline-block;
  margin: 2px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-kvot-accent);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#rtmAdvanced[hidden] { display: none; }

/* ---- buttons ------------------------------------------------------------ */
.rtm-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.rtm-btn {
  padding: 5px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--color-kvot-accent);
  color: #fff;
  font: 600 12px verdana, sans-serif;
  cursor: pointer;
}
.rtm-btn.secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.rtm-btn.small { padding: 3px 8px; font-size: 11px; }
.rtm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- the progress bar --------------------------------------------------- */
.rtm-progress {
  height: 6px;
  margin: 0 0 6px;
  border-radius: 3px;
  background: var(--bg-primary);
  overflow: hidden;
}
/*
  Hidden but still taking its space. `display: none` meant the bar appearing at
  the start of a run made the panel's foot 12 px taller, and since the foot is
  laid out from the bottom of a flex column, the Run button jumped upwards the
  moment it was pressed.
*/
.rtm-progress[hidden] { display: block; visibility: hidden; }
.rtm-progress-fill {
  height: 100%;
  min-width: 1.5%;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg,
    var(--color-kvot-accent) 0 8px, var(--color-kvot-bright) 8px 16px);
  background-size: 16px 100%;
  animation: rtm-stripes 0.8s linear infinite;
  transition: width 0.2s;
}
@keyframes rtm-stripes { to { background-position: 16px 0; } }

/*
  A box of a fixed size that scrolls, drawn as facsimile.html draws the same
  thing: a bordered well under the buttons, and the tone in its border rather
  than in the text.

  The buttons above this sit at the bottom of the side panel, so anything that
  changes the height of this line moves them: between "Ready.", a compile
  error and a run's own report the Run button travelled 127 px, and it moved
  under the pointer as it was clicked. Three lines hold what the page writes
  in the ordinary course -- the run's report is two of them and the compiled
  summary three -- and a longer message scrolls rather than pushing anything.
*/
.rtm-status {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  height: 4.35em;               /* three lines at the line-height above */
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.rtm-status.ok { border-color: var(--color-kvot-primary); }
.rtm-status.error { border-color: var(--color-kvot-accent); color: var(--text-primary); }
.rtm-status.warn { border-color: var(--color-kvot-bright); color: var(--text-primary); }

/* ---- the work area ------------------------------------------------------ */
.rtm-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  /* Reaches 8px left, under the drag handle, and pads it back so the contents
     do not move; content-box sizing keeps the right edge where the grid put it. */
  margin-left: -8px;
  padding-left: 8px;
}
.rtm-tabs {
  display: flex;
  gap: 2px;
  margin-left: -8px;
  padding: 6px 10px 0 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex: 0 0 auto;
}
.rtm-tabs button {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font: 12px verdana, sans-serif;
  cursor: pointer;
}
.rtm-tabs button:hover { color: var(--text-primary); }
.rtm-tabs button.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
  font-weight: 600;
  margin-bottom: -1px;
}
.rtm-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 14px;
  background: var(--bg-primary);
}
.rtm-pane[hidden] { display: none; }

.rtm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
  font-size: 12px;
}
.rtm-toolbar label { display: flex; gap: 5px; align-items: center; }
.rtm-toolbar label[hidden] { display: none; }
.rtm-toolbar input[type="text"], .rtm-toolbar select {
  padding: 2px 5px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---- the species picker -------------------------------------------------
   The same shape as the one on facsimile.html: a grid whose columns line up,
   the checkbox out of the picture in favour of the cell lighting up, and what
   is picked repeated as chips above, each of which removes its own.
   ------------------------------------------------------------------------ */
.rtm-series {
  margin: 0 0 10px;
  max-height: 150px;
  min-height: 60px;
  overflow-y: auto;
  resize: vertical;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 1px 2px;
  padding: 5px 6px;
  align-content: start;
}
.rtm-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  /* The containing block for the hidden checkbox below: otherwise that is
     .content, the checkbox escapes both the list's scroll and the
     overflow: hidden on .rtm, and every cell past the fold adds its static
     position to the page's scrollable height. */
  position: relative;
}
.rtm-item[hidden] { display: none; }
.rtm-item:hover { background: var(--bg-surface); }
.rtm-item input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rtm-item.on { background: var(--color-kvot-accent); color: #fff; }
.rtm-item:focus-within { outline: 2px solid var(--color-kvot-accent); outline-offset: -2px; }


/* ---- charts and the empty state ----------------------------------------- */
.plot { width: 100%; height: 460px; }
.plot[hidden] { display: none; }
.rtm-empty { margin: 0; padding: 24px 12px 40px; color: var(--text-muted); font-size: 12px; }
.rtm-empty[hidden] { display: none; }

/* ---- the model text -----------------------------------------------------
   The pane is a column -- toolbar, the text, and the warnings under it -- so
   the text can take whatever is left rather than a height guessed from the
   pane's: the toolbar wraps on a narrow window and the note about the chosen
   example comes and goes, and calc(100% - 70px) was only ever right for one
   of those. Filling the column puts the foot of the text box level with the
   foot of the status box in the panel beside it, whatever is above either.
*/
.rtm-pane[data-pane="model"] { display: flex; flex-direction: column; }
.rtm-pane[data-pane="model"][hidden] { display: none; }

/*
  The colouring, as facsimile.html does it: a <pre> holding a coloured copy
  of the text, and the textarea itself over it with transparent text. Every
  metric that decides where a character lands has to be identical in both,
  so they are declared together rather than separately.
*/
.rtm-code-box {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
}
.rtm-code-box textarea,
.rtm-code-box .rtm-code-hl {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: normal;
  tab-size: 4;
  white-space: pre;
  overflow: auto;
}
.rtm-text {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  resize: none;
}
.rtm-code-box.hl .rtm-text {
  /* The coloured copy underneath is what is read; the caret stays visible. */
  color: transparent;
  background: transparent;
  caret-color: var(--text-primary);
}
.rtm-code-box .rtm-code-hl {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  color: var(--text-primary);
  background: var(--input-bg);
  pointer-events: none;
}
.rtm-code-box.hl .rtm-code-hl { display: block; }
.rtm-code-box ::selection { background: var(--color-kvot-accent); color: #fff; }

/* The colours themselves: comments recede, everything else is a hue apart.
   The same six as facsimile.html, so a reader who knows one knows the other. */
.hl-com { color: var(--text-secondary); font-style: italic; }
.hl-sec { color: var(--color-kvot-accent); font-weight: 600; }
.hl-num { color: #b06f00; }
.hl-fn  { color: #7048c0; }
.hl-key { color: #0a7d7d; }
.hl-op  { color: var(--text-secondary); }
:root[data-theme="dark"] .hl-num { color: #e0a13c; }
:root[data-theme="dark"] .hl-fn  { color: #c0a0ff; }
:root[data-theme="dark"] .hl-key { color: #58c8c8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl-num { color: #e0a13c; }
  :root:not([data-theme="light"]) .hl-fn  { color: #c0a0ff; }
  :root:not([data-theme="light"]) .hl-key { color: #58c8c8; }
}
.rtm-check.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }

.rtm-times { width: 15rem; min-width: 8rem; }

.rtm-example-about {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.5;
  max-width: 62rem;
}

/* ---- the Jacobian pane -------------------------------------------------- */
.rtm-jac {
  display: block;
  max-width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface);
  image-rendering: pixelated;
}
.rtm-jac-note { margin: 6px 0 0; font-size: 11px; line-height: 1.5; max-width: 620px; }
.rtm-verify { margin: 10px 0 0; font-size: 12px; line-height: 1.6; }
.rtm-verify table { border-collapse: collapse; margin: 6px 0 12px; font-size: 11px; }
.rtm-verify td, .rtm-verify th {
  padding: 2px 12px 2px 0;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.25));
}

/* ---- help --------------------------------------------------------------- */
.rtm-help { max-width: 62rem; line-height: 1.65; }
.rtm-help h2 { margin: 4px 0 10px; font: 700 1.3rem RawengulkSans, sans-serif; color: var(--text-primary); }
.rtm-help h3 { margin: 22px 0 6px; font: 700 1.05rem RawengulkSans, sans-serif; color: var(--text-primary); }
.rtm-help h4 { margin: 16px 0 4px; font: 700 0.95rem ui-monospace, Menlo, monospace; color: var(--color-kvot-accent); }
.rtm-help p { margin: 0 0 10px; }
.rtm-help pre {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--code-text);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
}
.rtm-help code { padding: 1px 4px; border-radius: 3px; background: var(--code-bg); font-size: 0.92em; }
.rtm-help pre code { padding: 0; background: none; }
.rtm-table { border-collapse: collapse; margin: 4px 0 14px; font-size: 12px; }
.rtm-table td {
  padding: 4px 16px 4px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.25));
}
/*
  A setting's name must not break mid-word, but a cell naming six of them has
  to be able to break BETWEEN them. `nowrap` on the whole cell could not, and
  laid the six matrix settings end to end: the column took 592 px of a 1020 px
  pane. So the cell wraps normally and it is each name that is unbreakable,
  with a cap on the column so that one long list cannot set the width of the
  whole table.
*/
.rtm-table td:first-child { max-width: 15rem; }
.rtm-table td:first-child code { white-space: nowrap; }

/* ---- narrow screens ----------------------------------------------------- */
@media (max-width: 860px) {
  .rtm { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; }
  .rtm-side { height: auto; max-height: 55vh; border-right: none; border-bottom: 1px solid var(--border-color); }
  /* A column to drag makes no sense once the columns are stacked. */
  .rtm-resize { display: none; }
  .rtm-main { margin-left: 0; padding-left: 0; }
  .rtm-tabs { margin-left: 0; padding-left: 10px; }
}