/* ── One look for the three portals (applicant, organisation, recruiter) ────
   Loaded after each portal's common.css, so these win. Each portal keeps its
   own colours (--accent…); type and page layout are the same everywhere.

   Layout: the menu stays on the left; the page content is a centred column
   (like LinkedIn) — fixed width on big screens, full width on small ones.
   Pages with their own full-width layout (Find Talent) don't use .tm-main.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --content-max: 1080px;     /* the content column */
  --page-title:  24px;       /* page titles (the recruiter portal's size) */
}

body { font-family: var(--sans); font-size: 15px; line-height: 1.6; }

.tm-page-title {
  font-family: var(--serif);
  font-size: var(--page-title);
  color: var(--accent);
  line-height: 1.2;
  margin-bottom: 6px;
}
.tm-page-subtitle {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.6;
  margin-bottom: 24px;
}
.tm-card-title { font-size: 15px; font-weight: 500; color: var(--ink); }

/* Centred content column — padding grows with the window, the column doesn't */
.tm-main {
  max-width: none;
  padding: 32px max(40px, calc((100% - var(--content-max)) / 2));
}
@media (max-width: 768px) {
  .tm-main { padding: 20px 16px; }
}

/* ── Side menu: same spacing everywhere ──────────────────────────────────
   The icon box is a fixed 20×20 flex box, so a link is the same height
   whatever the icon (an inline icon used to stretch some links). */
.tm-nav { gap: 2px; }
.tm-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 14px; line-height: 20px;
  min-height: 36px;
}
.tm-nav-link .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; font-size: 16px; line-height: 1;
}
.tm-nav-link .icon svg { width: 16px; height: 16px; }
.tm-nav-greeting {
  padding: 4px 12px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.tm-nav-divider { margin: 10px 0; }
.tm-nav-section {
  font-size: 10px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-light); padding: 4px 12px; margin-bottom: 2px;
}

/* ── Info & policy pages (How it works, guides, privacy) ─────────────────
   Same title and intro sizes as every other page; text kept to a readable
   width inside the content column. */
.info-content, .guide-body { max-width: 760px; }
.info-content h1 {
  font-family: var(--serif); font-size: var(--page-title); color: var(--accent);
  line-height: 1.2; margin-bottom: 6px;
}
.tagline { font-size: 14px; color: var(--ink-light); line-height: 1.6; margin-bottom: 24px; }
.info-shell .info-content h1 { font-size: calc(var(--page-title) + 4px); }   /* public pages: a touch larger */

/* Account pages: the "delete account" card */
.danger-card { border-color: #f3c7c7; }