/* The earnings calls view's CSS. A plugin view is an iframe of its own, so there is no Tailwind
   here: plain classes, the house style by hand. Colours are the app's theme variables, so the view
   follows its light and dark, each with its light value as the fallback for an app from before the
   theme. Square everything, one grey line, muted secondary text, 13px. The only colour is find's
   highlight, the plugin's own, with its dark values at the end. */

.ec-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--jaspers-background, #fff);
  color: var(--jaspers-foreground, #171717);
  font: 13px/1.45 var(--jaspers-font-sans, system-ui, -apple-system, sans-serif);
}

.ec-bar,
.ec-subbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
  min-width: 0;
}

.ec-subbar {
  padding: 4px 8px;
}

.ec-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.ec-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-title {
  font-weight: 600;
  white-space: nowrap;
}

.ec-muted {
  color: var(--jaspers-muted-foreground, #737373);
}

.ec-input,
.ec-select,
.ec-button {
  border: 1px solid var(--jaspers-border, #e5e5e5);
  border-radius: 0;
  background: var(--jaspers-background, #fff);
  color: var(--jaspers-foreground, #171717);
  font: inherit;
  padding: 2px 6px;
  outline: none;
}

.ec-input:focus,
.ec-select:focus,
.ec-button:focus-visible {
  border-color: var(--jaspers-foreground, #171717);
}

.ec-button {
  cursor: pointer;
  white-space: nowrap;
}

.ec-button:hover {
  background: var(--jaspers-muted, #f5f5f5);
}

.ec-input-ticker {
  width: 72px;
  text-transform: uppercase;
}

.ec-select {
  max-width: 220px;
}

.ec-find {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ec-input-find {
  width: 140px;
}

.ec-count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ec-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 8px 8px;
}

.ec-note {
  color: var(--jaspers-muted-foreground, #737373);
  margin: 8px 0;
}

.ec-error {
  color: var(--jaspers-destructive, #dc2626);
  white-space: pre-wrap;
  margin: 8px 0;
}

/* The calendar. */

.ec-table {
  border-collapse: collapse;
  width: 100%;
  margin: 4px 0;
}

.ec-table th,
.ec-table td {
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
  padding: 3px 6px;
  text-align: left;
  white-space: nowrap;
}

.ec-table th {
  font-weight: 500;
  color: var(--jaspers-muted-foreground, #737373);
}

.ec-table .ec-company {
  white-space: normal;
}

.ec-row {
  cursor: pointer;
}

.ec-row:hover td {
  background: var(--jaspers-muted, #f5f5f5);
}

.ec-num {
  font-variant-numeric: tabular-nums;
}

/* The transcript. */

.ec-transcript {
  max-width: 80ch;
}

.ec-p {
  position: relative;
  margin: 0;
  padding: 6px 0 6px 36px;
  line-height: 1.6;
}

.ec-n {
  position: absolute;
  left: 0;
  width: 28px;
  text-align: right;
  color: var(--jaspers-muted-foreground, #a3a3a3);
  font-size: 11px;
  line-height: 20.8px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.ec-divider {
  margin: 12px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
  color: var(--jaspers-muted-foreground, #737373);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ec-p mark {
  background: #fef3c7;
  color: inherit;
}

.ec-p mark.ec-current {
  background: #fcd34d;
}

/* Dark, for the one colour the theme does not have: find's highlight, a deep amber and a stronger
   one for the current match, both dark enough that the text, still the foreground, reads on them. */

@media (prefers-color-scheme: dark) {
  .ec-p mark {
    background: #422006;
  }

  .ec-p mark.ec-current {
    background: #854d0e;
  }
}