/* Moved from websites/templates/websites/_paid_landscape_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. */

.pl-board .num { font-variant-numeric: tabular-nums; }
.pl-board > .hn-pair + * { margin-top: var(--space-4); }

/* ── The verdict: the answer, on an ink band ────────────────────────── */
.pl-verdict {
  margin: 0;
  padding: var(--space-6);
  background: var(--color-text); color: var(--color-bg);
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-8); align-items: center;
}
.pl-flag {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 0.98;
  letter-spacing: -0.03em; margin: var(--space-2) 0 var(--space-3);
}
.pl-flag em { font-style: normal; color: var(--color-accent-500); }
.pl-summary { margin: 0; color: var(--color-neutral-300); max-width: 58ch; }

/* One square per tracked competitor; the ones that bid are the only red. */
.pl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
  gap: 5px;
}
.pl-grid i {
  aspect-ratio: 1; display: block;
  background: color-mix(in srgb, var(--white) 14%, transparent);
}
.pl-grid i.on { background: var(--color-accent); }
.pl-gridcap {
  margin: var(--space-3) 0 0; font-size: 12px;
  font-family: var(--font-heading); font-weight: 600;
  color: var(--color-neutral-400);
}

/* ── The three surfaces a customer can be won on ──────────────────── */
.pl-surfaces {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.pl-surface { background: var(--color-bg); padding: var(--space-4); }
.pl-surface h5 {
  margin: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.pl-surface-value {
  font-family: var(--font-heading); font-weight: 800; font-size: 38px;
  line-height: 1; letter-spacing: -0.02em; margin: var(--space-3) 0 2px;
}
.pl-surface-value span { font-size: 20px; color: var(--color-neutral-500); }
.pl-surface-unit {
  margin: 0 0 var(--space-3); font-size: 13px; color: var(--color-neutral-700);
}
.pl-surface-stance {
  margin: 0; font-size: 13px;
  border-top: 2px solid var(--color-text); padding-top: var(--space-2);
}
.pl-surface--held .pl-surface-value { color: var(--mint); }
.pl-surface--empty .pl-surface-value { color: var(--color-neutral-500); }
.pl-surface--lost .pl-surface-value { color: var(--coral); }

/* ── Who pays: the bidders as bars, the silent ones as chips ──────── */
.pl-payer {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 74px;
  gap: var(--space-4); align-items: center; margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider); background: var(--color-neutral-100);
}
.pl-payer-dom { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.pl-payer-sub { font-size: 12px; color: var(--color-neutral-700); }
.pl-bar { position: relative; height: 26px; background: var(--color-neutral-300); }
.pl-bar span { position: absolute; inset: 0 auto 0 0; background: var(--color-accent); }
.pl-bar b {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
}
.pl-payer-share {
  text-align: right; font-family: var(--font-heading); font-weight: 800;
  font-size: 18px;
}
.pl-silent {
  margin-top: var(--space-4); padding: var(--space-4);
  border: 1px dashed var(--color-neutral-400);
}
.pl-silent-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3);
}
.pl-silent-list span {
  font-size: 12px; color: var(--color-neutral-700); padding: 3px 8px;
  border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100);
}

@media (max-width: 900px) {
  .pl-verdict, .pl-surfaces, .pl-payer { grid-template-columns: 1fr; }
  .pl-verdict { padding: var(--space-4); }
}

/* Paper: an ink-filled band would empty a cartridge, and the report has
   a print view. Keep the type, drop the fill. */
@media print {
  .pl-verdict {
    background: var(--white); color: var(--navy); border: 2px solid var(--navy);
    padding: var(--space-4); margin: 0;
  }
  .pl-summary, .pl-gridcap { color: #333; }
  .pl-flag em { color: var(--navy); }
  .pl-grid i { border: 1px solid var(--slate); background: var(--white); }
  .pl-grid i.on { background: var(--navy); }
  .pl-payer, .pl-silent { break-inside: avoid; }
}