/* Main CSS file that imports all other CSS files */

/* Base styles and color schemes */
@import 'improved-styles.css';
@import 'color-schemes.css';

/* Typography */
@import 'typography.css';

/* Component-specific styles */
@import 'enhanced-cards.css';

/* Layout and visual hierarchy */
@import 'visual-hierarchy.css';

/* Visual enhancements and animations */
@import 'visual-enhancements.css';

/* Responsive design */
@import 'improved-responsive.css';

/* Project Scores Table */
@import 'table-responsive.css'
  
  <style>
/* ───────────────────────────────────────────────────────────
   Relative-Risk table polish
   ─ adds 1 px black-08 border + 5 px radius to every cell
   ─ gives each row a light lift & blue tint on hover/focus
   ----------------------------------------------------------------- */
#project-scores .scores-table {
  width: 100%;
  border-collapse: separate;   /* let borders & radius show */
  border-spacing: 0 6px;       /* little “card” gap between rows */
  font-family: Arial, sans-serif;
}

#project-scores .scores-table tbody tr > * {
  border: 1px solid rgba(0, 0, 0, 0.08); /* subtle black border */
  border-radius: 5px;                    /* 5 px corner radius  */
  transition: background-color .15s ease, box-shadow .15s ease;
}

#project-scores .scores-table tbody tr:hover,
#project-scores .scores-table tbody tr:focus-within {
  background-color: #f0f9ff;             /* pale blue hover tint */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
}
<style>
/* ───────────────────────────────────────────────────────────
   Relative-Risk table polish
   ─ adds 1 px black-08 border + 5 px radius to every cell
   ─ gives each row a light lift & blue tint on hover/focus
   ----------------------------------------------------------------- */
#project-scores .scores-table {
  width: 100%;
  border-collapse: separate;   /* let borders & radius show */
  border-spacing: 0 6px;       /* little “card” gap between rows */
  font-family: Arial, sans-serif;
}

#project-scores .scores-table tbody tr > * {
  border: 1px solid rgba(0, 0, 0, 0.08); /* subtle black border */
  border-radius: 5px;                    /* 5 px corner radius  */
  transition: background-color .15s ease, box-shadow .15s ease;
}

#project-scores .scores-table tbody tr:hover,
#project-scores .scores-table tbody tr:focus-within {
  background-color: #f0f9ff;             /* pale blue hover tint */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
}
/* ── Bigger / centred “Relative Risk” table ────────────────────────────── */

/* 1️⃣  Centre the whole scores card */
#project-scores .scores-card {
  display: flex;
  justify-content: center;   /* horizontal centring */
}

/* 2️⃣  Spread the table a little and make text larger */
#project-scores .scores-table {
  margin: 0 auto;            /* keeps table centred inside flex */
  font-size: 1.15rem;        /* ~18-19 px on default root size */
}

/* 3️⃣  Give cells more breathing room */
#project-scores .scores-table th,
#project-scores .scores-table td {
  padding: 14px 22px;        /* was 10 × 14; feels “bigger” */
}

</style>
</style>