/* =============================================================================
   SolarLead Cyprus — prototype component patterns
   Jira: SCRUM-36 (subtask of SCRUM-26). Consumes tokens.css.

   Every pattern here exists because a screen in previews/homeowner/ needs it.
   Nothing is speculative. Mobile-first: base rules are the mobile layout,
   @media (min-width: …) adds the desktop layout.
   ============================================================================= */

/* ------------------------------------------------------------------ base -- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Author rules like `.field { display: block }` outrank the UA sheet's
   `[hidden] { display: none }`, so state it explicitly once, here. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink-1);
  background: var(--surface-0);
}

h1, h2, h3 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-bold); }
h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
p  { margin: 0; }

a { color: var(--brand-600); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Visible only to screen readers, but focusable (skip link). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: static; width: auto; height: auto;
  margin: 0; padding: var(--space-2) var(--space-3);
  clip: auto; background: var(--brand-600); color: var(--brand-on);
}

@media (min-width: 960px) {
  h1 { font-size: var(--text-4xl); }
}

/* ---------------------------------------------------------------- layout -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 600px) { .container { padding-inline: var(--space-5); } }

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.measure { max-width: var(--measure); }

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.screen main { flex: 1; padding-block: var(--space-5) var(--space-7); }

/* --------------------------------------------------- prototype dev chrome -- */
/* Deliberately ugly and unmistakable: this bar is NOT product UI. It carries
   the persona/locale switchers that make the mock navigable (SCRUM-35).
   Hidden with ?chrome=off for clean product screenshots. */
.protobar {
  background: #1f1f1d;
  color: #f2f2f0;
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.protobar[hidden] { display: none; }
.protobar__tag {
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  background: var(--status-warning);
  color: #3a2600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.protobar__group { display: flex; align-items: center; gap: var(--space-2); }
.protobar__group > span { color: #a8a8a4; }
.protobar a {
  color: #f2f2f0;
  text-decoration: none;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid #45454200;
}
.protobar a:hover { background: #34342f; }
.protobar a[aria-current="true"] { background: #f2f2f0; color: #1f1f1d; font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------ site header -- */
.siteheader {
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-1);
}
.siteheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
}
.logo {
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--ink-1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* The mark is now an inline SVG (Logo.razor) carrying its own geometry. All this
   needs to do is stop the flex row squashing it. */
.logo__mark { flex: none; display: block; }
.logo__cy { color: var(--ink-3); font-weight: var(--weight-regular); }

/* The header was a logo and a gap; siteheader__inner has always been
   space-between, so this fills the side that was already reserved (SCRUM-47). */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.langswitch__current {
  color: var(--ink-1);
  font-weight: var(--weight-medium);
}
.langswitch__other {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.langswitch__other:hover,
.langswitch__other:focus-visible {
  color: var(--ink-1);
  border-bottom-color: currentColor;
}
/* A separator that is decoration, not content: a screen reader announcing "slash"
   between two language names is reading punctuation aloud. */
.langswitch__current + .langswitch__other::before,
.langswitch__other + .langswitch__current::before,
.langswitch__other + .langswitch__other::before {
  content: "·";
  color: var(--ink-3);
  margin-inline-end: var(--space-2);
}

/* ------------------------------------------------------------------ hero -- */
/*
   The page had no horizon: an off-white plane, one blue button, nothing to look at
   (SCRUM-69). This gives the top of the page a surface of its own, drawn from the
   brand ramp rather than from a new hue — brand-100 is already in the validated set,
   and at these opacities it stays well clear of the text sitting on it.
*/
.hero {
  display: grid;
  gap: var(--space-6);
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-7);
  margin-inline: calc(var(--space-5) * -1);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(205, 226, 251, 0.55) 0%, rgba(205, 226, 251, 0) 62%),
    linear-gradient(180deg, #f4f8fe 0%, var(--surface-0) 78%);
}
.heroart {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin-inline: auto;
}
.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand-600);
  text-transform: none;
  letter-spacing: 0.01em;
}
.hero__sub { font-size: var(--text-lg); color: var(--ink-2); }
.hero__ctanote { font-size: var(--text-sm); color: var(--ink-2); }
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.35fr 1fr; align-items: start; gap: var(--space-7); }
  .hero__aside { position: sticky; top: var(--space-5); }
}

:where(.steplist) { margin: 0; padding-left: var(--space-5); color: var(--ink-2); }
.steplist li { padding-block: var(--space-2); }

/* ---------------------------------------------------------------- outcomes -- */
/* What the visitor gets (SCRUM-69). The tick is drawn rather than typed, so it
   inherits the accent green and does not depend on an emoji font rendering the
   same way on every device. */
.outcomes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 600px) {
  .outcomes__list { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
}
.outcomes__list li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--ink-2);
  line-height: var(--leading-snug);
}
.outcomes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-full);
  background: var(--accent-600);
  /* The check, as a mask so the shape is a shape and not a character. */
  -webkit-mask: no-repeat center/0.68rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center/0.68rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.batterypanel {
  background: linear-gradient(180deg, #fffaf0 0%, var(--surface-1) 60%);
  border: 1px solid #f0e3c4;
}
.batterypanel h2 { font-size: var(--text-xl); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn--primary { background: var(--brand-600); color: var(--brand-on); }
.btn--primary:hover { background: var(--brand-700); }
.btn--secondary {
  background: var(--surface-1);
  color: var(--brand-700);
  border-color: var(--line-2);
}
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--brand-600); padding-inline: var(--space-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--lg { font-size: var(--text-lg); padding: var(--space-4) var(--space-6); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mobile: primary actions are full width. Desktop: intrinsic. */
@media (max-width: 599px) { .btn--responsive { width: 100%; } }

.btn-row {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .btn-row { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ----------------------------------------------------------------- cards -- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card--raised { box-shadow: var(--shadow-2); border-color: transparent; }
.card__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.card__hint { font-size: var(--text-sm); color: var(--ink-2); }

.grid-2 { display: grid; gap: var(--space-4); }
.grid-3 { display: grid; gap: var(--space-4); }
@media (min-width: 600px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- inputs -- */
.field { display: block; }
.field__label {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.field__help {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-top: var(--space-2);
}
.field__error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--status-critical-text);
  font-weight: var(--weight-medium);
  margin-top: var(--space-2);
}
.field__error::before { content: "⚠"; flex: none; }

.input,
.select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3);
  font: inherit;
  font-size: var(--text-md);   /* never <16px: iOS zooms on focus below that */
  color: var(--ink-1);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.input:focus, .select:focus { border-color: var(--brand-500); }
.input[aria-invalid="true"] { border-color: var(--status-critical); border-width: 2px; }

/* Currency / unit affix */
.input-affix { display: flex; align-items: stretch; }
.input-affix__unit {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-weight: var(--weight-semibold);
}
.input-affix__unit:first-child {
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-affix__unit:last-child {
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.input-affix .input { border-radius: 0; }
.input-affix .input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-affix .input:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Native fieldset chrome removed; the legend keeps its grouping semantics.
   :where() keeps this reset at zero specificity so .stack-* still owns the
   vertical rhythm — otherwise `margin: 0` here silently kills the stack gap. */
:where(.fieldset) { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset > .field__label,
.fieldset > legend { padding: 0; margin-bottom: var(--space-2); }

.wizard { max-width: 640px; }

/* Choice cards — radio/checkbox rendered as tappable tiles. The native control
   stays in the DOM (keyboard + screen reader), it is only visually replaced. */
.choices { display: grid; gap: var(--space-2); }
@media (min-width: 600px) { .choices--2up { grid-template-columns: 1fr 1fr; } }

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  cursor: pointer;
}
.choice:hover { background: var(--surface-2); }
.choice input { margin: 0; margin-top: 0.2em; width: 20px; height: 20px; flex: none; accent-color: var(--brand-600); }
.choice:has(input:checked) { border-color: var(--brand-500); border-width: 2px; padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); background: #f5f9fe; }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.choice__text { display: block; }
.choice__label { font-weight: var(--weight-medium); }
.choice__note { display: block; font-size: var(--text-sm); color: var(--ink-2); }

/* The "I'm not sure" escape hatch — present on every uncertain field (SCRUM-27 D3) */
.unsure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--brand-600);
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Explains why a question is being asked — a trust device, not decoration. */
.whynote {
  font-size: var(--text-sm);
  color: var(--brand-700);
  background: #eef4fc;
  border-left: 3px solid var(--brand-400);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --------------------------------------------------------------- result -- */
.result { max-width: 840px; }
.result__headline { display: grid; gap: var(--space-4); }
.verdict { border-left: 4px solid; padding-left: var(--space-4); }
.verdict--yes { border-color: var(--status-good); }
.verdict--no { border-color: var(--ink-3); }
.verdict h3 { margin-bottom: var(--space-2); }
.factgrid { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .factgrid { grid-template-columns: repeat(2, 1fr); } }
.fact__label { font-size: var(--text-sm); color: var(--ink-2); font-weight: var(--weight-medium); }
.fact__value { font-size: var(--text-xl); font-weight: var(--weight-bold); }

/* --------------------------------------------------------------- stepper -- */
.stepper { display: flex; flex-direction: column; gap: var(--space-2); }
.stepper__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-2);
  font-weight: var(--weight-medium);
}
.stepper__track {
  display: flex;
  gap: var(--space-1);
  height: 6px;
}
.stepper__seg {
  flex: 1;
  border-radius: var(--radius-full);
  background: var(--chart-track);
}
.stepper__seg[data-state="done"],
.stepper__seg[data-state="current"] { background: var(--brand-500); }
.stepper__seg[data-state="current"] { background: var(--brand-400); }

/* ---------------------------------------------------------------- badges -- */
.badge {
  display: inline-flex;
  /* Aligned to the first line, not centred, because a long label wraps: the Greek
     confidence text is 45 characters and ran past the card edge on a phone. */
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  max-width: 100%;
}
/* inline-flex sizes to its content, so the label needs permission to shrink before
   it will wrap instead of overflowing. */
.badge > :last-child { min-width: 0; }
/* Status badges always pair an icon glyph with the label — never colour alone. */
.badge--good     { background: var(--status-good-bg);     color: var(--status-good-text); }
.badge--warning  { background: var(--status-warning-bg);  color: var(--status-warning-text); }
.badge--critical { background: var(--status-critical-bg); color: var(--status-critical-text); }
.badge--neutral  { background: var(--surface-2);          color: var(--ink-2); }

/* ---------------------------------------------------------------- alerts -- */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  align-items: flex-start;
}
.alert__icon { flex: none; font-size: var(--text-lg); line-height: 1.2; }
.alert__title { font-weight: var(--weight-semibold); }
.alert__body { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-1); }
.alert--critical { background: var(--status-critical-bg); border-color: #f0c9c9; }
.alert--critical .alert__title { color: var(--status-critical-text); }
.alert--warning  { background: var(--status-warning-bg);  border-color: #f2dfae; }
.alert--warning .alert__title { color: var(--status-warning-text); }
.alert--info     { background: #eef4fc; border-color: var(--brand-100); }

/* ----------------------------------------------------------- stat / hero -- */
.stat__label { font-size: var(--text-sm); color: var(--ink-2); font-weight: var(--weight-medium); }
.stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.stat__note { font-size: var(--text-sm); color: var(--ink-2); }

.hero-figure {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
/* The conservative and optimistic bounds render at identical size — the range
   is the finding, not the upper number (SCRUM-27 trust signals). */
.range { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.range__sep { color: var(--ink-3); font-size: var(--text-2xl); font-weight: var(--weight-regular); }
/* Real figures are longer than the mock's: "1.543 €" in el-CY, not "€1,180". At
   phone widths the pair wrapped and stranded the dash at the end of the first line,
   so the bounds step down a size rather than break apart. */
@media (max-width: 26rem) {
  .range .hero-figure { font-size: var(--text-3xl); }
  .range { gap: var(--space-2); }
}

/* Hour labels for the day chart. Outside the SVG so they keep their own size
   instead of scaling down with the viewBox on a phone. */
.chart__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: var(--figures-tabular);
  margin-top: var(--space-1);
}

/* ----------------------------------------------------------------- meter -- */
/* A single ratio against a limit is a meter, not a two-slice pie. Track and
   fill are steps of one ramp. */
.meter { display: flex; flex-direction: column; gap: var(--space-2); }
.meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.meter__value { font-weight: var(--weight-bold); font-size: var(--text-xl); font-variant-numeric: var(--figures-tabular); }
.meter__track {
  position: relative;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--chart-track);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--brand-500);
}
.meter__fill--after { background: var(--accent-600); }
.meter__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--chart-label);
  font-variant-numeric: var(--figures-tabular);
}

/* ----------------------------------------------------------------- chart -- */
/* 24-hour production vs consumption. Two series, so: a legend is always
   present AND both series are direct-labelled — which is also the contrast
   relief for the yellow production series. */
.chart { display: flex; flex-direction: column; gap: var(--space-3); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }
.chart__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.chart__swatch--production  { background: var(--chart-production); }
.chart__swatch--consumption { background: var(--chart-consumption); }
.chart__plot { width: 100%; height: auto; display: block; }
.chart__caption { font-size: var(--text-xs); color: var(--ink-3); }

.chart-grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis-line { stroke: var(--chart-axis); stroke-width: 1; }
.chart-tick { fill: var(--chart-label); font-size: 10px; font-family: var(--font-sans); font-variant-numeric: var(--figures-tabular); }
.chart-series-production  { fill: var(--chart-production); fill-opacity: 0.22; stroke: var(--chart-production); stroke-width: 2; }
.chart-series-consumption { fill: none; stroke: var(--chart-consumption); stroke-width: 2; }
.chart-direct-label { font-size: 11px; font-weight: 600; font-family: var(--font-sans); }
/* Compact geometry keeps viewBox units ~1:1 with CSS px, so text stays legible. */
.chart__plot--compact .chart-tick { font-size: 11px; }
.chart__plot--compact .chart-direct-label { font-size: 11px; }
.chart-direct-label--production  { fill: #8a5f00; }  /* text step of the yellow ramp — meets text contrast */
.chart-direct-label--consumption { fill: var(--brand-600); }

/* -------------------------------------------------------------- skeleton -- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, #e9eaee 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton--line { height: 1rem; }
.skeleton--title { height: 2rem; width: 60%; }
.skeleton--block { height: 8rem; }
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ----------------------------------------------------------------- lists -- */
:where(.checklist) { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-2);
  align-items: flex-start;
}
.checklist li::before {
  content: "✓";
  color: var(--status-good-text);
  font-weight: var(--weight-bold);
  flex: none;
}

.assumptions { border-top: 1px solid var(--line-1); }
.assumptions summary {
  padding-block: var(--space-3);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  color: var(--brand-600);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}
.assumptions ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--ink-2); font-size: var(--text-sm); }
.assumptions li { padding-block: var(--space-1); }

/* No-pressure / opt-out copy. Quiet, but never smaller than body-adjacent. */
.nopressure {
  font-size: var(--text-sm);
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.successmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--status-good-bg);
  color: var(--status-good-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

/* ------------------------------------------------------------- installer -- */
/* Patterns for previews/installer/ (SCRUM-40/41): the lead list, lead-detail
   and decision actions. Reuses .card/.badge/.choices/.alert/.factgrid above
   wherever they already fit; only genuinely new shapes are added here. */

.leadlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.leadcard__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.leadcard__name { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.leadcard__place { color: var(--ink-2); font-size: var(--text-sm); }
.leadcard__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.leadcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-1);
}

.emptystate {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}
.emptystate__icon { font-size: var(--text-4xl); }

/* Action bar for Accept/Reject — placed right under the identity card so the
   two decisions that matter are visible without scrolling past the detail. */
.decisionbar {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.decisionbanner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
}
.decisionbanner--good { background: var(--status-good-bg); border-color: #c9e8c9; }
.decisionbanner--good .decisionbanner__title { color: var(--status-good-text); }
.decisionbanner--muted { background: var(--surface-2); border-color: var(--line-1); }
.decisionbanner--muted .decisionbanner__title { color: var(--ink-2); }
.decisionbanner__title { font-weight: var(--weight-semibold); }
.decisionbanner__body { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-1); }

/* ---------------------------------------------------------------- footer -- */
.sitefooter {
  border-top: 1px solid var(--line-1);
  background: var(--surface-1);
  padding-block: var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.mocknote {
  background: var(--status-warning-bg);
  border: 1px dashed #e0c479;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--status-warning-text);
}