/* ==========================================================================
   pages/suggestions.css — suggestion cards with priority bar
   .sg=grid, .sc=card, .sp2=priority-bar, .si2=icon
   .pc/.ph/.pm/.pl = priority colors (critical/high/medium/low)
   ========================================================================== */

.sg {
  display: grid;
  gap: 11px;
}

.sc {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--rl);
  padding: 18px;
  display: flex;
  gap: 14px;
}

.sp2 {
  width: 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.pc { background: var(--red); }
.ph { background: var(--amber); }
.pm { background: var(--accent2); }
.pl { background: var(--green); }

.si2 {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}