/* "Tranquil Shore" palette: #2C3868 (navy) / #476985 (slate) / #609D9F (teal) /
   #BAB187 (sand) / #FFBE80 (peach). Navy anchors brand chrome, teal carries
   interactive accents, and peach stands in for the amber "worth a look" notice
   color it's closest to. */
:root {
  --bg: #f5f6f4;
  --surface: #ffffff;
  --border: #dce3e1;
  --text: #1e2a44;
  --text-muted: #5b7085;
  --primary: #2c3868;
  --primary-hover: #1f2850;
  --accent: #609d9f;
  --accent-hover: #4f8688;
  --accent-slate: #476985;
  --accent-sand: #bab187;
  --accent-peach: #ffbe80;
  --accent-peach-strong: #e0923d;
  --notice-bg: #fff3e2;
  --notice-border: #ffbe80;
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

/* layout.css sets display:flex/grid on several of these same elements, which would
   otherwise silently defeat the `hidden` attribute (author styles beat the UA
   [hidden] default even at equal specificity). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  /* Roboto Light for body copy; headings/buttons/labels below opt back into a
     heavier Roboto weight for hierarchy. */
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-weight: 500;
}

h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

h2 {
  font-size: 1rem;
  color: var(--text-muted);
}

p {
  margin: 0 0 0.75em;
}

.muted {
  color: var(--text-muted);
  font-size: 0.875rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

th {
  color: var(--text-muted);
  font-weight: 500;
}