/* ── Design notices ───────────────────────────────────────────────────────────
   The standing conditions on a design: what its components do not state, and the
   one figure this product derives rather than refuses.

   A STANDING CONDITION IS NOT AN OUTCOME, and the styling has to say so. These sit
   above the surface they are about and stay there until somebody fixes the row, so
   they take the shape .sv-alert and .sv-notice already share rather than inventing
   a third. Nothing is drawn at all when the components are complete.

   ONE ROW IS RED AND THE REST ARE NOT, deliberately. A derived dimension is the only
   entry here that supplied a number rather than withholding one - every module count
   and row pitch on the canvas rests on it - so it carries the danger token and the
   refusals underneath it do not. Colouring them all red would make the one that
   changed the drawing indistinguishable from the four that merely await a datasheet. */

.sv-gapnotice {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  margin-bottom: var(--sv-space-4);
}

.sv-gapnotice__row {
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-border);
  border-left: 3px solid var(--sv-accent);
  border-radius: var(--sv-radius-control);
  background: var(--sv-bg-overlay);
  font: 400 13px/1.5 var(--sv-font-sans);
  color: var(--sv-text-secondary);
}

/* The assumption. Red because it is the only one that already changed the canvas. */
.sv-gapnotice__row--assumed {
  border-left-color: var(--sv-danger);
  background: color-mix(in srgb, var(--sv-danger) 8%, var(--sv-bg-overlay));
  color: var(--sv-danger-ink);
}

.sv-gapnotice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sv-space-2);
}

.sv-gapnotice__what {
  font-weight: 600;
  color: var(--sv-text);
}

.sv-gapnotice__row--assumed .sv-gapnotice__what {
  color: var(--sv-danger-ink);
}

.sv-gapnotice__where {
  font-size: 12px;
  color: var(--sv-text-tertiary);
}

.sv-gapnotice__body {
  margin: var(--sv-space-1) 0 0;
}

/* What this row costs, as chips rather than prose: a component commonly takes two
   capabilities away at once, and two sentences saying so read as repetition. */
.sv-gapnotice__cannot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-1);
  margin: var(--sv-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.sv-gapnotice__cannot li {
  padding: 2px var(--sv-space-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-control);
  font-size: 12px;
  color: var(--sv-text-tertiary);
}