/* THE JOB BOARD'S STYLESHEET — ONE FILE, LOADED BY EVERY BOARD.
 *
 * Shane, 2026-09-04: *"format for both should be identical."* Two pages render this board — the RSPA
 * member board at /labs/rspa-careers/ and every show's who-is-hiring page — and before this file
 * existed each carried its own copy of these rules. A rule set copied is a rule set that drifts, which
 * is the exact complaint that produced the port in the first place.
 *
 * SCOPED TO #board, because only one of the two pages owns its whole document. The show careers page
 * sits under the ExpoAmp header and the show's nav strip, both styled by /assets/site.css; unscoped,
 * this file's :root silently redefined --navy, --ink and --line for that header too. Both pages now
 * wrap the board in <div id="board">, so the scoping costs the standalone page nothing and buys the
 * embedded one its chrome back.
 *
 * The one rule here that is NOT from the original prototype is `#board .hero h1{color:#fff}`. The
 * prototype's body inherited from .hero; under site.css, `h1{color:var(--ink)}` is a type selector a
 * class rule does not outrank, and the headline rendered navy on navy.
 */

#board{--navy:#0d3f76;--blue:#0966b3;--sky:#22b2e7;--ink:#172638;--muted:#5b6d7f;--line:#dbe5ee;--wash:#f4f8fb;--white:#fff;--green:#58d59c;box-sizing:border-box}
#board *{box-sizing:border-box}
#board .shell{width:min(1160px,calc(100% - 40px));margin:0 auto}
#board .hero{color:#fff;background:linear-gradient(120deg,#0b386a 0%,#0c5593 68%,#0871ad 100%);position:relative;overflow:hidden}
#board .hero:after{content:"";position:absolute;width:420px;height:420px;right:-100px;top:-220px;border:70px solid rgba(255,255,255,.06);border-radius:50%}
#board .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.55fr .7fr;align-items:end;gap:70px;padding:76px 0 90px}
#board .eyebrow{margin:0 0 14px;font-size:12px;font-weight:850;letter-spacing:.12em;color:#7dd5f4}
/* Colour added, and it is the price of scoping. The reference is a standalone document whose
   body inherits from .hero; ours sits under /assets/site.css, which sets h1 to var(--ink) — a
   type selector that our .hero white does not outrank, so the headline rendered navy on navy
   and was all but unreadable. */
#board .hero h1{color:#fff;max-width:790px;margin:0;font-size:clamp(38px,5.4vw,66px);line-height:1.02;letter-spacing:-.047em}
#board .hero-copy{max-width:740px;margin:24px 0 0;font-size:19px;line-height:1.55;color:#dbeefd}
#board .proof-card{display:flex;gap:12px;align-items:flex-start;padding:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:12px}
#board .status-dot{flex:0 0 auto;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(88,213,156,.15)}
#board .proof-card strong{font-size:14px}
#board .proof-card p{margin:7px 0 0;color:#d9ebf7;font-size:13px;line-height:1.45}
#board .search-wrap{background:var(--wash);padding-bottom:72px}
#board .search-panel{position:relative;transform:translateY(-38px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 18px 45px rgba(18,58,99,.12)}
#board label span{display:block;margin-bottom:8px;font-size:12px;font-weight:750;color:#40576e}
#board input, #board select{width:100%;height:48px;border:1px solid #c9d7e3;border-radius:8px;background:#fff;color:var(--ink);font:inherit;padding:0 14px;outline:none}
#board input:focus, #board select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(9,102,179,.12)}
#board .search-field input{height:56px;font-size:16px}
#board .filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
#board .results-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:-4px 0 18px}
#board .results-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
#board .results-head .results-count{margin:0;color:var(--navy);font-size:21px;font-weight:780}
#board .clear-button{border:0;background:transparent;color:var(--blue);font:inherit;font-weight:750;cursor:pointer}
#board .job-list{display:grid;gap:12px}
#board .job-card{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;transition:.18s ease}
#board .job-card:hover{transform:translateY(-2px);border-color:#b7cfe2;box-shadow:0 10px 25px rgba(18,58,99,.08)}
#board .company-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:#e8f2f9;color:var(--navy);font-weight:850}
#board .company-name{margin:0 0 5px;color:var(--blue);font-size:13px;font-weight:750}
#board .job-main h2{margin:0;color:var(--ink);font-size:19px;line-height:1.25;letter-spacing:-.015em}
#board .job-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:11px;color:var(--muted);font-size:13px}
#board .job-meta span+span:before{content:"•";margin-right:18px;color:#9badbc}
#board .apply-button{align-self:center;min-width:126px;text-align:center;border-radius:8px;padding:12px 15px;text-decoration:none;color:#fff;background:var(--blue);font-size:13px;font-weight:750}
#board .apply-button:hover{background:var(--navy)}
#board .empty-state{padding:60px 24px;text-align:center;background:#fff;border:1px dashed #bccbd7;border-radius:10px}
#board .empty-state h2{margin:0 0 8px}
#board .empty-state p{color:var(--muted)}
#board .empty-state button{border:0;border-radius:7px;padding:11px 16px;color:#fff;background:var(--blue);cursor:pointer}
#board .about{padding:76px 0;background:#fff}
#board .about .eyebrow{color:var(--blue)}
#board .about-grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:90px}
#board .about h2{margin:0;color:var(--navy);font-size:38px;line-height:1.12;letter-spacing:-.035em}
#board .confidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px}
#board .confidence-grid div{border-top:3px solid var(--sky);padding-top:15px}
#board .confidence-grid strong{color:var(--navy);font-size:16px}
#board .confidence-grid p{margin:8px 0 0;color:var(--muted);line-height:1.55;font-size:14px}
#board footer{padding:34px 0;color:#dbe9f5;background:#082d55}
#board .footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
#board .footer-row strong{color:#fff}
#board .footer-row p{margin:5px 0 0;font-size:12px}
#board .footer-row a{color:#fff;font-size:13px;font-weight:750}
#board .footer-links{display:flex;align-items:flex-end;gap:8px;flex-direction:column}
#board .footer-links span{font-size:11px;color:#9fb9d0}
#board .footer-links span a{font-size:11px;color:#cfe8fa}
@media(max-width:800px){#board .hero-grid, #board .about-grid{grid-template-columns:1fr;gap:34px}
#board .hero-grid{padding:58px 0 76px}
#board .proof-card{max-width:430px}
/* (the ported one-column rule for this width was here; the auto-fitting grid below supersedes it,
 * because the number of filters is now decided by the data rather than fixed at three) */
#board .job-card{grid-template-columns:44px 1fr}
#board .company-avatar{width:44px;height:44px}
#board .apply-button{grid-column:1/-1}
#board .confidence-grid{grid-template-columns:1fr}}
@media(max-width:520px){#board .shell{width:min(100% - 24px,1160px)}
#board .hero h1{font-size:39px}
#board .search-panel{padding:18px}
#board .job-card{padding:18px}
#board .job-meta span{width:100%}
#board .job-meta span+span:before{display:none}
#board .results-head{align-items:flex-start}}

/* ─── THE FILTER ROW, 2026-09-04 ────────────────────────────────────────────────────────────────
 *
 * Shane, with ZipRecruiter's panel on screen: *"just show the filter, allow multi selectors on the
 * drop downs, include Remote as a location and then provide a filter button that allows the user to
 * filter as they see fit. This is a proven model I would assume."*
 *
 * So the controls are dropdown BUTTONS with checkbox panels rather than native selects: a native
 * select cannot hold a multi-select without becoming the scrolling list box nobody has used on
 * purpose since 2003, and it cannot hold the group headings that let Remote and the countries share
 * one Location control. Everything below is the mechanics of that, in the reference board's colours.
 */
#board .filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#board .filter-menu{position:relative}
#board .menu-button{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:1px solid #c9d7e3;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
#board .menu-button:hover{border-color:#9dbdd6}
#board .menu-button[aria-expanded="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(9,102,179,.12)}
#board .menu-button[data-chosen="yes"]{border-color:var(--navy);background:#eef5fb}
/* An explicit display rule beats the browser's [hidden] one, so the badge needs its own — it was
 * rendering a literal "0" on every unused control. */
#board .menu-count[hidden]{display:none}
#board .menu-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;font-size:11px;font-weight:800}
#board .menu-caret{width:0;height:0;border:5px solid transparent;border-top-color:#5b7d97;margin-top:4px}
#board .menu-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:250px;max-height:340px;overflow:auto;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 45px rgba(18,58,99,.18)}
#board .menu-heading{margin:10px 8px 6px;color:#40576e;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
#board .menu-heading:first-child{margin-top:4px}
#board .menu-option{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px;cursor:pointer;font-size:14px}
#board .menu-option:hover{background:var(--wash)}
#board .menu-option input{width:17px;height:17px;flex:0 0 auto;margin:0;accent-color:var(--blue);cursor:pointer}
#board .menu-option span{display:inline;margin:0;font-size:14px;font-weight:600;color:var(--ink)}
/* The apply button is the point of the panel, so it reads as the point of the panel. */
#board .panel-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
#board .reset-button{border:0;background:transparent;color:var(--blue);font:inherit;font-weight:750;cursor:pointer;padding:12px 4px}
#board .apply-filters{border:0;border-radius:9px;padding:14px 28px;background:var(--blue);color:#fff;font:inherit;font-size:15px;font-weight:780;cursor:pointer}
#board .apply-filters:hover{background:var(--navy)}
#board .apply-filters:disabled{background:#a9bfd0;cursor:not-allowed}
/* An applied filter is a removable chip, the way every board does it — a control scrolled off the top
 * of a phone is a filter the reader has forgotten they set, and the short list they then read as
 * "nobody is hiring". */
#board .active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
#board .chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #c4d7e6;border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-size:12px;font-weight:750;padding:6px 12px;cursor:pointer}
#board .chip:hover{border-color:var(--blue);color:var(--blue)}
#board .chip b{font-weight:750}
#board .chip i{font-style:normal;color:#8aa2b6;font-size:14px;line-height:1}
#board .set-aside{margin:14px 0 0;color:var(--muted);font-size:13px}
#board .more-row{margin-top:16px;text-align:center}
#board .more-button{border:1px solid #c4d7e6;border-radius:8px;background:#fff;color:var(--blue);font:inherit;font-weight:750;padding:12px 22px;cursor:pointer}
#board .more-button:hover{border-color:var(--blue);background:#f2f8fd}
/* The board opens on the FILTER, so the results head only exists once something has been applied. */
#board .results-head[hidden]{display:none}
@media(max-width:520px){
  #board .filter-row{gap:8px}
  #board .menu-button{height:40px;padding:0 13px;font-size:13px}
  #board .menu-panel{min-width:min(280px,calc(100vw - 60px))}
  #board .panel-actions{flex-direction:column-reverse;align-items:stretch}
  #board .apply-filters{width:100%}
}

/* ─── THE OVERVIEW, 2026-09-04 ──────────────────────────────────────────────────────────────────
 *
 * Shane: *"I like the streamlined look of just the filters, but perhaps a high level overview of
 * what's inside that makes our search legit for someone who just lands the first time."* A panel of
 * empty controls is clean and is also indistinguishable from a board with nothing on it. This says
 * what the board holds before it asks anything, and the category counts are a one-click way in. */
#board .board-overview{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
#board .ov-label{margin:0 0 12px;color:#40576e;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
#board .ov-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 26px}
#board .ov-figures div{display:flex;flex-direction:column;gap:2px}
#board .ov-figures b{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--navy)}
#board .ov-figures span{color:var(--muted);font-size:13px;line-height:1.35}
#board .ov-cats{margin-top:22px}
#board .ov-chips{display:flex;flex-wrap:wrap;gap:8px}
#board .ov-chip{display:inline-flex;align-items:baseline;gap:8px;border:1px solid #c9d7e3;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:700;padding:8px 15px;cursor:pointer}
#board .ov-chip:hover{border-color:var(--blue);color:var(--blue);background:#f4f9fd}
#board .ov-chip em{font-style:normal;font-weight:800;font-size:12px;color:var(--blue)}
#board .ov-chip:hover em{color:var(--navy)}
@media(max-width:520px){
  #board .ov-figures{grid-template-columns:1fr 1fr;gap:12px 16px}
  #board .ov-figures b{font-size:24px}
}

/* THE TEMPLATE RULE, in CSS: a control or figure with nothing behind it keeps its place and reads as
 * unavailable rather than vanishing. Shane, with two boards side by side: *"put this thing in a damn
 * template format like I asked so each user experience is identical."* */
#board .menu-button:disabled{opacity:.45;cursor:default;background:var(--wash)}
#board .menu-button:disabled:hover{border-color:#c9d7e3}
#board .menu-button:disabled .menu-caret{opacity:.4}
#board .ov-figures .ov-unknown b{color:#9badbc}
#board .ov-none{color:var(--muted);font-size:13px}

/* ─── "HIRING AND NOT LISTED?" ──────────────────────────────────────────────────────────────────
 *
 * Shane, 2026-09-04: *"Probably a spot to add a listing."* Below the roles, because it is what you
 * reach for after failing to find yourself on the board — and on EVERY board, because the template
 * rule has no exceptions. */
#board .listing-ask{margin-top:44px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:14px}
#board .listing-copy h2{margin:0 0 8px;color:var(--navy);font-size:22px;letter-spacing:-.02em}
#board .listing-copy p{margin:0 0 22px;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:70ch}
#board .listing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
#board .listing-grid label span i{font-style:normal;font-weight:600;color:#8aa2b6;text-transform:none;letter-spacing:0}
#board .listing-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
/* THE "STOP LISTING US" TOGGLE IS A CHECKBOX BESIDE A SENTENCE, not a stacked field. Two rules above
 * are written for the four text inputs and are wrong for this one: `#board input` gives every input a
 * 48px full-width box, and `#board label span` makes every span a field caption on its own line. The
 * filter menus already carry the same correction (`.menu-option input`); this form never got it, so
 * the checkbox rendered as a large empty square with its sentence stranded underneath. */
#board .listing-actions .toggle{display:flex;align-items:center;gap:10px;cursor:pointer}
#board .listing-actions .toggle input{width:17px;height:17px;flex:0 0 auto;margin:0;accent-color:var(--blue);cursor:pointer}
#board .listing-actions .toggle span{display:inline;margin:0;font-size:13.5px;font-weight:600;color:var(--muted)}
#board .listing-note{margin:14px 0 0;color:var(--muted);font-size:13px}
#board .listing-note[data-tone="good"]{color:var(--live,#0b7a55);font-weight:700}
#board .listing-note[data-tone="bad"]{color:#b02f55;font-weight:700}
/* The honeypot is invisible to people and present to bots. Not `display:none` — the naive ones skip
 * that — but off-screen and untabbable. */
#board .listing-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:520px){
  #board .listing-ask{padding:20px}
  #board .listing-actions{flex-direction:column;align-items:stretch}
  #board .listing-actions .apply-filters{width:100%}
}

/* ─── THE FLOOR IN WORDS ────────────────────────────────────────────────────────────────────────
 *
 * The summary below the board: which companies are hiring, in what functions, where. It is the
 * page's only server-rendered content and the answer to the query somebody typed — so it is styled
 * to be READ, not skimmed past as a footer. */
#board .floor-summary{padding:64px 0;background:var(--wash);border-top:1px solid var(--line)}
#board .floor-summary h2{margin:0 0 14px;color:var(--navy);font-size:30px;line-height:1.15;letter-spacing:-.03em;max-width:24ch}
#board .summary-lede{margin:0 0 18px;font-size:17px;line-height:1.55;color:var(--ink);max-width:76ch}
#board .floor-summary p{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:88ch}
#board .floor-summary p b{color:var(--ink);font-weight:750}
#board .summary-employers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 28px;margin:22px 0 0;padding:0;list-style:none}
#board .summary-employers li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
#board .summary-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* The three roles named under each employer. Muted and small: the employer name is the link, this is
 * the evidence behind it. `max-width:none` because the surrounding paragraph rule caps at 88ch and
 * these sit inside a column that is already narrower than that. */
#board .summary-roles{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5;max-width:none}
#board .summary-employers a{color:var(--blue);font-weight:700;text-decoration:none}
#board .summary-employers a:hover{color:var(--navy);text-decoration:underline}
#board .summary-employers span{color:var(--muted);font-size:13px;white-space:nowrap}
@media(max-width:520px){#board .floor-summary{padding:40px 0}#board .floor-summary h2{font-size:24px}}

/* The role count beside a filter option. Shane, 2026-09-11: *"list the states that are hiring along
   with the number of jobs in each state."* Muted and right-aligned, so the option name still reads as
   the thing you click and the number answers "is this worth ticking" without competing with it. */
#board .menu-option { display: flex; align-items: center; gap: 8px; }
#board .menu-option > span { flex: 1 1 auto; }
#board .menu-count-n { flex: 0 0 auto; font-style: normal; font-variant-numeric: tabular-nums; font-size: 12px; color: #64748b; }
/* An option that no longer reaches any role given the other filters (a faceted count of 0) is dimmed
 * but stays tickable — a reader may widen those other filters next. See `refreshFacets`. */
#board .menu-option[data-empty="yes"] { opacity: .45; }