/*
 * Styles for the HTML the diagnostic and test renderers write. Tokens only —
 * load tokens.css first; see apps/website/DESIGN.md.
 */

.bert-diagnostics,
.bert-tests {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}

.bert-diagnostic {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}

.bert-diagnostic-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
}

.bert-severity {
  padding: 0 var(--pad-tag);
  border-radius: var(--shape-tag);
  background: var(--color-status-error-bg);
  color: var(--color-status-error-on);
  font-family: var(--type-caption-font-family);
  font-size: var(--type-caption-font-size);
  font-weight: var(--type-caption-font-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
}

.bert-diagnostic-kind {
  color: var(--color-text-muted);
  font-family: var(--type-code-font-family);
  font-variant-ligatures: none;
}

.bert-source figcaption,
.bert-caption,
.bert-test-note {
  font-family: var(--type-caption-font-family);
  font-size: var(--type-caption-font-size);
  font-weight: var(--type-caption-font-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
}

/* Messages keep the line breaks and indentation they were written with. */
.bert-text {
  margin: 0 0 var(--gap-stack);
  white-space: pre-wrap;
}

.bert-source {
  margin: 0 0 var(--gap-stack);
}

.bert-source figcaption,
.bert-caption,
.bert-test-note {
  color: var(--color-text-muted);
}

.bert-source pre {
  margin: 0;
  padding: var(--pad-control);
  overflow-x: auto;
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--shape-control);
  background: var(--color-status-error-tint);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  line-height: var(--type-code-line-height);
}

.bert-caption {
  margin: 0;
}

.bert-line-number {
  margin-inline-end: var(--gap-inline);
  color: var(--color-text-muted);
  user-select: none;
}

/* The range the error is about is marked by a bar under it, so the code itself
   stays uncolored and readable. The bar is the carets' own width, hidden text
   drawn as a filled box, which keeps it under the right columns in a monospace
   font. */
.bert-source mark {
  background: transparent;
  color: inherit;
}

.bert-caret-gutter {
  visibility: hidden;
}

/* The line has no height of its own, so the bar hangs into the block's bottom
   padding and the space around the code stays the same above and below. */
.bert-caret-line {
  display: block;
  height: 0;
  line-height: 0;
}

.bert-caret-run {
  display: inline-block;
  vertical-align: top;
  height: 3px;
  margin-top: -2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-status-error);
  color: transparent;
}

.bert-test-summary {
  margin: 0;
  font-weight: var(--type-body-font-weight);
}

.bert-tests[data-status="passed"] .bert-test-summary {
  color: var(--color-status-success);
}

.bert-tests[data-status="failed"] .bert-test-summary {
  color: var(--color-status-error);
}

.bert-test-path {
  margin: 0 0 var(--gap-inline);
  font-family: var(--type-code-font-family);
}

.bert-test-list,
.bert-failures {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bert-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0;
  padding: var(--pad-control) 0;
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.bert-test[data-status="failed"],
.bert-test[data-status="errored"] {
  padding: var(--pad-control);
  border: var(--border-width-default) solid var(--color-status-error);
  border-radius: var(--shape-card);
}

.bert-test-note {
  margin-inline-start: auto;
}

.bert-test > .bert-failures,
.bert-test > .bert-text {
  flex-basis: 100%;
  margin: 0;
}

.bert-failure {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  margin: 0 0 var(--gap-inline);
}

.bert-failure code {
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  line-height: var(--type-code-line-height);
  font-variant-ligatures: none;
}

.bert-failure > code {
  padding: var(--pad-control);
  border-radius: var(--shape-control);
  background: var(--color-status-error-tint);
}

.bert-test-glyph {
  margin-inline-end: 0;
}

.bert-test[data-status="passed"] .bert-test-glyph {
  color: var(--color-status-success);
}

.bert-test[data-status="failed"] .bert-test-glyph,
.bert-test[data-status="errored"] .bert-test-glyph,
.bert-test-error {
  color: var(--color-status-error);
}

.bert-value {
  color: var(--color-text-muted);
}

.bert-location {
  color: var(--color-link-default);
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
}

.bert-location:hover {
  color: var(--color-link-hover);
}

.bert-location:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/*
 * Styles for the playground page. Tokens only — load tokens.css and the site's
 * base.css first, and see apps/website/DESIGN.md. Classes are prefixed `pg-`.
 */

bert-playground {
  display: block;
  --pg-pane-height: 75vh;
  --pg-editor-min-width: 32rem;
  --pg-output-min-width: 28rem;
}

/* Control text: a button, a tab, a row. */
.pg-button,
.pg-run,
.pg-tab,
.pg-file,
.pg-menu-item,
.pg-link-button {
  font-family: var(--type-control-font-family);
  font-size: var(--type-control-font-size);
  font-weight: var(--type-control-font-weight);
  line-height: var(--type-control-line-height);
  letter-spacing: var(--type-control-letter-spacing);
}

/* Small, secondary text: a caption, a hint, a status. */
.pg-label,
.pg-meta,
.pg-hint,
.pg-note,
.pg-save,
.pg-field-error,
.pg-tag,
.pg-badge {
  font-family: var(--type-caption-font-family);
  font-size: var(--type-caption-font-size);
  font-weight: var(--type-caption-font-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
}

.pg-sr-only {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pg-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.pg-icon-button .pg-icon,
.pg-file .pg-icon {
  width: 1.1em;
  height: 1.1em;
}

/* Buttons */

.pg-button,
.pg-run {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  padding: var(--pad-control) var(--gap-inline);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--shape-control);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition:
    background-color var(--transition-hover),
    color var(--transition-hover);
}

.pg-button:hover {
  background: var(--color-bg-surface);
}

.pg-button[hidden],
.pg-run[hidden] {
  display: none;
}

.pg-run {
  border-color: transparent;
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
}

.pg-run:hover {
  background: var(--color-action-primary-bg-hover);
}

.pg-run:active {
  background: var(--color-action-primary-bg-active);
}

.pg-run[aria-disabled="true"] {
  background: var(--color-action-primary-bg-disabled);
  color: var(--color-action-primary-text-disabled);
  cursor: not-allowed;
}

.pg-button[aria-disabled="true"] {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.pg-button[aria-disabled="true"]:hover {
  background: transparent;
}

.pg-button-stop {
  border-color: var(--color-status-error);
  color: var(--color-status-error);
}

.pg-button-danger {
  border-color: var(--color-status-error-bg);
  background: var(--color-status-error-bg);
  color: var(--color-status-error-on);
}

.pg-button-danger:hover {
  background: var(--color-status-error-bg);
  opacity: 0.9;
}

.pg-kbd {
  padding: 0 var(--pad-tag);
  border: var(--border-width-default) solid currentColor;
  border-radius: var(--shape-control);
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  line-height: var(--type-code-line-height);
}

.pg-link-button {
  padding: var(--pad-control);
  border: 0;
  border-radius: var(--shape-control);
  background: transparent;
  color: var(--color-link-default);
  cursor: pointer;
}

.pg-link-button:hover {
  background: var(--color-bg-surface);
  color: var(--color-link-hover);
}

.pg-push {
  margin-inline-start: auto;
}

.pg-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: var(--pad-control);
  border: 0;
  border-radius: var(--shape-control);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-hover);
}

.pg-icon-button:hover {
  background: var(--color-bg-surface);
}

.pg-icon-button-small {
  padding: var(--pad-tag);
}

/* Tags and badges */

.pg-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--pad-control);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--shape-tag);
  white-space: nowrap;
}

.pg-tag-small {
  padding: 0 var(--pad-tag);
}

.pg-tag-neutral {
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
}

.pg-tag-success {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-on);
}

.pg-tag-info {
  background: var(--color-status-info-bg);
  color: var(--color-status-info-on);
}

.pg-tag-warning {
  border-color: var(--color-status-warning);
  color: var(--color-status-warning);
}

.pg-tag-error {
  background: var(--color-status-error-bg);
  color: var(--color-status-error-on);
}

.pg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad-tag);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--shape-tag);
}

.pg-badge-error {
  background: var(--color-status-error-bg);
  color: var(--color-status-error-on);
}

.pg-badge-neutral {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Toolbar */

.pg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-tight);
  padding-block: var(--pad-control);
  /* The site header's gutters: its content sits in a page-width column, so the
     toolbar's does too while its rule and the panes below fill the window. */
  padding-inline: max(
    var(--pad-card),
    calc((100% - var(--layout-page-width)) / 2 + var(--pad-card))
  );
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.pg-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-tight);
  margin-inline-start: auto;
}

.pg-noscript {
  margin: 0;
  padding: var(--pad-card);
}

/*
 * The three panes sit in a row and wrap. The files pane grows by one part in
 * thousands, so beside the others it keeps its width, and alone on a line, on
 * a narrow screen, it fills it.
 */
.pg-panes {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.pg-files-pane {
  flex: 1 1 var(--layout-sidebar-width);
  min-width: 0;
  max-height: var(--pg-pane-height);
  border-right: var(--border-width-default) solid var(--color-border-default);
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.pg-editor-pane {
  flex: 3000 1 var(--pg-editor-min-width);
  min-width: 0;
  height: var(--pg-pane-height);
  border-right: var(--border-width-default) solid var(--color-border-default);
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.pg-output-pane {
  flex: 2000 1 var(--pg-output-min-width);
  min-width: 0;
  height: var(--pg-pane-height);
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

/* The regions the client draws into fill their pane. */
.pg-files-pane > [data-region],
.pg-editor-pane > [data-region],
.pg-output-pane > [data-region] {
  height: 100%;
}

/* Files */

.pg-files {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--pad-control);
  box-sizing: border-box;
}

.pg-files-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.pg-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline-start: var(--pad-control);
}

.pg-label {
  margin: 0;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.pg-file-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-file-row {
  position: relative;
  display: flex;
  align-items: center;
}

.pg-file {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--gap-tight);
  min-width: 0;
  padding: var(--pad-tag) var(--pad-control);
  border: 0;
  border-radius: var(--shape-control);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-hover);
}

.pg-file:hover,
.pg-file.pg-on {
  background: var(--color-bg-surface);
}

.pg-file-name {
  overflow: hidden;
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-file.pg-on .pg-file-name {
  font-weight: var(--type-control-font-weight);
}

.pg-popover {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  z-index: 5;
  min-width: calc(var(--layout-column-width) * 0.9);
  padding: var(--pad-tag);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--shape-control);
  background: var(--color-bg-page);
}

.pg-popover-wide {
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  min-width: 0;
  padding: var(--pad-control);
}

.pg-popover-title {
  font-family: var(--type-control-font-family);
  font-size: var(--type-control-font-size);
  font-weight: var(--type-control-font-weight);
  line-height: var(--type-control-line-height);
}

.pg-popover-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap-tight);
}

.pg-menu-item {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  width: 100%;
  padding: var(--pad-control);
  border: 0;
  border-radius: var(--shape-control);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.pg-menu-item:hover {
  background: var(--color-bg-surface);
}

.pg-danger-text,
.pg-menu-item.pg-danger-text {
  color: var(--color-status-error);
}

.pg-name-edit {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  padding-top: var(--pad-tag);
}

.pg-name-edit .pg-label,
.pg-name-edit .pg-field-error,
.pg-name-edit .pg-hint {
  padding-inline: var(--pad-tag);
}

.pg-input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--pad-control);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--shape-control);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  line-height: var(--type-code-line-height);
}

.pg-input[aria-invalid="true"] {
  border-color: var(--color-status-error);
}

.pg-field-error {
  color: var(--color-status-error);
  font-weight: var(--type-body-font-weight);
  letter-spacing: var(--type-body-letter-spacing);
}

.pg-hint,
.pg-note,
.pg-meta,
.pg-save {
  margin: 0;
  color: var(--color-text-muted);
  font-weight: var(--type-body-font-weight);
  letter-spacing: var(--type-body-letter-spacing);
}

.pg-note {
  padding: var(--pad-control);
}

.pg-warning-text,
.pg-note.pg-warning-text,
.pg-save.pg-warning-text {
  color: var(--color-status-warning);
}

/* Editor */

.pg-editor-pane-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pg-editor-head,
.pg-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-tight) var(--gap-inline);
  padding: var(--pad-control) var(--gap-inline);
}

.pg-editor-head {
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.pg-editor-file {
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-control-font-weight);
  line-height: var(--type-code-line-height);
}

.pg-statusbar {
  border-top: var(--border-width-default) solid var(--color-border-default);
  color: var(--color-text-muted);
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  line-height: var(--type-code-line-height);
}

.pg-tone-error {
  color: var(--color-status-error);
}

.pg-tone-warning {
  color: var(--color-status-warning);
}

.pg-editor {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--color-bg-surface);
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  line-height: var(--type-code-line-height);
  font-variant-ligatures: none;
}

.pg-gutter {
  flex: none;
  min-width: 3ch;
  padding: var(--pad-control) var(--pad-control) var(--pad-control) var(--gap-inline);
  overflow: hidden;
  color: var(--color-text-muted);
  text-align: right;
  user-select: none;
}

.pg-gutter-error {
  color: var(--color-status-error);
  font-weight: bold;
}

.pg-code-area {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* The textarea and the highlighted layer under it must lay text out the same
   way, glyph for glyph, or the colours drift from the caret: every property
   that moves text is set on both from one place. */
.pg-textarea,
.pg-code-layer {
  margin: 0;
  padding: var(--pad-control) var(--gap-inline) var(--pad-control) 0;
  border: 0;
  font-family: var(--type-code-font-family);
  font-size: var(--type-code-font-size);
  font-weight: var(--type-code-font-weight);
  line-height: var(--type-code-line-height);
  letter-spacing: var(--type-code-letter-spacing);
  font-variant-ligatures: none;
  white-space: pre;
  tab-size: 2;
}

.pg-textarea {
  position: relative;
  flex: 1;
  min-width: 0;
  background: transparent;
  color: transparent;
  caret-color: var(--color-text-primary);
  overflow: auto;
  resize: none;
}

/* A selection shows its background, tinted so the coloured text under it
   stays readable, and none of the textarea's own text. */
.pg-textarea::selection {
  color: transparent;
  background: color-mix(in srgb, var(--color-focus-ring) 30%, transparent);
}

/* The layer only clips; the editor moves its code with the textarea's scroll. */
.pg-code-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  background: none;
  color: var(--color-text-primary);
  pointer-events: none;
}

.pg-code-layer > code {
  display: block;
  font: inherit;
}

.pg-textarea:focus-visible {
  outline: none;
}

/* Output */

.pg-output {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pg-tabs {
  display: flex;
  flex-wrap: wrap;
  padding: 0 var(--pad-tag);
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.pg-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  padding: var(--pad-control) var(--gap-inline);
  border: 0;
  border-bottom: calc(var(--border-width-default) * 2) solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-hover);
}

.pg-tab:hover {
  color: var(--color-text-primary);
}

.pg-tab.pg-on {
  border-bottom-color: var(--color-border-active);
  color: var(--color-text-primary);
}

.pg-output-panel {
  flex: 1;
  min-height: 0;
  padding: var(--pad-card);
  overflow: auto;
}

.pg-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-tight);
}

.pg-panel h2 {
  margin: 0;
}

.pg-panel p {
  max-width: calc(var(--layout-column-width) * 2.5);
  margin: 0;
  color: var(--color-text-muted);
}

.pg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}

.pg-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-tight);
  align-self: stretch;
}

.pg-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
}

.pg-term {
  margin: 0;
  align-self: stretch;
  white-space: pre;
}

.pg-code {
  font-family: var(--type-code-font-family);
  font-variant-ligatures: none;
}

.pg-bar {
  display: flex;
  gap: calc(var(--border-width-default) * 2);
  height: var(--pad-tag);
}

.pg-bar-segment {
  flex: 1;
  border-radius: var(--shape-control);
  background: var(--color-status-success-bg);
}

.pg-bar-failed {
  background: var(--color-status-error-bg);
}