/* Components for the programmatic pages the SEO engine writes into this
 * bucket (hopin-portal/backend/seo). Loaded after legal.css, which supplies
 * the shell: fonts, nav, .article typography, footer, noise overlay.
 *
 * Nothing here invents a colour, radius or font. Every value is one already
 * used by legal.css so a job page, a hub and /help are visibly one site:
 *   ink #1a1a1a · body #3a3a3a · muted #777 · accent #6F7FAD / #5A6A94
 *   paper #fffef6 · hairline rgba(26,26,26,.1) · radius 8px · shadow 0 1px 3px
 *
 * Owned by this repo on purpose: the engine deploys ~19.5k pages that link
 * here, so the design system stays in one place and one file changes them all.
 */

:root {
  --hp-ink: #1a1a1a;
  --hp-body: #3a3a3a;
  --hp-muted: #777;
  --hp-accent: #6F7FAD;
  --hp-accent-dark: #5A6A94;
  --hp-paper: #fffef6;
  --hp-line: rgba(26, 26, 26, 0.1);
  --hp-line-strong: rgba(26, 26, 26, 0.14);
  --hp-card: rgba(255, 255, 255, 0.34);
}

/* The measure is legal.css's 800px, unchanged: a job page and /help have to
   line up when you tab between them. */

/* ---------------------------------------------------------------- crumbs -- */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--hp-muted); margin-bottom: 16px;
}
.crumbs a { color: var(--hp-accent); font-weight: 500; }
.crumbs a:hover { color: var(--hp-accent-dark); }
.crumbs .sep { width: 3px; height: 3px; border-radius: 50%; background: #ccc; display: inline-block; }

/* ------------------------------------------------------------ answer box -- */
/* The first thing an answer engine lifts. Same shape as .legal-note. */
.answer {
  margin: 26px 0; padding: 18px 20px;
  border-left: 3px solid var(--hp-accent);
  background: rgba(111, 127, 173, 0.08);
  border-radius: 0 8px 8px 0;
  color: #303030; font-size: 16px; line-height: 1.65;
}
.answer b, .answer strong { color: var(--hp-ink); }

/* ------------------------------------------------------------------ lede -- */
/* The intro paragraph on the generated pages. One notch above body copy,
   still the article's own type ramp. */
.lede { font-size: 18px; line-height: 1.65; color: var(--hp-body); margin: 0 0 22px; }

/* ----------------------------------------------------------------- stats -- */
.stat-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; padding: 0; list-style: none;
}
/* .stats is the live-report page's grid; .stat-row is the hub's flex row. Same tile. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 22px 0; }
.stat {
  flex: 1 1 150px; border: 1px solid var(--hp-line); border-radius: 8px;
  background: var(--hp-card); padding: 14px 16px;
}
.stat .n, .stat b {
  font-family: 'General Sans', sans-serif; font-size: 26px; font-weight: 560;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--hp-ink); display: block;
}
.stat .k, .stat span { font-size: 13px; color: var(--hp-muted); margin-top: 4px; display: block; }

/* ------------------------------------------------------------- citation -- */
.cite {
  border: 1px solid var(--hp-line); border-radius: 8px; background: var(--hp-card);
  padding: 16px 18px; margin: 22px 0; font-size: 14px; color: var(--hp-muted); line-height: 1.6;
}
.cite code {
  display: block; background: rgba(111, 127, 173, 0.07); border: 1px solid var(--hp-line);
  border-radius: 8px; padding: 12px 14px; margin: 10px 0; color: var(--hp-ink);
  font-size: 13px; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.cite a { color: var(--hp-accent); font-weight: 500; }

/* ------------------------------------------------------------------- CTA -- */
.seo-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 30px 0; padding: 20px 22px;
  background: var(--hp-accent); color: #fff !important;
  border-radius: 8px; text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(111, 127, 173, 0.3);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.seo-cta:hover {
  background: var(--hp-accent-dark); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(111, 127, 173, 0.35);
}
.seo-cta .lab {
  font-family: 'General Sans', sans-serif; font-size: 19px; font-weight: 560;
  letter-spacing: -0.015em; line-height: 1.25; display: block;
}
.seo-cta .sub { display: block; margin-top: 5px; font-size: 14px; font-weight: 400; opacity: .92; line-height: 1.5; }
.seo-cta .go {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
}

/* -------------------------------------------------------------- job list -- */
.jobs { list-style: none; padding: 0; margin: 18px 0 8px; }
.jobs li {
  border: 1px solid var(--hp-line-strong); border-radius: 8px;
  background: var(--hp-card); margin: 0 0 10px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jobs li:hover {
  border-color: var(--hp-accent); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.05);
}
.jobs a.job {
  display: block; padding: 15px 18px; color: var(--hp-ink) !important; text-decoration: none !important;
}
.jobs .t {
  font-family: 'General Sans', sans-serif; font-size: 17px; font-weight: 560;
  letter-spacing: -0.01em; line-height: 1.3; display: block;
}
.jobs .m { font-size: 14px; color: var(--hp-muted); margin-top: 5px; display: block; }
.jobs .m .co { color: var(--hp-body); font-weight: 500; }
.jobs .tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(111, 127, 173, 0.1); color: var(--hp-accent-dark);
  font-size: 12px; font-weight: 500; vertical-align: 1px;
}
.jobs-more { font-size: 14px; color: var(--hp-muted); margin: 6px 0 0; }

/* --------------------------------------------------------------- related -- */
.related { margin: 34px 0 8px; }
.related h2 { margin-bottom: 12px; }
.related .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.related .chips a {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--hp-line-strong); background: var(--hp-card);
  font-size: 14px; color: var(--hp-body) !important; text-decoration: none !important;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.related .chips a:hover {
  border-color: var(--hp-accent); color: var(--hp-accent-dark) !important;
  background: rgba(111, 127, 173, 0.06);
}

/* ------------------------------------------------------------------- FAQ -- */
.faq { margin: 40px 0 0; }
.faq .qa { border-top: 1px solid var(--hp-line); padding: 18px 0; }
.faq .qa h3 { margin: 0 0 8px; }
.faq .qa p { margin: 0; font-size: 16px; }

/* ----------------------------------------------------------------- table -- */
.cmp-wrap { overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
table.cmp th, table.cmp td {
  border: 1px solid var(--hp-line); padding: 12px 14px; text-align: left; vertical-align: top;
}
table.cmp th {
  background: rgba(111, 127, 173, 0.08); font-family: 'General Sans', sans-serif;
  font-weight: 560; color: var(--hp-ink);
}
table.cmp td { color: var(--hp-body); }
table.cmp td.me { background: rgba(111, 127, 173, 0.06); color: var(--hp-ink); font-weight: 600; }

/* -------------------------------------------------------------- job body -- */
.jd { font-size: 17px; line-height: 1.7; color: var(--hp-body); }
.jd p { margin: 0 0 16px; }
.jd ul, .jd ol { margin: 0 0 18px; padding-left: 22px; }
.jd li { margin: 0 0 8px; }
.jd h2, .jd h3, .jd h4 { font-family: 'General Sans', sans-serif; font-weight: 560; letter-spacing: -0.01em; color: var(--hp-ink); }
.jd h2 { font-size: 22px; margin: 28px 0 10px; }
.jd h3, .jd h4 { font-size: 18px; margin: 22px 0 8px; }
.jd a { color: var(--hp-accent); text-decoration: underline; text-underline-offset: 3px; }
.jd img { max-width: 100%; height: auto; }
.jd table { display: block; overflow-x: auto; max-width: 100%; }

/* ---------------------------------------------------------------- footer -- */
.seo-foot { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--hp-line); }
.seo-foot p { font-size: 14px; color: var(--hp-muted); line-height: 1.65; margin: 0 0 14px; }
.seo-foot .links { display: flex; flex-wrap: wrap; gap: 14px 22px; font-size: 14px; }
.seo-foot .links a { color: var(--hp-accent); font-weight: 500; }
.seo-foot .links a:hover { color: var(--hp-accent-dark); }

/* --------------------------------------------------------------- updated -- */
.updated { font-size: 13px; color: var(--hp-muted); margin: 0 0 30px; }

@media (max-width: 780px) {
  .seo-cta { padding: 18px; gap: 12px; }
  .seo-cta .lab { font-size: 17px; }
  .seo-cta .go { display: none; }
  .stat { flex-basis: 100%; }
  .jobs a.job { padding: 14px 15px; }
  .jobs .t { font-size: 16px; }
  .jd { font-size: 16px; }
}

/* ------------------------------------------------------------ legacy -----
 * The /answers/ and /news/ pages are written once and never re-rendered, so
 * ~89 of them predate the shell above and carry the old class names inside
 * their body. reshellExtraPages.js swaps their chrome; these rules cover
 * what is left inside, so a July answer page and an August one look the same.
 */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 13px; color: var(--hp-muted); margin-bottom: 16px;
}
.breadcrumb a { color: var(--hp-accent); font-weight: 500; }
.breadcrumb a:hover { color: var(--hp-accent-dark); }

a.cta {
  display: block; margin: 30px 0; padding: 20px 22px;
  background: var(--hp-accent); color: #fff !important;
  border-radius: 8px; text-decoration: none !important;
  font-family: 'General Sans', sans-serif; font-size: 19px; font-weight: 560;
  letter-spacing: -0.015em; line-height: 1.25;
  box-shadow: 0 1px 3px rgba(111, 127, 173, 0.3);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.cta:hover {
  background: var(--hp-accent-dark); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(111, 127, 173, 0.35);
}
a.cta small {
  display: block; margin-top: 5px; font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 400; letter-spacing: 0; opacity: .92; line-height: 1.5;
}

ul.jobs { list-style: none; padding: 0; margin: 18px 0 8px; }
ul.jobs li {
  border: 1px solid var(--hp-line-strong); border-radius: 8px;
  background: var(--hp-card); margin: 0 0 10px; padding: 15px 18px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
ul.jobs li:hover {
  border-color: var(--hp-accent); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.05);
}
ul.jobs li > a {
  font-family: 'General Sans', sans-serif; font-size: 17px; font-weight: 560;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--hp-ink) !important;
  text-decoration: none !important;
}
ul.jobs .meta { font-size: 14px; color: var(--hp-muted); margin-top: 5px; }

nav.related { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 8px; }
nav.related a {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--hp-line-strong); background: var(--hp-card);
  font-size: 14px; color: var(--hp-body) !important; text-decoration: none !important;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
nav.related a:hover {
  border-color: var(--hp-accent); color: var(--hp-accent-dark) !important;
  background: rgba(111, 127, 173, 0.06);
}