/* ==========================================================================
   EZJobFinder design system
   --------------------------------------------------------------------------
   Vanilla CSS, no build step, no framework. Shared by the board and every
   public page so they read as one document.

   The personality here is the mono-uppercase treatment: every piece of
   metadata, every count, every label and every small control is IBM Plex Mono,
   uppercase, 10-11px, letter-spacing .1em. Do not substitute a sans-serif for
   those -- it is most of the design.

   COLOUR IS DRAWN FROM THE LOGO. The mark is a cobalt briefcase with a teal
   magnifier, and the wordmark sets cobalt "EZ" against slate "JobFinder" and
   teal ".com". Those three -- cobalt, slate, teal -- are the whole palette.
   The raw logo colours are too light to carry text (brand teal #00A99B is
   3.4:1 on white), so each has a darkened text-safe twin: the bright value is
   used for fills, rules and gradients, the deep value for anything with a
   letterform in it. Measured against --surface:
       --accent  #0A54E0  6.25:1     --accent on white as body-size link text
       --good    #0B7268  5.80:1     teal, same job
       --ink     #141A22 15.7:1
   Every colour is defined as a token on bare :root. The dark blocks redefine
   only tokens, never give a colour its sole definition.

   NO INLINE STYLE ATTRIBUTES ANYWHERE. The CSP is style-src 'self' with no
   'unsafe-inline', which blocks style="" the same way it blocks <script>. If
   you need a one-off, it goes here as a class. qa_CspComplianceTest fails the
   build if a style attribute reappears in a view.
   ========================================================================== */

:root{
  --ground:#F2F4F7; --surface:#FFFFFF; --surface-2:#F7F9FC;
  --ink:#141A22; --ink-2:#39434F; --muted:#697384;
  --line:#E3E7ED; --line-2:#CCD3DC;

  /* brand, straight off the logo -- fills, rules and gradients only */
  --brand-blue:#0A5CF5; --brand-blue-2:#0079EB; --brand-teal:#00A99B;

  /* text-safe twins */
  --accent:#0A54E0; --accent-soft:#E8EFFE;
  --good:#0B7268; --good-soft:#E1F2EF;
  --signal:#9A5F0B; --signal-soft:#F8EFDD;

  --shadow:0 1px 2px rgba(20,26,34,.05),0 8px 24px -16px rgba(20,26,34,.25);
  --shadow-lift:0 1px 2px rgba(20,26,34,.06),0 18px 40px -24px rgba(10,84,224,.35);
  --ring:0 0 0 3px var(--accent-soft);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",-apple-system,sans-serif;
  --radius:3px;
  --radius-lg:6px;      /* larger surfaces only: hero panel, figure frame */
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0D1117; --surface:#161B23; --surface-2:#1C222C;
    --ink:#E9EBEE; --ink-2:#C2C7D0; --muted:#8E96A5;
    --line:#252C36; --line-2:#39414D;
    --brand-blue:#3D82FF; --brand-blue-2:#38A5FF; --brand-teal:#2FC4B4;
    --accent:#7EA6FF; --accent-soft:#152040;
    --good:#3FC9B9; --good-soft:#0F2A28;
    --signal:#D9A254; --signal-soft:#312515;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
    --shadow-lift:0 1px 2px rgba(0,0,0,.5),0 18px 40px -24px rgba(0,0,0,.9);
    --ring:0 0 0 3px rgba(126,166,255,.22);
  }
}

/* Explicit toggle wins over the system preference, in both directions. */
:root[data-theme="dark"]{
  --ground:#0D1117; --surface:#161B23; --surface-2:#1C222C;
  --ink:#E9EBEE; --ink-2:#C2C7D0; --muted:#8E96A5;
  --line:#252C36; --line-2:#39414D;
  --brand-blue:#3D82FF; --brand-blue-2:#38A5FF; --brand-teal:#2FC4B4;
  --accent:#7EA6FF; --accent-soft:#152040;
  --good:#3FC9B9; --good-soft:#0F2A28;
  --signal:#D9A254; --signal-soft:#312515;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
  --shadow-lift:0 1px 2px rgba(0,0,0,.5),0 18px 40px -24px rgba(0,0,0,.9);
  --ring:0 0 0 3px rgba(126,166,255,.22);
}

/* --------------------------------------------------------------- reset --- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---------------------------------------------------------- structure --- */

.wrap{
  max-width:1020px;
  margin:0 auto;
  padding:40px 22px 80px;
  display:flex;
  flex-direction:column;
  gap:34px;
}
.wrap--narrow{max-width:620px}
.wrap--wide{max-width:1120px}
.wrap--flush{padding-top:0}

.section{display:flex;flex-direction:column;gap:14px}
.section__head{display:flex;flex-direction:column;gap:6px}
.section__head h2{font-size:25px}
.section__head .lede{margin:2px 0 0}

.page-head{display:flex;flex-direction:column;gap:9px}
.page-head h1{font-size:31px}
.page-head .lede{margin:0}

/* ---------------------------------------------------- mono microtype --- */
/* The single most reused idiom in the design. */

.mono,.eyebrow,.meter__label,.chip,.count,.facts,.label,.badge,.tag,
.btn,.field__label,.note-label,.cl-label,.step__n,.pill{
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.1em;
  font-weight:500;
}
.eyebrow{color:var(--muted);margin:0 0 14px}
.eyebrow--tight{margin-bottom:8px}
.eyebrow--accent{color:var(--accent)}
.mono--case{text-transform:none;letter-spacing:.04em}

/* -------------------------------------------------------------- site --- */

.sitehead{
  border-bottom:1px solid var(--line);
  background:var(--surface);                       /* fallback first */
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  position:sticky;top:0;z-index:20;
}
@supports not (backdrop-filter:blur(2px)){ .sitehead{background:var(--surface)} }
.sitehead__in{
  max-width:1120px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}

/* -------------------------------------------------------------- brand -- */
/* The lockup is an image, so the two colour variants swap the same way the
   tokens do: system preference, overridden by an explicit data-theme. */

.brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand__img{height:30px;width:auto}
.brand__img--dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand__img--light{display:none}
  :root:not([data-theme="light"]) .brand__img--dark{display:block}
}
:root[data-theme="dark"] .brand__img--light{display:none}
:root[data-theme="dark"] .brand__img--dark{display:block}
:root[data-theme="light"] .brand__img--light{display:block}
:root[data-theme="light"] .brand__img--dark{display:none}

.sitenav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Not .sitenav a: that outranks .btn on specificity, so the Start button in
   the header was taking this rule's muted grey and mono 10.5px instead of
   anything .btn--accent said. Grey on the accent fill measures 1.55:1. Three
   rounds of raising the button's own contrast changed nothing, because none
   of it was ever reaching this element. */
.sitenav a:not(.btn){
  font-family:var(--mono);text-transform:uppercase;font-size:10.5px;
  letter-spacing:.1em;color:var(--muted);
}
.sitenav a:not(.btn):hover{color:var(--ink);text-decoration:none}
.sitenav a:not(.btn)[aria-current="page"]{color:var(--ink)}
.sitenav form{display:inline}
@media (max-width:560px){
  .sitenav{gap:12px}
  .sitenav .is-secondary{display:none}   /* keep log in + start reachable */
}

.sitefoot{
  border-top:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-size:13.5px;
}
.sitefoot__in{max-width:1120px;margin:0 auto;padding:30px 22px 46px;display:flex;flex-direction:column;gap:14px}
.sitefoot a:not(.btn){color:var(--ink-2)}
.sitefoot__top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap}
.sitefoot__disclaimer{max-width:64ch;margin:0}
.sitefoot__legal{display:flex;gap:16px;flex-wrap:wrap}
.sitefoot__mark{height:26px;width:auto;opacity:.9}

/* ------------------------------------------------------------ panels --- */

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.panel--pad{padding:26px 26px 28px}
.panel--split{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.panel--center{text-align:center}
.panel--tint{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.panel--lift{box-shadow:var(--shadow)}

/* ------------------------------------------------------------ meters --- */

.meters{display:flex;flex-wrap:wrap;gap:10px}
.meter{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:11px 15px 9px;
  min-width:104px;
  flex:0 1 auto;
}
.meter__n{
  font-family:var(--mono);font-weight:500;font-size:23px;line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);display:block;
}
.meter__label{display:block;color:var(--muted);margin-top:3px}
.meter--accent .meter__n{color:var(--accent)}
.meter--good .meter__n{color:var(--good)}

/* ------------------------------------------------------------- chips --- */

.chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.chips__label{
  font-family:var(--mono);text-transform:uppercase;font-size:10.5px;
  letter-spacing:.1em;color:var(--muted);margin-right:4px;
}
.chip{
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--ink-2);
  border-radius:999px;              /* the one exception to the 3px rule */
  padding:6px 12px;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  line-height:1;
}
.chip:hover{border-color:var(--ink-2)}
.chip b{font-weight:500;color:var(--muted)}
.chip[aria-pressed="true"]{
  background:var(--ink);            /* the only reversed-ink element */
  border-color:var(--ink);
  color:var(--surface);
}
.chip[aria-pressed="true"] b{color:var(--surface);opacity:.7}
.chip[data-zero="1"]{opacity:.5}    /* still clickable */

/* ----------------------------------------------------------- buttons --- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--ink);
  background:var(--ink);color:var(--surface);
  border-radius:var(--radius);
  padding:9px 14px;
  cursor:pointer;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{text-decoration:none;opacity:.88}
.btn--ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink-2);color:var(--ink);opacity:1}
/* The accent button carries its own blues rather than the palette's.
   --brand-blue and --accent are tuned to read AS text and borders against the
   page; here they are the ground that white 11px uppercase type sits on, which
   is the opposite problem. On the palette blues white measured 5.44:1 at the
   light end of the gradient -- past AA, but thin at this size, and it was the
   first thing anyone said about the page. These stops hold 7.4:1 and 10.0:1. */
.btn--accent{
  background:linear-gradient(135deg,#0A54E0,#0A4BC6);
  border-color:transparent;color:#fff;
  box-shadow:0 1px 2px rgba(10,75,198,.22);
}
.btn--accent:hover{opacity:1;transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn--accent:active{transform:none}
/* Same reasoning, same measurement: white on --good was 5.80:1, this is 7.5:1. */
.btn--teal{background:#0A5F57;border-color:#0A5F57;color:#fff}
.btn--block{width:100%}
/* Buttons leave the mono label treatment entirely.
   Raising the contrast to 7.4:1 did not fix the legibility complaint, and
   neither did going from 10.5px to 12px, because the problem was never the
   ratio or the size on its own: it was condensed uppercase monospace with
   wide letter-spacing, reversed out of a saturated fill. That styling is
   right for an eyebrow or a tag, which are glanced at. A button is read.
   So buttons take the sans face at a readable size, in sentence case, with
   no tracking. Tags, eyebrows, meters and labels keep the mono look. */
.btn{
  font-family:var(--sans);
  text-transform:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  padding:10px 16px;
}
.btn--lg{padding:14px 22px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn--accent:hover{transform:none} }

/* Dark mode reverses the ink rather than the fill: white on a blue light
   enough to read against a dark ground is 2.4:1, near-black on it is 7.8:1.
   The fill lightens too, because the dark stop that works under white text is
   far too dark under near-black ink. Both stops clear 7:1 against #0B1220. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn--accent{
    background:linear-gradient(135deg,#689EFF,#9CBEFF);
    color:#0B1220;box-shadow:none;
  }
  :root:not([data-theme="light"]) .btn--teal{background:#3FC9B9;border-color:#3FC9B9;color:#06201D}
}
:root[data-theme="dark"] .btn--accent{
  background:linear-gradient(135deg,#689EFF,#9CBEFF);
  color:#0B1220;box-shadow:none;
}
:root[data-theme="dark"] .btn--teal{background:#3FC9B9;border-color:#3FC9B9;color:#06201D}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions--top{margin-top:6px}

/* ------------------------------------------------------------- forms --- */

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field__label{color:var(--muted)}
.field__hint{font-size:13px;color:var(--muted);font-family:var(--sans);text-transform:none;letter-spacing:0}
.input,.textarea,.select{
  font-family:var(--sans);font-size:15px;line-height:1.45;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:9px 11px;
  width:100%;
}
.textarea{resize:vertical;min-height:96px}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);outline:none;box-shadow:var(--ring)}
.checkline{display:flex;gap:9px;align-items:flex-start;margin-bottom:14px}
.checkline input{margin-top:3px;accent-color:var(--accent)}
.checkline label{font-size:14px;color:var(--ink-2)}

.error{color:#B3261E;font-size:13px;margin-top:4px}
:root[data-theme="dark"] .error,
:root:not([data-theme="light"]) .error{color:#F2B8B5}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .error{color:#B3261E}}

/* ------------------------------------------------------------ notice --- */

.notice{
  border:1px solid var(--line);
  border-left:3px solid var(--muted);
  border-radius:var(--radius);
  background:var(--surface-2);
  padding:12px 15px;
  font-size:14px;
  color:var(--ink-2);
}
.notice--signal{border-left-color:var(--signal);background:var(--signal-soft);color:var(--signal)}
.notice--good{border-left-color:var(--good);background:var(--good-soft);color:var(--good)}
.notice--accent{border-left-color:var(--accent);background:var(--accent-soft);color:var(--ink-2)}
.notice--flush{margin:0}

/* -------------------------------------------------------------- prose -- */
/* Legal pages and the crawler page are long documents. They get one class on
   the container instead of a style attribute on every heading. */

.prose{max-width:74ch}
.prose h2{font-size:19px;margin:22px 0 8px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:15px;margin:18px 0 4px}
.prose p{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.prose ul,.prose ol{font-size:14.5px;line-height:1.65;color:var(--ink-2);padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:5px}
.prose code,.prose .code{
  font-family:var(--mono);font-size:12.5px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
}
.prose .code{display:block;padding:12px 14px;overflow-x:auto;margin:8px 0;white-space:pre-wrap}
.prose code{padding:1px 4px}

/* ------------------------------------------------------------- misc ---- */

.lede{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.lede--top{margin-top:10px}
.muted{color:var(--muted)}
.smallprint{font-size:13.5px;color:var(--muted);margin:0}
.smallprint--center{text-align:center}
.smallprint--top{margin-top:12px}
.note-14{font-size:14px;color:var(--ink-2);margin:0}
.measure-46{max-width:46ch}
.measure-52{max-width:52ch}
.measure-66{max-width:66ch}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:14px}
.stack--sm{gap:8px}
.stack--xs{gap:2px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-2);border-radius:999px;
  padding:5px 11px;line-height:1;color:var(--ink-2);background:var(--surface);
}
.pill--good{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.pill--accent{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ------------------------------------------------------- small helpers --- */
/* These exist because the CSP forbids style attributes, so the handful of
   one-off spacings a page genuinely needs have to be named. Keep the list
   short: if something here is used more than a few times it wants a real
   component class instead. */

.mt-10{margin-top:10px} .mt-14{margin-top:14px} .mt-16{margin-top:16px}
.mb-8{margin-bottom:8px} .mb-10{margin-bottom:10px} .mb-22{margin-bottom:22px}
.note-15{font-size:15px;color:var(--ink-2);margin:0 0 1em}
.note-15--flush{margin:0}
.strongline{font-size:15px;margin-bottom:4px}
.list-14{font-size:14.5px;line-height:1.6;color:var(--ink-2);padding-left:20px;margin:0 0 20px}
.page-head .eyebrow{margin-bottom:0}

/* A "more detail (optional)" disclosure inside a form. */
.disclosure{margin:6px 0 20px}
.disclosure>summary{cursor:pointer;color:var(--muted)}
.disclosure__body{padding-top:16px}

/* Destructive controls carry the signal colour, never accent. */
.btn--danger{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--danger:hover{opacity:.88}
.btn--warn{border-color:var(--signal);color:var(--signal);background:transparent}
.btn--warn:hover{border-color:var(--signal);color:var(--signal);opacity:.85}

.setup-message{font-size:15px;color:var(--ink-2)}
.setup-message--flush{margin:0}
.facts--mb{margin-bottom:10px}

@media (max-width:640px){
  .wrap{padding:26px 16px 60px;gap:26px}
  .sitehead__in{padding:10px 16px}
  .brand__img{height:26px}
  .meter{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .page-head h1{font-size:26px}
  .section__head h2{font-size:22px}
}