/* The Yahoo Finance views' 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 views follow
   its light and dark, each with its light value as the fallback for an app from before the theme;
   colours of the plugin's own take their dark values at the end. Square everything, one grey line,
   muted secondary text, 13px, figures of one width, and no accent colour but the sign of a number. */

.yf-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);
}

button,
input,
select {
  font: inherit;
  border-radius: 0;
}

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

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

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

.yf-symbol {
  width: 96px;
  text-transform: uppercase;
}

.yf-symbol::placeholder {
  text-transform: none;
}

.yf-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

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

.yf-strong {
  font-weight: 600;
}

.yf-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.yf-up {
  color: var(--jaspers-positive, #15803d);
}

.yf-down,
.yf-negative {
  color: var(--jaspers-negative, #b91c1c);
}

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

.yf-empty {
  color: var(--jaspers-muted-foreground, #737373);
  padding: 12px 0;
  margin: 0;
}

.yf-line {
  margin: 2px 0 6px;
}

.yf-link {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.yf-link:hover {
  text-decoration: underline;
}

/* Sections. */

.yf-section {
  padding-top: 10px;
}

.yf-section + .yf-section {
  margin-top: 4px;
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
}

.yf-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.yf-aside {
  font-weight: 400;
}

/* Tabs and toggles. */

.yf-tabs,
.yf-toggle {
  display: inline-flex;
}

.yf-tab {
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
  color: var(--jaspers-foreground, #404040);
  padding: 2px 8px;
  cursor: pointer;
}

.yf-tab + .yf-tab {
  border-left: 0;
}

.yf-tab:hover:not(:disabled) {
  background: var(--jaspers-muted, #f5f5f5);
}

.yf-tab:disabled {
  color: #d4d4d4;
  cursor: default;
}

.yf-tab-on,
.yf-tab-on:hover:not(:disabled) {
  background: var(--jaspers-primary, #171717);
  border-color: var(--jaspers-primary, #171717);
  color: var(--jaspers-primary-foreground, #fff);
}

/* Tables. */

.yf-table {
  border-collapse: collapse;
  width: 100%;
  margin: 2px 0 6px;
}

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

.yf-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--jaspers-background, #fff);
  font-weight: 500;
  color: var(--jaspers-muted-foreground, #737373);
}

.yf-table th.yf-num,
.yf-table td.yf-num {
  text-align: right;
}

.yf-fit {
  width: auto;
  min-width: min(100%, 560px);
}

.yf-table tbody tr:hover td {
  background: var(--jaspers-muted, #fafafa);
}

.yf-name-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yf-x {
  border: 0;
  background: none;
  color: #a3a3a3;
  padding: 0 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.yf-x:hover {
  color: var(--jaspers-foreground, #171717);
}

/* Company overview. */

.yf-head {
  padding-top: 10px;
}

.yf-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.yf-name {
  font-size: 16px;
  font-weight: 600;
}

.yf-price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 2px;
}

.yf-price {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.yf-ranges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 24px;
  margin: 8px 0 2px;
}

.yf-range {
  min-width: 0;
}

.yf-range-label {
  font-size: 12px;
  margin-bottom: 3px;
}

.yf-track {
  position: relative;
  height: 4px;
  background: var(--jaspers-border, #e5e5e5);
  margin: 5px 0;
}

.yf-mark {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 12px;
  margin-left: -1px;
  background: var(--jaspers-foreground, #171717);
}

.yf-mark-hollow {
  top: -5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: 1px;
  background: var(--jaspers-background, #fff);
  border: 2px solid var(--jaspers-muted-foreground, #737373);
  box-sizing: border-box;
}

.yf-range-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.yf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  margin: 0;
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
  border-left: 1px solid var(--jaspers-border, #e5e5e5);
}

.yf-cell {
  padding: 4px 8px;
  border-right: 1px solid var(--jaspers-border, #e5e5e5);
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
  min-width: 0;
}

.yf-cell dt {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yf-cell dd {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yf-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin: 2px 0 8px;
  font-size: 12px;
}

.yf-key {
  display: inline-block;
  width: 9px;
  height: 9px;
  vertical-align: -1px;
}

.yf-key-solid {
  width: 2px;
  background: var(--jaspers-foreground, #171717);
}

.yf-key-hollow {
  border: 2px solid var(--jaspers-muted-foreground, #737373);
  box-sizing: border-box;
}

.yf-mix {
  display: flex;
  height: 10px;
  margin: 4px 0 2px;
  background: var(--jaspers-muted, #f5f5f5);
}

.yf-mix-strongBuy {
  background: var(--jaspers-positive, #15803d);
}

.yf-mix-buy {
  background: #86c79e;
}

.yf-mix-hold {
  background: #d4d4d4;
}

.yf-mix-sell {
  background: #e8a3a3;
}

.yf-mix-strongSell {
  background: var(--jaspers-negative, #b91c1c);
}

.yf-summary {
  margin: 6px 0 0;
  max-width: 80ch;
  color: var(--jaspers-foreground, #262626);
}

.yf-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yf-more {
  color: var(--jaspers-muted-foreground, #737373);
  font-size: 12px;
  margin-top: 2px;
}

/* A fund's holdings beside its sector weights. */

.yf-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4px 24px;
  margin-top: 8px;
}

.yf-bars-title {
  padding: 3px 0;
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
  font-weight: 500;
}

.yf-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr 56px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
}

.yf-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yf-bar-track {
  height: 8px;
  background: var(--jaspers-muted, #f5f5f5);
}

.yf-bar-fill {
  display: block;
  height: 100%;
  background: var(--jaspers-muted-foreground, #737373);
}

.yf-bar-row .yf-num {
  text-align: right;
}

/* Markets. */

.yf-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
  border-left: 1px solid var(--jaspers-border, #e5e5e5);
}

.yf-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  padding: 5px 8px;
  border: 0;
  border-right: 1px solid var(--jaspers-border, #e5e5e5);
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.yf-tile:hover {
  background: var(--jaspers-muted, #fafafa);
}

.yf-tile-up {
  box-shadow: inset 0 2px 0 var(--jaspers-positive, #15803d);
}

.yf-tile-down {
  box-shadow: inset 0 2px 0 var(--jaspers-negative, #b91c1c);
}

.yf-tile-name {
  max-width: 100%;
  font-size: 12px;
  color: var(--jaspers-muted-foreground, #737373);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yf-tile-price {
  font-size: 15px;
  font-weight: 600;
}

.yf-tile-move {
  font-size: 12px;
}

/* Financials. */

.yf-statement td:first-child {
  white-space: normal;
  min-width: 180px;
}

.yf-statement tr.yf-strong td {
  font-weight: 600;
}

/* Options. */

.yf-chain th.yf-side {
  text-align: center;
  color: var(--jaspers-foreground, #171717);
  font-weight: 600;
}

.yf-chain .yf-strike,
.yf-chain .yf-strike-head {
  text-align: center !important;
  font-weight: 600;
  background: var(--jaspers-muted, #fafafa);
  border-left: 1px solid var(--jaspers-border, #e5e5e5);
  border-right: 1px solid var(--jaspers-border, #e5e5e5);
}

.yf-chain td.yf-itm {
  background: var(--jaspers-muted, #f5f5f5);
}

/* Not the muted fill: a hovered row already turns muted, so a shaded cell goes a step past it. */
.yf-chain tbody tr:hover td.yf-itm {
  background: #eeeeee;
}

.yf-table tbody tr.yf-price-rule td,
.yf-table tbody tr.yf-price-rule:hover td {
  position: relative;
  height: 18px;
  padding: 0;
  border-bottom: 0;
  background: none;
}

.yf-price-rule td::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid var(--jaspers-primary, #171717);
}

.yf-price-rule span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 16px;
  background: var(--jaspers-primary, #171717);
  color: var(--jaspers-primary-foreground, #fff);
  font-size: 11px;
  padding: 0 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The plugin's own colours on the theme's dark background (#0a0a0a), each reading as its light value
   does on white. The rating scale's middle steps are its dark ends dimmed toward the background, level
   with each other, and hold a grey below them, so the ends stay the most intense; hold and a disabled
   tab share a grey, as they do in light. */
@media (prefers-color-scheme: dark) {
  .yf-tab:disabled {
    color: #404040;
  }

  .yf-x {
    color: #525252;
  }

  .yf-mix-buy {
    background: #2a7445;
  }

  .yf-mix-hold {
    background: #404040;
  }

  .yf-mix-sell {
    background: #a54d4d;
  }

  .yf-chain tbody tr:hover td.yf-itm {
    background: #242424;
  }
}