/* Signal Staffing — styles. Brand kit applied. Mobile-first, zero build.
   Palette: Signal Teal / Deep Pine / Soft Mint / Warm Cream / Beacon Amber / Slate.
   Amber (--accent) is reserved for ONE thing only: the Apply action. */

:root {
  color-scheme: light;   /* light theme only — no dark variant */
  /* brand palette */
  --teal:       #1B8A7A;
  --pine:       #0E3A38;
  --mint:       #CDEAE1;
  --cream:      #FAF7F0;
  --amber:      #F4A259;
  --slate:      #5C6B6A;

  /* semantic tokens (light / brand default) */
  --bg:         var(--cream);
  --surface:    #FFFFFF;
  --surface-2:  #F1EEE4;
  --ink:        var(--pine);
  --muted:      var(--slate);
  --faint:      #8A9693;
  --line:       rgba(14, 58, 56, .14);
  --brand:      var(--teal);
  --brand-ink:  #0F6E5E;          /* darker teal: AA for small text on cream */
  --brand-soft: var(--mint);
  --accent:     var(--amber);      /* APPLY ONLY */
  --accent-ink: var(--pine);
  --open:       #0F6E5E;
  --open-soft:  var(--mint);
  --urgent:     #B24632;           /* brick — urgent deadlines only, never a CTA */
  --urgent-soft:#F6E1DB;
  --notice-bg:  var(--pine);       /* sample-data strip */
  --notice-ink: var(--mint);

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(14,58,56,.05), 0 10px 30px rgba(14,58,56,.06);

  --display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    'Space Mono', ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
a { color: var(--brand-ink); }
button { font-family: inherit; }

.wrap { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 20px; }

:where(button, a, input, select, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- banners ------------------------------------------------------------- */
.banner { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; padding: 9px 20px; text-align: center; }
.banner--sample { background: var(--notice-bg); color: var(--notice-ink); }
.banner--sample strong { color: #fff; }
.banner--dev { background: var(--urgent-soft); color: var(--urgent); }
.dev-banner__hint { opacity: .7; }

/* ---- wordmark + beacon (the lead brand mark) ----------------------------- */
.wordmark {
  font-family: var(--display); font-weight: 600; letter-spacing: -.03em;
  line-height: 1; color: var(--ink);
}
.wordmark .dot { position: relative; }
.wordmark .beacon {
  position: absolute; left: 50%; transform: translateX(-50%); top: .02em;
  width: .2em; height: .2em; border-radius: 50%; background: var(--accent);
}
.wordmark .beacon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(244, 162, 89, .55);
  animation: beat 2.6s ease-out infinite;
}
@keyframes beat {
  0%   { box-shadow: 0 0 0 0 rgba(244,162,89,.55); }
  70%  { box-shadow: 0 0 0 .5em rgba(244,162,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,162,89,0); }
}

/* ---- masthead ------------------------------------------------------------ */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead__bar { display: flex; align-items: center; gap: 12px; height: 62px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; }
.brand .wordmark { font-size: 21px; }
.brand__sub { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.masthead__tag { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.masthead__promise { position: relative; overflow: hidden; }
.masthead__promise-inner { position: relative; z-index: 1; padding: 40px 20px 44px; }
.masthead__promise h1 { font-size: clamp(27px, 6vw, 40px); margin: 0 0 12px; max-width: 18ch; }
.masthead__promise h1 em { color: var(--brand); font-style: normal; }
.masthead__promise p { font-family: var(--body); font-size: 16px; color: var(--muted); margin: 0; max-width: 52ch; }

/* pulsing rings behind the hero promise */
.rings { position: absolute; top: 50%; left: 15%; width: 360px; height: 360px; transform: translateY(-50%); pointer-events: none; z-index: 0; }
.rings span {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px;
  border: 1.5px solid var(--brand); border-radius: 50%; opacity: 0;
  animation: ping 5s ease-out infinite;
}
.rings span:nth-child(2) { animation-delay: 1.6s; }
.rings span:nth-child(3) { animation-delay: 3.2s; }
@keyframes ping {
  0%   { transform: scale(1); opacity: .35; }
  80%  { opacity: 0; }
  100% { transform: scale(5.5); opacity: 0; }
}
body[data-view="results"] .masthead__promise { display: none; }

/* ---- generic controls ---------------------------------------------------- */
.back { background: none; border: 0; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 12.5px; padding: 4px 0; margin-bottom: 8px; }
.back:hover { color: var(--brand-ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--brand); color: #fff; border: 0; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 14px; padding: 10px 20px; }
.btn:hover { filter: brightness(1.05); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--brand-ink); font: inherit; text-decoration: underline; }

/* ---- step / entry -------------------------------------------------------- */
.step { padding: 30px 0 8px; }
.step__kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px; }
.step__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(244,162,89,.22); }
.step__title { font-size: 24px; margin: 0 0 20px; }
.step__note { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--faint); }
.step__eligibility { font-family: var(--body); margin: 20px 0 0; font-size: 14.5px; color: var(--muted); max-width: 60ch; }

.pick-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pick-card { text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; transition: border-color .12s ease, transform .06s ease, box-shadow .12s ease; }
.pick-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.pick-card:active { transform: translateY(1px); }
.pick-card__name { font-family: var(--display); font-size: 18px; font-weight: 600; }
.pick-card__sub { font-size: 13px; color: var(--muted); }

.stage-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.stage-card { text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; display: flex; flex-direction: column; gap: 3px; transition: border-color .12s ease, transform .06s ease, box-shadow .12s ease; }
.stage-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.stage-card:active { transform: translateY(1px); }
.stage-card__label { font-family: var(--display); font-size: 16px; font-weight: 600; }
.stage-card__hint { font-size: 13px; color: var(--muted); }

/* ---- link-outs (Tier 2) -------------------------------------------------- */
.linkouts { margin: 36px 0 8px; padding: 22px; background: var(--surface-2); border-radius: var(--radius); }
.linkouts__title { font-size: 16px; margin: 0 0 5px; }
.linkouts__note { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; max-width: 62ch; }
.linkout-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.linkout { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; text-decoration: none; color: var(--ink); }
.linkout:hover { border-color: var(--brand); }
.linkout__name { font-weight: 600; font-size: 14px; }
.linkout__via { font-family: var(--mono); font-size: 12px; color: var(--brand-ink); white-space: nowrap; }

/* ---- explainer ----------------------------------------------------------- */
.explainer { margin: 34px 0 10px; display: grid; gap: 8px; }
.explainer details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 18px; }
.explainer summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 15px; padding: 12px 0; }
.explainer p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; max-width: 66ch; }
.explainer__more a { font-family: var(--display); font-weight: 600; color: var(--brand-ink); text-decoration: none; }
.explainer__more a:hover { text-decoration: underline; }

/* ---- welcome (per-stage, brand voice) ------------------------------------ */
.welcome { border-radius: var(--radius); padding: 18px 20px; margin: 4px 0 18px; background: var(--mint); }
.welcome__title { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--pine); margin: 0 0 5px; }
.welcome__body { font-size: 14.5px; color: #16413C; margin: 0; max-width: 64ch; }

/* ---- results ------------------------------------------------------------- */
.results__head { padding: 24px 0 6px; }
.results__crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--mint); color: var(--brand-ink); text-transform: uppercase; }
.crumb--stage { background: var(--surface-2); color: var(--ink); }
.results__count { font-size: 14.5px; color: var(--muted); margin: 4px 0 14px; }
.results__count strong { color: var(--ink); }
.results__body { margin-bottom: 22px; }

/* ---- filters ------------------------------------------------------------- */
.filters { display: grid; grid-template-columns: 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; margin: 4px 0 18px; }
.filters__field { display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.filters__field input, .filters__field select { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; }
.filters__check { display: flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 14px; color: var(--ink); }
.filters__check input { width: 17px; height: 17px; accent-color: var(--brand); }

/* ---- cards --------------------------------------------------------------- */
.cards { display: grid; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card__title { font-size: 17px; margin: 0 0 4px; }
.card__co { font-size: 14px; color: var(--muted); margin: 0; }
.card__field { color: var(--faint); }
.card__desc { font-size: 14px; color: var(--muted); margin: 11px 0 0; }
.card__meta { display: flex; flex-wrap: wrap; gap: 7px 10px; align-items: center; margin: 13px 0 0; }
.meta__item { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.tag--role { background: var(--mint); color: var(--brand-ink); }
.tag--visa { background: var(--open-soft); color: var(--open); }

.card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.checked { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.checked--stale { color: var(--urgent); }
/* Apply = the single amber beacon action */
.apply { font-family: var(--display); font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--accent-ink); background: var(--accent); padding: 10px 22px; border-radius: 999px; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease; }
.apply:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(244,162,89,.4); }

/* ---- deadline chip ------------------------------------------------------- */
.deadline { font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap; padding: 4px 9px; border-radius: 7px; background: var(--surface-2); color: var(--muted); }
.deadline.is-rolling { background: var(--open-soft); color: var(--open); }
.deadline.is-soon { background: var(--surface-2); color: var(--ink); }
.deadline.is-urgent { background: var(--urgent-soft); color: var(--urgent); }

/* ---- empty / off-season -------------------------------------------------- */
.empty { background: var(--mint); border-radius: var(--radius); padding: 28px 24px; text-align: center; }
.empty__lead { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--pine); margin: 0 0 8px; }
.empty p { color: #23504A; font-size: 14.5px; margin: 0 auto; max-width: 56ch; }
.empty .btn { margin-top: 16px; }
.empty__evergreen { margin-top: 18px; }
.empty__evergreen .empty { background: none; border: 1px dashed var(--line); text-align: left; }
.empty__evergreen .empty__lead { text-align: left; font-size: 14px; margin-bottom: 10px; color: var(--ink); }

/* ---- loading state ------------------------------------------------------- */
.loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 52px 24px; text-align: center; }
.loading__spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; }
.loading__text { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- report a problem (subtle; never competes with the amber Apply) ------ */
.card__report { margin-top: 10px; }
.report__toggle { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--faint); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.report__toggle::-webkit-details-marker { display: none; }
.report__toggle::before { content: "⚑"; font-size: 11px; }
.report__toggle:hover { color: var(--muted); }
.report__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.report__opt { cursor: pointer; font-family: var(--body); font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.report__opt:hover { border-color: var(--brand); color: var(--brand-ink); }
.report__done { font-family: var(--mono); font-size: 12px; color: var(--open); margin: 8px 0 0; }
.report__done--err { color: var(--urgent); }

/* ---- footer -------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 30px; padding: 28px 0 48px; }
.site-foot p { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.site-foot__mark { font-family: var(--display); font-weight: 700; color: var(--ink); }
.site-foot__fine { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--faint); }
.site-foot__contact { color: var(--ink); }
.site-foot__contact a { color: var(--brand-ink); font-weight: 600; }

/* ---- consent banner ------------------------------------------------------ */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 18px; }
.consent__text { margin: 0; flex: 1 1 280px; font-size: 13px; color: var(--muted); }
.consent__actions { display: flex; gap: 8px; margin-left: auto; }
.consent__btn { cursor: pointer; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 14px; padding: 9px 18px; border: 1px solid var(--line); }
.consent__btn--ghost { background: var(--surface); color: var(--muted); }
.consent__btn--ghost:hover { color: var(--ink); }
.consent__btn--accept { background: var(--brand); color: #fff; border-color: var(--brand); }
.consent__btn--accept:hover { filter: brightness(1.05); }

/* ---- responsive ---------------------------------------------------------- */
@media (min-width: 600px) {
  .pick-grid { grid-template-columns: 1fr 1fr; }
  .stage-grid { grid-template-columns: 1fr 1fr; }
  .linkout-grid { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
  .filters__check { grid-column: 1 / -1; }
}
@media (min-width: 820px) {
  .filters { grid-template-columns: 2fr 1fr 1fr auto; }
  .filters__check { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .rings span, .wordmark .beacon::after, .loading__spinner { animation: none; }
  .rings span { opacity: .12; transform: scale(2.2); }
}