/* lenscale base components, shared by lenscale.ai and app.lenscale.ai. Needs tokens.css.
   UI rule (owner, 2026-10-15): cards and rows are neutral (background + 1px line border), no coloured side
   stripes, no per-category tints; status is a neutral pill with one small dot; headings and big numbers in ink.
   scripts/check-stripes.mjs fails `npm run check` on a coloured side stripe. */

.ls-wordmark {
  font-family: var(--ls-font);
  font-weight: 700;
  letter-spacing: var(--ls-tracking-tight);
  color: var(--ls-ink);
  text-decoration: none;
  white-space: nowrap;
}
.ls-wordmark span { color: var(--ls-accent); }

.ls-label {
  font-size: var(--ls-text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-tracking-label);
  text-transform: uppercase;
  color: var(--ls-accent);
}

.ls-label--muted { color: var(--ls-muted); }
.ls-card {
  background: var(--ls-paper);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-lg);
  padding: var(--ls-space-5);
}
.ls-card--surface { background: var(--ls-surface); }
.ls-card--raised { box-shadow: var(--ls-shadow-raised); }

.ls-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-pill);
  background: var(--ls-paper);
  color: var(--ls-ink);
  font-size: var(--ls-text-xs);
  line-height: 1.6;
  white-space: nowrap;
}
.ls-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ls-dot-none);
  flex: none;
}
.ls-dot--good { background: var(--ls-dot-good); }
.ls-dot--warn { background: var(--ls-dot-warn); }
.ls-dot--bad { background: var(--ls-dot-bad); }
.ls-dot--accent { background: var(--ls-accent); }
.ls-dot--solar { background: var(--ls-series-solar); }
.ls-dot--agrivoltaic { background: var(--ls-series-agrivoltaic); }
.ls-dot--wind { background: var(--ls-series-wind); }
.ls-dot--biomethane { background: var(--ls-series-biomethane); }
.ls-dot--storage { background: var(--ls-series-storage); }
.ls-dot--other { background: var(--ls-series-other); }
/* Hot-lead marker: ink ring, as drawn on the maps (wind already uses the accent blue). */
.ls-ring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ls-ink); flex: none; }

.ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ls-space-2);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-pill);
  background: var(--ls-paper);
  color: var(--ls-ink);
  font: 600 var(--ls-text-sm) / 1.2 var(--ls-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.ls-btn:hover { border-color: var(--ls-faint); }
.ls-btn--primary { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; }
.ls-btn--primary:hover { background: var(--ls-accent-hover); border-color: var(--ls-accent-hover); }
.ls-btn:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }

.ls-stat__value {
  display: block;
  font-size: var(--ls-text-2xl);
  font-weight: 700;
  letter-spacing: var(--ls-tracking-tight);
  color: var(--ls-ink);
  line-height: var(--ls-leading-tight);
}
.ls-stat__label { display: block; font-size: var(--ls-text-xs); color: var(--ls-muted); margin-top: 2px; }

.ls-table { width: 100%; border-collapse: collapse; font-size: var(--ls-text-sm); }
.ls-table th {
  text-align: left;
  font-size: var(--ls-text-xs);
  font-weight: 500;
  color: var(--ls-muted);
  padding: var(--ls-space-2) var(--ls-space-3);
  border-bottom: 1px solid var(--ls-ink);
}
.ls-table td { padding: var(--ls-space-3); border-bottom: 1px solid var(--ls-line); color: var(--ls-ink); }

.ls-score {
  display: inline-block;
  min-width: 2.5em;
  padding: 1px 6px;
  border-radius: var(--ls-radius-sm);
  background: var(--ls-accent);
  color: #fff;
  font-size: var(--ls-text-xs);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ls-note { font-size: var(--ls-text-xs); color: var(--ls-muted); line-height: var(--ls-leading-snug); }