@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: #fe06;
  --tracerite-highlight-text: inherit;
  --tracerite-symbol: #ff0;
  --tracerite-caret: #f00;
  --tracerite-exception: gray;
  --tracerite-tooltip: #000;
  --tracerite-tooltip-text: inherit;
  --tracerite-code: inherit;
  --tracerite-lineno: #888;
  --tracerite-floating-shadow: #000;
  --tracerite-link-bg: #fff5;
  --tracerite-link-hover: #fff8;
  --tracerite-function: #68f;
  --tracerite-location: #5a6;
  --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;
}

:root:has(.tracerite.autodark) {
  color-scheme: light dark;
  @media (prefers-color-scheme: dark) {
    --tracerite-var: #8af;
    --tracerite-type: #5c8;
    --tracerite-val: #8af;
    --tracerite-tab: #666;
    --tracerite-highlight: #ff0;
    --tracerite-highlight-text: #000;
    --tracerite-symbol: #ff0;
    --tracerite-caret: #f55;
    --tracerite-exception: #aaa;
    --tracerite-tooltip: #fff;
    --tracerite-tooltip-text: #fff;
    --tracerite-code: #ccc;
    --tracerite-lineno: #888;
    --tracerite-floating-shadow: #fff;
    --tracerite-link-bg: #0005;
    --tracerite-link-hover: #0008;
    --tracerite-function: #8af;
    --tracerite-location: #6b8;
  }
}

.tracerite { font-family: var(--tracerite-ui-font); }
.tracerite,
.tracerite *,
.tracerite .traceback-details table,
.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 pre,
.tracerite code {
  font-family: var(--tracerite-code-font);
  font-feature-settings: "liga" 1, "ss01" 1, "ss02" 1;
  font-variant-ligatures: common-ligatures;
  background: none;
  color: var(--tracerite-code);
}

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

.tracerite .traceback-details { font-size: 0.8em; }
.tracerite .traceback-details p { margin: 1em 0; }
.tracerite .traceback-details pre { width: 100%; padding: .5em; font-size: 0.8em; }
.tracerite .traceback-details .codeline { text-indent: 4ch each-line; }
.tracerite .traceback-details .codeline::before {
  content: attr(data-lineno);
  color: var(--tracerite-lineno);
  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); color: var(--tracerite-highlight-text); padding: 0.2em; margin: -0.1em; }
.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;
  color: var(--tracerite-tooltip-text);
}

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

/* Wrapper for traceback frames with indicators */
/* Container for floating indicators */
.tracerite .traceback-wrapper {
  position: relative;
  margin-top: 0.3em;
}

/* Floating overlay symbols - minimal, just emoji */
.tracerite .floating-symbol {
  position: absolute;
  z-index: 20;
  display: none;
  cursor: pointer;
  font-size: 1.4em;
  line-height: 1;
  pointer-events: auto;
  text-shadow: 0 0 0.1em var(--tracerite-floating-shadow);
  transition: left 0.2s ease-out, top 0.2s ease-out, opacity 0.15s ease-out;
}
.tracerite .floating-symbol.visible { display: block; opacity: 1; }
.tracerite .floating-symbol.animating { transition: left 0.25s ease-in-out, top 0.25s ease-in-out, opacity 0.2s ease-out; }
.tracerite .floating-symbol.fading { opacity: 0; }
.tracerite .floating-symbol:hover { transform: scale(1.2); }
.tracerite .floating-symbol:active { transform: scale(0.9); }

/* Hide arrows entirely */
.tracerite .floating-symbol .arrow { display: none; }

/* Horizontally scrolling frame container */
.tracerite .traceback-frames {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: none;
  scrollbar-width: none;
  padding-bottom: 0.3em;
  cursor: grab;
}

/* Disable grab cursor when modifier keys are pressed */
.tracerite.modifier-active .traceback-frames,
.tracerite.modifier-active .frame-content { cursor: auto; }

.tracerite .traceback-details {
  position: relative;
  min-width: 20ch;
  max-width: 100%;
  margin: 0 .2em;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: .5em;
  padding: .2em;
  padding-left: 0;
}

/* Scrollable content area (code + inspector) */
.tracerite .frame-content {
  max-height: min(50vh, 20em);
  overflow-y: auto;
  scrollbar-width: none;
  cursor: grab;
}
.tracerite .frame-content::-webkit-scrollbar { display: none; }
.tracerite .traceback-details:last-child { width: 100%; }
.tracerite .traceback-ellipsis { min-width: 4ch; text-align: center; }

/* Sticky frame label - aligned with code */
.tracerite .frame-label {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 1em;
  border-bottom: 1px solid var(--tracerite-tab);
  font-size: 1em;
  line-height: 1.3;
  margin-left: 4ch;
  margin-bottom: 0.3em;
  white-space: nowrap;
  z-index: 5;
}
.tracerite .frame-label strong { font-weight: 500; color: var(--tracerite-location); }
.tracerite .frame-label .frame-function { font-weight: 600; color: var(--tracerite-function); }
.tracerite .frame-label .frame-link {
  margin-left: 0.3em;
  padding: 0.1em 0.4em;
  background: var(--tracerite-link-bg);
  border-radius: 0.3em;
  color: inherit;
  text-decoration: none;
  font-size: 0.85em;
}
.tracerite .frame-label .frame-link:hover { background: var(--tracerite-link-hover); }

.tracerite table.inspector { margin-left: 3.5em; width: auto; word-break: break-word; }
.tracerite .inspector tbody tr,
.tracerite .inspector td {
  padding: 0;
  background: none;
  text-align: left;
  vertical-align: top;
}
.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;
  overflow: visible;
  max-width: none;
  word-break: break-word;
}

.tracerite .inspector .val-block pre,
.tracerite table.inspector .val-block pre,
.tracerite .inspector td.val-block pre {
  margin: 0;
  padding: 0;
  padding-top: 0.4em;
  border-radius: 3px;
  font-size: 0.8em;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30em;
  color: inherit;
  font-family: var(--tracerite-code-font);
}

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

.tracerite .inspector table td,
.tracerite table.inspector td {
  color: var(--tracerite-val);
  word-break: keep-all;
  overflow: hidden;
  font-size: 0.8em;
  border-collapse: collapse;
  text-align: right;
}

/* matrix value on a variable */
.tracerite .inspector .val-inline table td {
  padding: 0 0.4em;
  min-width: 2em;
}

/* Key-value dl styling (dicts, dataclasses) */
.tracerite .inspector dl.keyvalue-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0;
  padding-top: 0.2em;
  font-size: 0.8em;
}
.tracerite .inspector dl.keyvalue-dl dt,
.tracerite .inspector dl.keyvalue-dl dd {
  margin: 0;
  padding: 0 0.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tracerite .inspector dl.keyvalue-dl dt {
  text-align: right;
  color: var(--tracerite-var);
  font-weight: bold;
  width: max-content;
  float: none;
}
.tracerite .inspector dl.keyvalue-dl dd {
  text-align: left;
  width: auto;
  float: none;
}

/* Array with scale factor container */
.tracerite .inspector .array-with-scale {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

/* Scale suffix for arrays (e.g., ×10⁶) */
.tracerite .inspector .scale-suffix {
  font-size: 1.4em;
  font-weight: bold;
  white-space: nowrap;
  align-self: center;
}
