:root {
  --brand-deep-blue: #006699;
  --brand-sky-blue: #9FC9EB;
  --brand-seafoam: #99CCCC;
  --color-primary: #006699;
  --color-primary-hover: #005580;
  --color-primary-pressed: #004466;
  --color-primary-subtle: #E6F1F7;
  --color-on-primary: #FFFFFF;
  --color-accent: #9FC9EB;
  --color-accent-subtle: #EDF5FB;
  --color-secondary: #99CCCC;
  --color-secondary-subtle: #EBF5F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F8FA;
  --color-surface-sunken: #EAF1F5;
  --color-overlay: #0F2B38A6;
  --color-border: #D8E4EB;
  --color-border-strong: #B4C9D4;
  --color-focus-ring: #006699;
  --color-text-primary: #0F2B38;
  --color-text-secondary: #4A6572;
  --color-text-muted: #7C919C;
  --color-text-inverse: #FFFFFF;
  --color-link: #006699;
  --color-danger: #B3261E;
  --color-danger-subtle: #FBE9E7;
  --color-success: #1F6F43;
  --color-success-subtle: #E6F3EC;
  --color-warning: #8A5A00;
  --color-warning-subtle: #FBF1DF;
  --color-info: #006699;
  --color-info-subtle: #E6F1F7;
  --color-status-received: #4A6572;
  --color-status-in-review: #006699;
  --color-status-interview: #8A5A00;
  --color-status-offer: #1F6F43;
  --color-status-hired: #1F6F43;
  --color-status-declined: #7C919C;
  --color-status-withdrawn: #7C919C;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --type-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --type-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --type-display: 40px;
  --type-title: 28px;
  --type-headline: 20px;
  --type-subhead: 17px;
  --type-body: 15px;
  --type-caption: 12px;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-bold: 700;
  --type-line-height-tight: 1.2;
  --type-line-height-body: 1.55;
  --border-hairline: 1px;
  --border-thick: 2px;
  --border-focus: 2px;
  --shadow-card: 0 1px 2px rgba(15,43,56,0.06), 0 1px 8px rgba(15,43,56,0.06);
  --shadow-raised: 0 6px 20px rgba(15,43,56,0.12);
  --layout-content-max-width: 880px;
  --layout-wide-max-width: 1180px;
  --layout-embed-max-width: 960px;
  --layout-control-height: 44px;
  --layout-control-height-small: 34px;
  --layout-logo-width: 170px;
  --layout-logo-height: 66px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: var(--space-sm);
  font-family: var(--type-family); font-size: var(--type-body);
  line-height: var(--type-line-height-body);
  color: var(--color-text-primary); background: transparent;
}
body[data-theme="dark"] {
  color: var(--color-text-inverse);
  background: var(--color-text-primary);
}
body[data-theme="dark"] .embed-row { background: transparent; border-color: var(--color-text-secondary); }
body[data-theme="dark"] .embed-row h2 a, body[data-theme="dark"] a { color: var(--color-accent); }
body[data-theme="dark"] .embed-meta { color: var(--color-accent); }
/* --color-primary would be 2.4:1 on this background; the accent is 8.5:1,
   and the bold weight carries the emphasis instead. */
body[data-theme="dark"] .embed-pay { color: var(--color-accent); }
.embed-brand { max-width: var(--layout-embed-max-width); margin: 0 auto var(--space-md); }
.embed-brand a { display: inline-block; }
/* Never wider than the frame: a narrow parent shrinks it, keeping the aspect
   ratio, and the height reporter re-measures once it has loaded. */
.embed-logo { width: var(--layout-logo-width); height: auto; max-width: 100%; aspect-ratio: var(--layout-logo-width) / var(--layout-logo-height); }
.embed-list { max-width: var(--layout-embed-max-width); margin: 0 auto; list-style: none; padding: 0; }
.embed-row {
  display: flex; gap: var(--space-md); align-items: baseline; justify-content: space-between;
  padding: var(--space-md); background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
}
.embed-row + .embed-row { margin-top: var(--space-sm); }
.embed-row h2 { font-size: var(--type-subhead); margin: 0 0 var(--space-xs); }
.embed-row h2 a { color: var(--color-link); text-decoration: none; }
.embed-row h2 a:hover { text-decoration: underline; }
.embed-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); color: var(--color-text-secondary); font-size: var(--type-caption); margin: 0; padding: 0; }
.embed-meta li { list-style: none; }
/* Same weighting inside the frame, one gap further from the neutral items. */
.embed-pay { color: var(--color-primary); font-weight: var(--type-weight-bold); margin-right: var(--space-sm); }
.embed-empty, .embed-error { padding: var(--space-lg); text-align: center; color: var(--color-text-secondary); }
.embed-footer { margin-top: var(--space-md); text-align: right; font-size: var(--type-caption); }
:focus-visible { outline: var(--border-focus) solid var(--color-focus-ring); outline-offset: var(--space-xs); }
@media (max-width: 480px) {
  .embed-row { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
}