/* Hire Ella's signed-in and sign-up pages (hire_ella/base.html).
   They run under the blueprint's strict CSP (no inline styles), so what the public pages inline lives here:
   the Inter faces, the homepage's blue, and the few components the templates share. Layout is Tailwind
   utilities from v4.min.css. Colours are the site's: primary #1ba1f4, primary-ink #0a4a73, accent #ffbf0f. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/static/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/static/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body.he {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: #f4f7fa; color: #0b1220;
}
.he h1, .he h2, .he h3 { letter-spacing: -0.02em; }
.he .text-balance { text-wrap: balance; }

/* The homepage's blue, as on /hire-ella/. */
.ella-blue {
  background-color: #0d8bd9;
  background-image:
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(27,161,244,0.95), rgba(27,161,244,0) 65%),
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 60% 70% at 0% 60%, rgba(10,74,115,0.45), rgba(10,74,115,0) 65%);
}
.he-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.he-eyebrow::before { content: ""; display: inline-block; width: 24px; height: 3px; margin-right: 8px; border-radius: 2px;
  background: #ffbf0f; vertical-align: middle; }

/* Top navigation */
.he-nav a, .he-nav button {
  color: rgba(255,255,255,0.88); font-weight: 600; font-size: 14px; text-decoration: none;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.he-nav a:hover, .he-nav button:hover { color: #ffffff; background: rgba(255,255,255,0.12); }
.he-nav a[aria-current="page"] { color: #ffffff; background: rgba(255,255,255,0.18); }
.he-nav .he-nav-cta { background: #ffbf0f; color: #0f172a; }
.he-nav .he-nav-cta:hover { background: #e5ac00; color: #0f172a; }

/* Cards and type */
.he-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px;
  box-shadow: 0 2px 4px rgba(13,50,80,0.04), 0 6px 24px rgba(13,50,80,0.06);
}
@media (min-width: 640px) { .he-card { padding: 28px; } }
.he-card-flush { padding: 0; overflow: hidden; }
.he-h2 { font-size: 18px; font-weight: 700; color: #0f172a; }
.he-h3 { font-size: 15px; font-weight: 700; color: #0f172a; }
.he-lead { color: #475569; font-size: 15px; line-height: 1.6; }
.he-link { color: #0b6aa8; font-weight: 500; text-decoration: none; }
.he-link:hover { color: #0a4a73; text-decoration: underline; }
.he-muted { color: #64748b; }
.he-divider { border-top: 1px solid #e2e8f0; }

/* Forms */
.he-label { display: block; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
.he-help { font-size: 13px; color: #64748b; margin-top: 6px; line-height: 1.5; }
.he-input {
  display: block; width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff;
  padding: 10px 12px; font-size: 15px; color: #0f172a; line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.he-input:hover { border-color: #94a3b8; }
.he-input:focus { outline: none; border-color: #1ba1f4; box-shadow: 0 0 0 3px rgba(27,161,244,0.22); }
.he-input-sm { padding: 6px 10px; font-size: 14px; border-radius: 8px; }
.he input[type="radio"], .he input[type="checkbox"] { accent-color: #0d8bd9; width: 16px; height: 16px; flex-shrink: 0; }

/* A radio or checkbox as a card: the whole label is the target, and it lights up when chosen. */
.he-choice {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; background: #ffffff;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.he-choice:hover { border-color: #94a3b8; }
.he-choice:has(input:checked) { border-color: #1ba1f4; background: #f0f9ff; box-shadow: 0 0 0 1px #1ba1f4; }
.he-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(27,161,244,0.3); }

/* Buttons: yellow for the main action, as on the sales page; the rest quieter. */
.he-btn, .he-btn-dark, .he-btn-quiet, .he-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer;
  border-radius: 999px; padding: 11px 22px; border: 1px solid transparent; min-height: 44px;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.he-btn { background: #ffbf0f; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
.he-btn:hover { background: #e5ac00; }
.he-btn-dark { background: #0a4a73; color: #ffffff; }
.he-btn-dark:hover { background: #083a5a; }
.he-btn-quiet { background: #ffffff; color: #0f172a; border-color: #cbd5e1; }
.he-btn-quiet:hover { border-color: #94a3b8; background: #f8fafc; }
.he-btn-danger { background: #ffffff; color: #b91c1c; border-color: #fecaca; }
.he-btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }
.he-btn-sm { font-size: 13px; padding: 7px 14px; min-height: 34px; }
.he-btn:focus-visible, .he-btn-dark:focus-visible, .he-btn-quiet:focus-visible, .he-btn-danger:focus-visible,
.he-link:focus-visible, .he-nav a:focus-visible, .he-nav button:focus-visible {
  outline: 2px solid #1ba1f4; outline-offset: 2px;
}
.he button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Notices: a coloured rule on the left and a pale ground. */
.he-notice { border-radius: 12px; padding: 14px 16px; border: 1px solid; border-left-width: 4px; line-height: 1.5; }
.he-notice-info { background: #f0f9ff; border-color: #bae6fd; border-left-color: #1ba1f4; color: #0c4a6e; }
.he-notice-ok { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #22c55e; color: #14532d; }
.he-notice-warn { background: #fffbeb; border-color: #fde68a; border-left-color: #ffbf0f; color: #713f12; }
.he-notice-bad { background: #fef2f2; border-color: #fecaca; border-left-color: #ef4444; color: #7f1d1d; }
.he-notice-muted { background: #f8fafc; border-color: #e2e8f0; border-left-color: #94a3b8; color: #334155; }
.he-notice-ask { background: #ffffff; border-color: #e2e8f0; border-left-color: #ffbf0f; color: #0f172a; }

/* Status pills */
.he-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #334155; white-space: nowrap; }
.he-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.he-pill-ok { background: #dcfce7; color: #166534; }
.he-pill-info { background: #e0f2fe; color: #075985; }
.he-pill-warn { background: #fef3c7; color: #92400e; }
.he-pill-bad { background: #fee2e2; color: #991b1b; }

/* Tables */
.he-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.he-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #64748b; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.he-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.he-table tr:last-child td { border-bottom: 0; }

/* Definition lists: label left, value right. */
.he-dl { display: grid; grid-template-columns: 1fr; gap: 2px 16px; font-size: 14px; }
.he-dl dt { color: #64748b; padding-top: 10px; }
.he-dl dd { color: #0f172a; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.he-dl dd:last-of-type { border-bottom: 0; }
@media (min-width: 640px) {
  .he-dl { grid-template-columns: 180px 1fr; }
  .he-dl dt, .he-dl dd { padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
  .he-dl dt:last-of-type, .he-dl dd:last-of-type { border-bottom: 0; }
}

.he code, .he .he-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.he-code-block { display: block; background: #0b1220; color: #e2e8f0; border-radius: 12px; padding: 14px 16px;
  font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.he-code-block.he-wrap { white-space: pre-wrap; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  .he-input, .he-choice, .he-btn, .he-btn-dark, .he-btn-quiet, .he-btn-danger { transition: none; }
}

/* Links in the blue band */
.he-on-blue a { color: #ffffff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5); text-underline-offset: 3px; }
.he-on-blue a:hover { text-decoration-color: #ffbf0f; }
.he-input.he-input-narrow { width: 7rem; }
.he-card.he-card-attn { border-left: 4px solid #ffbf0f; }
.he-input.he-input-auto { width: auto; }
.he-table th:first-child, .he-table td:first-child { padding-left: 24px; }
.he-table th:last-child, .he-table td:last-child { padding-right: 24px; }
@media (min-width: 640px) { .he-card .he-table-inset th:first-child, .he-card .he-table-inset td:first-child { padding-left: 28px; } }