/* Blastile on supram: the elements render into the light DOM and wear
   supram's classes; this is the little that is Blastile's own. Unlayered, so
   it wins over supram's layers. */

blastile-app, tile-card, tile-frame, tile-preview, data-console, json-editor { display: block; }
blastile-app > .page { min-height: 100vh; align-content: start; }

/* text fields, in supram's voice */
.field {
  font: inherit;
  font-size: var(--text-sm);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--bg);
  color: var(--fg);
}
.field:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field.mono, .mono { font-family: var(--font-mono); }
.grow { flex: 1 1 16rem; min-width: 0; }
.break { overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* a .tile dropped anywhere on the page */
.drop { outline: 3px dashed var(--accent); outline-offset: -6px; }

/* the tile itself */
tile-frame .mount iframe { display: block; width: 100%; border: 0; background: var(--bg); }
tile-frame[fill] { height: 100%; }
tile-frame[fill] .mount, tile-frame[fill] .mount iframe { height: 100%; }

/* a rendered tile with its data console: in a card, and as a viewer window */
.card > tile-preview { margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); border-top: 1px solid var(--hairline); }
tile-preview.viewer { height: 100vh; display: flex; flex-direction: column; }
tile-preview.viewer tile-frame { flex: 1; min-height: 0; }
tile-preview.viewer data-console { flex: none; }
.preview-bar { border-top: 1px solid var(--hairline); }

/* the tp-data console */
.console { padding: var(--space-1) var(--space-2) var(--space-2); border-top: 1px solid var(--hairline); }
.console-log { max-height: 9rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; min-height: 2.5rem; }
.console-log .entry { display: flex; gap: 0.5rem; align-items: baseline; }
.console-log .at { font-size: var(--text-xs); white-space: nowrap; }
.console-log .dir { width: 3.4rem; flex: none; font-size: var(--text-xs); white-space: nowrap; }
.console-log .body { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* the JSON editor in it: vanilla-jsoneditor, dressed in supram's tokens (which
   switch for the dark by themselves) */
json-editor {
  height: 16rem;
  --jse-font-family: var(--font-sans, inherit);
  --jse-font-family-mono: var(--font-mono);
  --jse-font-size: var(--text-sm);
  --jse-font-size-mono: var(--text-sm);
  --jse-font-size-main-menu: var(--text-sm);
  --jse-theme-color: var(--fg);
  --jse-theme-color-highlight: var(--muted);
  --jse-menu-color: var(--bg);
  --jse-background-color: var(--bg);
  --jse-text-color: var(--fg);
  --jse-text-color-inverse: var(--bg);
  --jse-main-border: 1px solid var(--hairline);
  --jse-panel-background: var(--surface);
  --jse-panel-background-border: 1px solid var(--hairline);
  --jse-panel-border: 1px solid var(--hairline);
  --jse-panel-color: var(--fg);
  --jse-panel-color-readonly: var(--muted);
  --jse-panel-button-color-highlight: var(--fg);
  --jse-panel-button-background-highlight: var(--hairline);
  --jse-modal-background: var(--bg);
  --jse-modal-code-background: var(--surface);
  --jse-tooltip-color: var(--fg);
  --jse-tooltip-background: var(--surface);
  --jse-tooltip-border: 1px solid var(--hairline);
  --jse-context-menu-background: var(--fg);
  --jse-context-menu-background-highlight: var(--muted);
  --jse-context-menu-separator-color: var(--muted);
  --jse-context-menu-color: var(--bg);
  --jse-context-menu-pointer-background: var(--fg);
  --jse-context-menu-pointer-background-highlight: var(--muted);
  --jse-context-menu-pointer-color: var(--bg);
  --jse-key-color: var(--link);
  --jse-value-color: var(--fg);
  --jse-value-color-number: var(--fg);
  --jse-value-color-boolean: var(--fg);
  --jse-value-color-null: var(--muted);
  --jse-value-color-string: var(--fg);
  --jse-value-color-url: var(--link);
  --jse-delimiter-color: var(--muted);
  --jse-edit-outline: 2px solid var(--focus);
  --jse-selection-background-color: var(--selection-wash);
  --jse-selection-background-inactive-color: var(--surface);
  --jse-hover-background-color: var(--surface);
  --jse-active-line-background-color: var(--surface);
  --jse-search-match-color: var(--selection-wash);
  --jse-search-match-active-color: var(--selection);
  --jse-collapsed-items-background-color: var(--surface);
  --jse-collapsed-items-link-color: var(--muted);
  --jse-tag-background: var(--hairline);
  --jse-tag-color: var(--fg);
  --jse-input-background: var(--bg);
  --jse-input-border: 1px solid var(--hairline);
  --jse-button-background: var(--surface);
  --jse-button-color: var(--fg);
  --jse-a-color: var(--link);
  --jse-table-header-background: var(--surface);
}
tile-preview.viewer json-editor { height: 30vh; min-height: 12rem; }

/* the mark in the header */
.mark { display: block; }