/* views.css — the cards js/views.js draws for views on demand (Build Spec 11
 * §D). Every class is prefixed `views-`; the card box, its title and the chart
 * kit's own classes come from base.css and charts.js and are not re-declared
 * here. No new hues: the tokens only. */

.views-card {
  display: grid;
  gap: 10px;
}

/* A dash: tiles two abreast on a phone, each allowed to shrink so a long
 * label can never force a horizontal scroll. */
.views-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.views-tile {
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  display: grid;
  gap: 8px;
  align-content: start;
}

.views-tile[data-kind="line"],
.views-tile[data-kind="bars"],
.views-tile[data-kind="table"] {
  grid-column: 1 / -1;
}

.views-tile-title {
  margin: 0;
  font: 600 var(--fs-3)/1.3 var(--font);
  color: var(--ink-2);
}

.views-series-name {
  margin: 0;
  font: 500 var(--fs-2)/1.4 var(--font);
  color: var(--ink-3);
}

.views-bars {
  display: grid;
  gap: 12px;
}

.views-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.views-spark {
  width: 140px;
  max-width: 40%;
  color: var(--accent-ink);
}

/* In a half-width dash tile the number and the sparkline stack: a 140px
 * sparkline beside a stat in ~150px of column left the words one per line. */
.views-tile .views-kpi {
  grid-template-columns: minmax(0, 1fr);
}

.views-tile .views-spark {
  max-width: 100%;
}

.views-spark .chart-spark {
  width: 100%;
  height: 34px;
}

.views-gauge,
.views-ring {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.views-gauge-status,
.views-ring-sub,
.views-note {
  margin: 0;
}

.views-gauge[data-status="over"] .views-gauge-status {
  color: var(--red);
}

.views-error {
  margin: 0;
}

.views-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--tap);
}

.views-meta-words {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one action on a card is a word, not a button: ghost ink, tap-sized
 * hit area, no box. */
.views-remove {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: 500 var(--fs-2)/1 var(--font);
  cursor: pointer;
}

.views-remove:active {
  color: var(--ink);
}

/* The note is context under the numbers, not a second paragraph of the
 * card: smaller, clamped, the reader can still select it. */
.views-note {
  font-size: var(--fs-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The progress bar's own head line (a charts.js class this file may not
 * name): reached by position. */
.views-gauge > div:first-child > div:first-child {
  font-size: var(--fs-2);
}

@container (max-width: 308px) {
  .views-grid { grid-template-columns: minmax(0, 1fr); }
}