/* -----------------------------------------------------------------------
   Home dashboard — crawl_page::get_home_findings_view().

   Per KB #80 this lives in /css-custom/ and is linked from the home branch
   of logic/crawl_pages/crawl_pages_logic.php. It used to be a ~100 line
   <style> block emitted from the class, which is the thing the convention
   exists to stop.

   Linked on the ROOT URL ONLY. The .cwd-* prefix is shared with the styles
   emitted by get_vacancies_page_view(), news_card_styles() and
   get_vacancy_view(), each of which carries its own copy — so this file must
   never load on those pages, and nothing here may be relied on by them.

   Everything is namespaced under .cwd-findings so it cannot reach Semantic UI.
   ----------------------------------------------------------------------- */

@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/space-grotesk-700.woff2') format('woff2'); }

.cwd-findings {
	--cwd-ink:#11131a; --cwd-ink-soft:#33373f; --cwd-muted:#5b5f69; --cwd-card:#fff;
	--cwd-line:#e3e2da; --cwd-line-strong:#cfcdc2; --cwd-blue:#1450c8; --cwd-blue-ink:#0f3a93;
	--cwd-live:#0e8f5e; --cwd-live-bright:#34d399; --cwd-track:#e6e4da;
	--cwd-sans:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
	--cwd-display:'Space Grotesk',var(--cwd-sans);
	--cwd-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
	font-family:var(--cwd-sans); color:var(--cwd-ink); text-align:left;
}
.cwd-findings * { box-sizing:border-box; }
.cwd-findings a { text-decoration:none; }
.cwd-inner { max-width:1140px; margin:2.5em auto 0; padding:0 1.5em; }

/* The page's subject line — and the page's only <h1>, since the hero's
   wordmark is a div. Sizes carried over from r4989, where this was an <h2>.
   The gap below it is 46px, not the 26px it inherited: every other block on
   this page is separated by 46px (.cwd-section), so 26px against a heavy dark
   strip read as the strapline colliding with it. */
/* MASTHEAD — intro on the left, alert sign-up in the space to its right.
   The 46px gap that used to sit on .cwd-intro moves to the row, so the two
   columns share one baseline gap to the first section below. */
.cwd-masthead { display:flex; align-items:flex-start; justify-content:space-between; gap:2.5em; margin-bottom:46px; }
.cwd-masthead .cwd-intro { margin-bottom:0; flex:1 1 auto; }
.cwd-signup { flex:0 0 auto; width:320px; max-width:100%; padding-top:4px; }
.cwd-signup label { display:block; font-family:var(--cwd-display); font-weight:600; font-size:15px; line-height:1.3; color:var(--cwd-ink); margin:0 0 10px; }
.cwd-signup-row { display:flex; gap:8px; }
.cwd-signup-row input[type="email"] { flex:1 1 auto; min-width:0; font-family:var(--cwd-sans); font-size:15px; color:var(--cwd-ink); background:var(--cwd-card); border:1px solid var(--cwd-line-strong); border-radius:6px; padding:9px 11px; }
.cwd-signup-row input[type="email"]:focus { outline:none; border-color:var(--cwd-blue); box-shadow:0 0 0 3px rgba(20,80,200,0.13); }
/* .ui.button is on the control so form-nd.js can put its loading state there,
   which means Semantic UI's grey outranks a bare element selector — these
   need the class in the selector to win. */
.cwd-signup-row button.ui.button { flex:0 0 auto; font-family:var(--cwd-sans); font-size:15px; font-weight:600; color:#fff; background:var(--cwd-blue); border:1px solid var(--cwd-blue); border-radius:6px; padding:9px 16px; margin:0; cursor:pointer; }
.cwd-signup-row button.ui.button:hover, .cwd-signup-row button.ui.button:focus { background:var(--cwd-blue-ink); border-color:var(--cwd-blue-ink); color:#fff; }
.cwd-signup-msg { font-size:15px; line-height:1.5; color:var(--cwd-muted); margin:0; padding:11px 13px; border:1px solid var(--cwd-line); border-radius:6px; background:var(--cwd-card); }
.cwd-signup-msg.is-ok { color:var(--cwd-ink); border-color:var(--cwd-live); }

/* Below the two-column width the sign-up drops under the strapline rather
   than squeezing the h1 into a column. */
@media (max-width:820px) {
	.cwd-masthead { flex-direction:column; gap:1.75em; }
	.cwd-signup { width:100%; padding-top:0; }
}
.cwd-intro h1 { font-family:var(--cwd-display); font-weight:700; font-size:30px; letter-spacing:-0.02em; line-height:1.1; margin:0 0 10px; color:var(--cwd-ink); text-wrap:balance; }
.cwd-intro p { font-size:15.5px; line-height:1.55; color:var(--cwd-muted); margin:0; max-width:640px; }
@media (max-width:600px) { .cwd-intro h1 { font-size:24px; } }

/* ---------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------- */
.cwd-section { margin-top:46px; }
.cwd-head { display:flex; align-items:center; gap:9px; padding-bottom:11px; border-bottom:1px solid var(--cwd-line-strong); }
.cwd-head .cwd-ico { color:var(--cwd-ink); display:grid; place-items:center; }
.cwd-head .cwd-ico svg { width:1em; height:1em; font-size:22px; display:block; }
/* Section headings are h2: peers of each other, under the page h1. They were
   h3, which made every section read as a subsection of nothing.
   22px, not the 15px they carried as h3 — promoting the tag without promoting
   the type left them looking demoted next to a 30px h1. The icon is in em so
   it scales with the heading rather than staying pinned at 16px. */
.cwd-head h2 { font-family:var(--cwd-display); font-weight:700; font-size:22px; letter-spacing:-0.015em; margin:0; color:var(--cwd-ink); }
/* The count is a COUNT now, not the way out. The exit is .cwd-out below —
   the route out of a section used to be the least visible thing in it. */
.cwd-head .cwd-count { font-family:var(--cwd-mono); font-size:11px; color:var(--cwd-muted); margin-left:auto; font-variant-numeric:tabular-nums; }
.cwd-out { margin-top:17px; padding-top:14px; border-top:1px solid var(--cwd-line); display:flex; }
.cwd-outbtn { font-family:var(--cwd-display); font-weight:600; font-size:13px; color:var(--cwd-blue-ink); border:1px solid var(--cwd-line-strong); border-radius:8px; padding:9px 15px; display:inline-flex; align-items:center; gap:8px; background:#fff; }
.cwd-outbtn:hover { border-color:var(--cwd-blue); background:#f7f9fe; }
.cwd-outbtn:focus-visible { outline:2px solid var(--cwd-blue); outline-offset:2px; }

/* ---- employer cards: four per row. The tech_stack and built-by tags moved
       to the band at the foot, which is what buys the width. ---- */
.cwd-empgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:17px; }
.cwd-empcard { display:flex; flex-direction:column; gap:9px; padding:16px 16px 14px; background:var(--cwd-card); border:1px solid var(--cwd-line); border-radius:13px; box-shadow:0 1px 2px rgba(17,19,26,0.05); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cwd-empcard:hover { border-color:var(--cwd-ink); box-shadow:0 8px 22px -10px rgba(17,19,26,0.30); transform:translateY(-2px); }
.cwd-empcard:focus-visible { outline:2px solid var(--cwd-blue); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .cwd-empcard:hover { transform:none; } }
.cwd-emphead { display:flex; align-items:center; gap:10px; }
.cwd-emplogo { width:30px; height:30px; flex:none; border-radius:7px; object-fit:contain; background:#fff; border:1px solid var(--cwd-line); padding:3px; }
.cwd-emplogo-ph { display:grid; place-items:center; font-family:var(--cwd-display); font-weight:700; font-size:14px; color:var(--cwd-muted); background:var(--cwd-track); padding:0; border-color:var(--cwd-track); }
.cwd-empname { font-family:var(--cwd-display); font-weight:700; font-size:15px; letter-spacing:-0.01em; color:var(--cwd-ink); line-height:1.25; }
.cwd-empcard:hover .cwd-empname { color:var(--cwd-blue-ink); }
.cwd-empmeta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:auto; }
.cwd-empcb { font-family:var(--cwd-mono); font-size:10.5px; font-weight:600; letter-spacing:0.02em; padding:3px 8px; border-radius:6px; background:#eaf7f0; color:var(--cwd-live); }
.cwd-emppark { font-size:11px; font-weight:600; padding:3px 8px 3px 7px; border-radius:6px; background:#eaf0fb; color:var(--cwd-blue-ink); display:inline-flex; align-items:center; gap:4px; }
.cwd-emppark::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--cwd-blue); }
.cwd-emphire { font-family:var(--cwd-display); font-weight:600; font-size:12.5px; color:var(--cwd-blue-ink); display:flex; align-items:center; gap:6px; }
.cwd-emphire .cwd-rolen { font-family:var(--cwd-mono); font-variant-numeric:tabular-nums; }

/* ---- vacancies: full width in two columns, so the list can run to 8 rows.
       The old 3-row cap was a consequence of sitting in a third of a column. ---- */
.cwd-vac { display:grid; grid-template-columns:repeat(2,1fr); gap:0 34px; margin-top:17px; }
.cwd-row { display:block; padding:13px 0; border-bottom:1px solid var(--cwd-line); }
.cwd-row .cwd-title { font-family:var(--cwd-display); font-weight:600; font-size:14.5px; line-height:1.3; color:var(--cwd-ink); }
.cwd-row .cwd-title a { color:inherit; }
.cwd-row .cwd-title a:hover { color:var(--cwd-blue-ink); text-decoration:underline; }
.cwd-row .cwd-meta { margin-top:6px; font-size:12.5px; color:var(--cwd-muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cwd-row .cwd-meta .cwd-emp { color:var(--cwd-blue-ink); font-weight:600; }
.cwd-row .cwd-meta .cwd-emp:hover { text-decoration:underline; }
.cwd-row .cwd-meta .cwd-sep { color:var(--cwd-line-strong); }
.cwd-ats { font-family:var(--cwd-mono); font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--cwd-line-strong); border-radius:5px; color:var(--cwd-ink-soft); }

/* ---- news ---- */
.cwd-newsgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:17px; }
.cwd-news { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:var(--cwd-card); border:1px solid var(--cwd-line); border-radius:12px; box-shadow:0 1px 2px rgba(17,19,26,0.05); transition:border-color .15s ease, box-shadow .15s ease; }
.cwd-news:hover { border-color:var(--cwd-ink); box-shadow:0 6px 18px -8px rgba(17,19,26,0.28); }
.cwd-newsthumb { width:54px; height:54px; flex:none; border-radius:8px; object-fit:cover; background:var(--cwd-track); border:1px solid var(--cwd-line); }
.cwd-newsname { font-family:var(--cwd-display); font-weight:600; font-size:14.5px; line-height:1.3; color:var(--cwd-ink); display:block; }
.cwd-news:hover .cwd-newsname { color:var(--cwd-blue-ink); }
.cwd-newsmeta { margin-top:5px; font-size:12.5px; color:var(--cwd-muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cwd-newssrc { font-family:var(--cwd-mono); font-size:10px; letter-spacing:0.03em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--cwd-line-strong); border-radius:5px; color:var(--cwd-ink-soft); }

/* ---------------------------------------------------------------
   THE BAND — agencies, frameworks and the crawler totals together
   on the warm ground. Secondary by treatment, not by hiding.
   --------------------------------------------------------------- */
.cwd-band { margin-top:58px; background:var(--cwd-track); border-top:1px solid var(--cwd-line-strong); }
.cwd-bandin { max-width:1140px; margin:0 auto; padding:34px 1.5em 36px; }
.cwd-bandgrid { display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start; }
.cwd-band .cwd-section { margin-top:0; }
.cwd-band .cwd-head { border-bottom-color:#d3d0c4; }
.cwd-band .cwd-out { border-top-color:#d3d0c4; }
.cwd-band .cwd-outbtn { background:transparent; border-color:#cbc8bb; }
.cwd-band .cwd-outbtn:hover { background:#fff; border-color:var(--cwd-blue); }

.cwd-tech { display:flex; flex-direction:column; gap:11px; margin-top:17px; }
.cwd-bar { display:grid; grid-template-columns:108px 1fr 34px; align-items:center; gap:10px; }
.cwd-bar .cwd-lab { display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:12.5px; font-weight:500; color:var(--cwd-ink); white-space:nowrap; }
.cwd-bar .cwd-lab:hover span { text-decoration:underline; }
.cwd-bar .cwd-techlogo { width:15px; height:15px; flex:none; display:block; }
.cwd-track { height:10px; background:#d8d5c8; border-radius:6px; overflow:hidden; }
.cwd-fill { height:100%; background:var(--cwd-blue); border-radius:6px; display:block; }
.cwd-bar:first-child .cwd-fill { background:var(--cwd-ink); }
.cwd-bar .cwd-val { font-family:var(--cwd-mono); font-size:12px; color:var(--cwd-ink-soft); text-align:right; font-variant-numeric:tabular-nums; }

.cwd-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.cwd-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid #cbc8bb; border-radius:999px; background:#fff; font-size:12.5px; font-weight:500; color:var(--cwd-ink-soft); transition:border-color .15s ease, color .15s ease; }
.cwd-chip:hover { border-color:var(--cwd-ink); color:var(--cwd-ink); }
.cwd-chip .cwd-chiplogo { width:16px; height:16px; flex:none; border-radius:4px; object-fit:contain; }
.cwd-chip .cwd-c { font-family:var(--cwd-mono); font-size:10.5px; color:var(--cwd-muted); font-variant-numeric:tabular-nums; }

/* The traffic widget closes the band. It carries its own <style> (an ID rule,
   #cwd_traffic { margin:0 auto 4em }) emitted from get_traffic_widget(), which
   lands in the body AFTER this file. Beating it needs higher specificity, not
   later source order — hence .cwd-band #cwd_traffic rather than a bare ID. */
.cwd-band #cwd_traffic { margin:34px auto 0; }

.cwd-crawl { margin-top:34px; padding-top:22px; border-top:1px solid #d3d0c4; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.cwd-crawl .cwd-fn { font-family:var(--cwd-mono); font-weight:600; font-size:23px; color:var(--cwd-ink-soft); font-variant-numeric:tabular-nums; }
.cwd-crawl .cwd-fl { font-family:var(--cwd-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cwd-muted); margin-top:6px; }

@media (max-width:980px) {
	.cwd-empgrid { grid-template-columns:repeat(2,1fr); }
	.cwd-vac, .cwd-newsgrid, .cwd-bandgrid, .cwd-crawl { grid-template-columns:1fr; }
	.cwd-bandgrid { gap:46px; }
	.cwd-head h2 { white-space:normal; }
}
@media (max-width:600px) {
	.cwd-empgrid { grid-template-columns:1fr; }
	.cwd-inner, .cwd-bandin { padding-left:1em; padding-right:1em; }
}