@import url('https://cdn.jsdelivr.net/npm/@fontsource/monaspace-krypton/index.css');

/** TraceRite **/
:root {
  --tracerite-var: #8af;
  --tracerite-type: #5c8;
  --tracerite-val: #8af;
  --tracerite-tab: #aaaa;
  --tracerite-highlight: #ff08;
  --tracerite-symbol: #ff0;
  --tracerite-caret: #f00;
  --tracerite-exception: gray;
  --tracerite-tab-hover: #ddd;
  --tracerite-tooltip: #000;
  --tracerite-code-font: 'Monaspace Krypton', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Ubuntu Mono', 'Consolas', 'Courier New';
  --tracerite-ui-font: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif;
}

.tracerite,
.tracerite *,
.tracerite > h3 { margin: 0; padding: 0; outline: none; box-sizing: border-box; overflow: hidden; }

/* Allow tooltip containers to overflow for proper tooltip display */
.tracerite .tracerite-tooltip,
.tracerite .tracerite-tooltip *,
.tracerite .traceback-details,
.tracerite .traceback-details pre { overflow: visible; }

/* Code font declarations with high specificity - only for code tags */
.tracerite code,
.tracerite pre code,
.tracerite .traceback-details code {
  font-family: var(--tracerite-code-font);
  font-feature-settings: "liga" 1, "ss01" 1, "ss02" 1;
  font-variant-ligatures: common-ligatures;
  background: none;
}

.tracerite strong,
.tracerite > h3 { font-weight: bold; }
.tracerite .after { margin: 0; padding: 1em 0 0 0; font-size: 1.2em; }
.tracerite > h3 { font-size: 1.2em; }
.tracerite .excmessage { max-height: 12em; overflow: auto; }
.tracerite .exctype { color: var(--tracerite-exception); }

.tracerite .traceback-details p { margin: 1em 0; }
.tracerite .traceback-details pre { width: 100%; padding: .5em; }
.tracerite .traceback-details .codeline { text-indent: 4ch each-line; }
.tracerite .traceback-details .codeline::before {
  content: attr(data-lineno);
  color: #888;
  opacity: 0.0;
  transition: all 0.4s;
  display: inline-block;
  text-align: right;
  text-indent: 0;
  white-space: nowrap;
  word-break: keep-all;
  padding-right: 1ch;
  width: 4ch;
}
.tracerite .traceback-details pre:hover .codeline::before { opacity: 1.0; }

.tracerite .traceback-details mark { background: var(--tracerite-highlight); padding: 0.2em; margin: -0.2em; }
.tracerite .traceback-details em { font-style: normal; color: var(--tracerite-caret); }

/* Symbol element - display symbol with specific styling */
.tracerite .traceback-details .tracerite-symbol {
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0.1em;
  font-size: 1.5em;
  margin: -0.25em 0 -.25em 0.3em;
  font-weight: bold;
  vertical-align: middle;
  color: var(--tracerite-symbol);
  font-family: var(--tracerite-ui-font);
  text-shadow:
    -.02em -.02em 0 var(--tracerite-tooltip),
    .02em -.02em 0 var(--tracerite-tooltip),
    -.02em .02em 0 var(--tracerite-tooltip),
    .02em .02em 0 var(--tracerite-tooltip);
}

/* Display symbol using pseudo-element and data attribute */
.tracerite .traceback-details .tracerite-symbol::before { content: attr(data-symbol); }

/* Tooltip text element - display text with different styling */
.tracerite .traceback-details .tracerite-tooltip-text {
  display: inline-block;
  margin-left: 0.3ch;
  font-size: 0.9em;
  font-weight: bold;
  vertical-align: middle;
  font-family: var(--tracerite-ui-font);
  white-space: nowrap;
}

/* Display tooltip text using pseudo-element and data attribute */
.tracerite .traceback-details .tracerite-tooltip-text::before { content: attr(data-tooltip); }

.tracerite .traceback-labels {
  display: flex;
  align-items: center;
  border-bottom: 3px solid var(--tracerite-tab);
  margin-top: 0.3em;
}
.tracerite .traceback-labels button {
  background: var(--tracerite-tab);
  color: black;
  border: 0;
  border-radius: .5em .5em 0 0;
  flex-shrink: 1;
  line-height: 1.0;
  padding: .5em;
  margin-right: .2em;
}
.tracerite .traceback-labels button:hover { background: var(--tracerite-tab-hover); }
.tracerite .traceback-labels * { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.tracerite .traceback-tabs .content {
  scroll-snap-type: x mandatory;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}
.tracerite .traceback-tabs .content::-webkit-scrollbar { width: 0; height: 0; }
.tracerite .traceback-details {
  min-width: 20ch;
  max-width: 100%;
  margin: 0 .3em;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: .5em;
  padding: .2em;
}
.tracerite .traceback-details:last-child { width: 100%; }

.tracerite table.inspector { margin-left: 3.5em; width: auto; word-break: break-word; }
.tracerite .inspector tbody tr,
.tracerite .inspector th,
.tracerite .inspector td {
  padding: 0;
  background: none;
  text-align: left;
  max-width: 20em;
  text-overflow: ellipsis;
  overflow: hidden;
}
.tracerite .inspector .var,
.tracerite table.inspector .var { font-weight: bold; color: var(--tracerite-var); }
.tracerite .inspector .type,
.tracerite table.inspector .type { white-space: nowrap; color: var(--tracerite-type); }
.tracerite .inspector .val,
.tracerite table.inspector .val { white-space: pre-wrap; color: var(--tracerite-val); }

/* Block format for multi-line strings - left aligned */
.tracerite .inspector .val-block,
.tracerite table.inspector .val-block {
  text-align: left;
  white-space: pre-wrap;
  font-family: var(--tracerite-code-font);
  overflow: visible;
  max-width: none;
  word-break: break-word;
}

.tracerite .inspector .val-block pre,
.tracerite table.inspector .val-block pre {
  margin: 0;
  padding: 0;
  border-radius: 3px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: visible;
  max-width: 60em;
}

/* Inline format - right aligned (default) */
.tracerite .inspector .val-inline,
.tracerite table.inspector .val-inline {
  text-align: right;
}

/* matrix value on a variable */
.tracerite .inspector table td,
.tracerite table.inspector td {
  color: var(--tracerite-val);
  min-width: 3em;
  word-break: keep-all;
  overflow: hidden;
  padding: 0;
  font-size: 0.8em;
  border-collapse: collapse;
  text-align: right;
}
