/*
  hiring-landscape.css

  The GTM Hiring Landscape dashboard. Uses the dark surface GTM Radar uses
  rather than the paper surface of the GTM tools, because this page belongs to
  the Radar section and should read as part of it on sight.

  Charts are server-rendered SVG. The rules under "chart internals" style text
  inside those SVGs, so changing a class name here means changing it in
  gtm-landscape-lib.php too.
*/

:root {
  --ls-bg:        #0F2033;
  --ls-bg-deep:   #0E141C;
  --ls-surface:   #16293E;
  --ls-surface-2: #1B3149;
  --ls-line:      rgba(243, 239, 231, .13);
  --ls-paper:     #F3EFE7;
  --ls-dim:       rgba(243, 239, 231, .66);
  --ls-faint:     rgba(243, 239, 231, .44);
  --ls-teal:      #1B6E76;
  --ls-teal-lift: #4FA3A8;
  --ls-amber:     #D98F3E;
  --ls-display:   'Fraunces', Georgia, serif;
  --ls-body:      'IBM Plex Sans', system-ui, sans-serif;
  --ls-mono:      'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Matches .wrap in hire.css. The compare pages, the how-to-hire hub and the
     budget tool all render at 1040, so the landscape page has to as well or it
     reads as a different site. Was 1120, which combined with the missing
     border-box below produced an effective 1168. */
  --ls-maxw:      1040px;
}

/* Without this, the 24px horizontal padding on .ls-wrap is added outside the
   max-width rather than inside it, so a 1040 container renders at 1088. Every
   other container on the site is border-box. */
.ls-body,
.ls-body *,
.ls-body *::before,
.ls-body *::after { box-sizing: border-box; }

.ls-body {
  margin: 0;
  background: var(--ls-bg);
  color: var(--ls-paper);
  font-family: var(--ls-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ls-wrap { max-width: var(--ls-maxw); margin: 0 auto; padding: 0 24px; }

a { color: var(--ls-amber); }
a:hover { color: #F2A93B; }

/* ---------- hero ---------- */
.ls-hero {
  background: linear-gradient(180deg, var(--ls-bg-deep) 0%, var(--ls-bg) 100%);
  border-bottom: 1px solid var(--ls-line);
  padding: 56px 0 44px;
}
.ls-eyebrow {
  font-family: var(--ls-mono);
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ls-teal-lift); margin-bottom: 10px;
}
.ls-hero h1 {
  font-family: var(--ls-display);
  font-weight: 600;
  font-size: clamp(29px, 4.2vw, 48px);
  line-height: 1.07; letter-spacing: -.015em;
  /* Small top margin because the h1 now sits directly under the breadcrumb
     rather than under an eyebrow. Without it the two crowd each other. */
  margin: 6px 0 22px; color: var(--ls-paper);
}

.ls-crumbs { margin: 0 0 16px; }
.ls-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0; padding: 0;
  font-family: var(--ls-mono); font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase;
}
.ls-crumbs li { display: flex; align-items: center; gap: 6px; color: var(--ls-faint); }
.ls-crumbs li::marker { content: none; }
.ls-crumbs li + li::before { content: '/'; opacity: .45; }
.ls-crumbs a { color: var(--ls-faint); text-decoration: none; }
.ls-crumbs a:hover { color: var(--ls-amber); }
.ls-crumbs li[aria-current="page"] { color: var(--ls-paper); }

/* AEO answer block. Self-contained and specific, high on the page so an
   answer engine can lift it whole. */
.ls-answer {
  border-left: 3px solid var(--ls-amber);
  background: rgba(217, 143, 62, .10);
  border-radius: 0 6px 6px 0;
  padding: 19px 23px; max-width: 860px; margin: 0 0 18px;
}
.ls-answer p { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(243, 239, 231, .93); }

.ls-updated { font-size: 14px; color: var(--ls-dim); margin: 0 0 26px; }

.ls-stats {
  display: grid; gap: 1px; background: var(--ls-line);
  border: 1px solid var(--ls-line); border-radius: 8px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 24px;
}
.ls-stat { background: var(--ls-surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.ls-num {
  font-family: var(--ls-display); font-weight: 600;
  font-size: 27px; line-height: 1; color: var(--ls-amber);
}
.ls-cap {
  font-family: var(--ls-mono); font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ls-faint);
}

.ls-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.ls-btn {
  font-family: var(--ls-mono); font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase;
  background: transparent; color: var(--ls-paper);
  border: 1px solid var(--ls-line); border-radius: 5px;
  padding: 10px 16px; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.ls-btn:hover { border-color: var(--ls-amber); color: var(--ls-amber); }
.ls-btn-primary { background: var(--ls-amber); color: #0E141C; border-color: var(--ls-amber); font-weight: 600; }
.ls-btn-primary:hover { background: #F2A93B; color: #0E141C; }
.ls-btn-sm { padding: 7px 12px; font-size: 11px; }

/* ---------- tabs ---------- */
.ls-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 32px 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--ls-line);
}
.ls-tab {
  font-family: var(--ls-mono); font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase;
  background: transparent; color: var(--ls-faint);
  border: 1px solid transparent; border-radius: 5px;
  padding: 9px 14px; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.ls-tab:hover { color: var(--ls-paper); background: rgba(243, 239, 231, .05); }
.ls-tab.is-active {
  color: #0E141C; background: var(--ls-amber);
  border-color: var(--ls-amber); font-weight: 600;
}

/* ---------- panels ---------- */
.ls-panel {
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 10px;
  padding: 26px 28px 30px;
  margin-bottom: 22px;
}
.ls-panel[hidden] { display: none; }
.ls-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 20px;
}
.ls-panel h2 {
  font-family: var(--ls-display); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2;
  margin: 0 0 7px; color: var(--ls-paper); letter-spacing: -.01em;
}
.ls-sub {
  font-family: var(--ls-display); font-weight: 600; font-size: 18px;
  margin: 30px 0 12px; color: var(--ls-paper);
}
.ls-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ls-dim); max-width: 68ch; }
.ls-read {
  margin: 20px 0 0; font-size: 15px; line-height: 1.65;
  color: rgba(243, 239, 231, .82); max-width: 78ch;
  padding-top: 16px; border-top: 1px solid var(--ls-line);
}
.ls-read strong { color: var(--ls-paper); }
.ls-empty { color: var(--ls-faint); font-family: var(--ls-mono); font-size: 13px; }

/* A caveat that has to be read before the number above it gets quoted. */
.ls-caveat {
  margin-top: 20px; padding: 16px 20px;
  border-left: 3px solid var(--ls-teal-lift);
  background: rgba(79, 163, 168, .10);
  border-radius: 0 6px 6px 0;
}
.ls-caveat p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(243, 239, 231, .86); }
.ls-caveat strong { color: var(--ls-paper); }
.ls-caveat code {
  font-family: var(--ls-mono); font-size: .9em;
  background: rgba(14, 20, 28, .5); padding: 1px 5px; border-radius: 3px;
}

/* ---------- chart internals (classes emitted by gtm-landscape-lib.php) ---------- */
.ls-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ls-chart .ls-lbl {
  font-family: var(--ls-body); font-size: 13px;
  fill: rgba(243, 239, 231, .84);
}
.ls-chart .ls-val {
  font-family: var(--ls-mono); font-size: 12px;
  fill: var(--ls-amber);
}
.ls-chart .ls-axis {
  font-family: var(--ls-mono); font-size: 10.5px;
  fill: rgba(243, 239, 231, .48);
}
.ls-chart .ls-grid { stroke: rgba(243, 239, 231, .10); stroke-width: 1; }
.ls-chart .ls-range { stroke: rgba(243, 239, 231, .34); stroke-width: 2.5; stroke-linecap: round; }

/* ---------- stage matrix ---------- */
.ls-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ls-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ls-matrix th, .ls-matrix td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ls-line);
}
.ls-matrix thead th {
  font-family: var(--ls-mono); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ls-faint); font-weight: 500; vertical-align: bottom;
}
.ls-matrix tbody th {
  font-weight: 600; color: var(--ls-paper); white-space: nowrap;
}
.ls-cell {
  display: block; position: relative; padding: 3px 7px; border-radius: 3px;
  font-family: var(--ls-mono); font-size: 12px; color: rgba(243, 239, 231, .9);
  background: linear-gradient(90deg, rgba(217, 143, 62, .40) var(--fill, 0%), rgba(243, 239, 231, .05) var(--fill, 0%));
}

/* ---------- method, faq, cta ---------- */
.ls-panel-static { background: var(--ls-surface-2); }
.ls-method p, .ls-method li { font-size: 15px; line-height: 1.68; color: rgba(243, 239, 231, .84); }
.ls-method ul { padding-left: 20px; }
.ls-method li { margin-bottom: 9px; }
.ls-method strong { color: var(--ls-paper); }

.ls-faq details {
  border: 1px solid var(--ls-line); border-radius: 7px;
  margin-bottom: 9px; background: rgba(14, 20, 28, .35);
}
.ls-faq summary {
  cursor: pointer; padding: 14px 44px 14px 18px;
  font-weight: 600; font-size: 15px; color: var(--ls-paper);
  list-style: none; position: relative;
}
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); font-family: var(--ls-mono);
  font-size: 17px; color: var(--ls-amber);
}
.ls-faq details[open] summary::after { content: '\2013'; }
.ls-faq details p {
  margin: 0; padding: 0 18px 16px; font-size: 14.5px;
  line-height: 1.68; color: rgba(243, 239, 231, .8);
}

.ls-cta-grid {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ls-cta-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--ls-bg-deep); border: 1px solid var(--ls-line);
  border-radius: 8px; padding: 20px 22px; text-decoration: none;
  transition: border-color .18s, transform .18s;
}
.ls-cta-card:hover { border-color: var(--ls-amber); transform: translateY(-2px); }
.ls-cta-label {
  font-family: var(--ls-mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ls-amber);
}
.ls-cta-title {
  font-family: var(--ls-display); font-weight: 600;
  font-size: 17px; color: var(--ls-paper);
}
.ls-cta-desc { font-size: 13.5px; line-height: 1.55; color: var(--ls-dim); }
.ls-cite {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ls-line);
  font-family: var(--ls-mono); font-size: 12px; color: var(--ls-faint);
  word-break: break-word;
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .ls-hero { padding: 40px 0 34px; }
  .ls-wrap { padding: 0 16px; }
  .ls-panel { padding: 20px 18px 24px; }
  .ls-panel-head { flex-direction: column; gap: 12px; }
  .ls-answer { padding: 15px 17px; }
  .ls-answer p { font-size: 15px; }
  .ls-num { font-size: 23px; }
  .ls-tabs { gap: 5px; }
  .ls-tab { padding: 8px 11px; font-size: 10.5px; }
  .ls-chart .ls-lbl { font-size: 15px; }
  .ls-chart .ls-val { font-size: 14px; }
  .ls-chart .ls-axis { font-size: 12px; }
}

/* ---------- print, so "save as PDF" produces a usable report ---------- */
@media print {
  :root { --ls-paper: #101820; }
  .ls-body { background: #fff; color: #101820; }
  .ls-hero { background: #fff; border-bottom: 2px solid #101820; padding: 0 0 20px; }
  .ls-hero h1 { color: #101820; font-size: 26px; }
  .ls-answer { background: #F5F0E6; border-left-color: #D98F3E; }
  .ls-answer p, .ls-note, .ls-read, .ls-method p, .ls-method li, .ls-caveat p { color: #101820; }
  .ls-panel, .ls-panel-static { background: #fff; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
  /* Every panel prints, whatever tab happens to be open on screen. */
  .ls-panel[hidden] { display: block !important; }
  .ls-tabs, .ls-actions, .ls-btn, #cc-nav-mount, #cc-footer-mount, .ls-cta-grid { display: none !important; }
  .ls-stat { background: #F5F0E6; }
  .ls-num { color: #B4762E; }
  .ls-cap, .ls-crumbs { color: #444; }
  .ls-chart .ls-lbl { fill: #101820; }
  .ls-chart .ls-val { fill: #B4762E; }
  .ls-chart .ls-axis { fill: #555; }
  .ls-chart .ls-grid { stroke: #ddd; }
  .ls-chart .ls-range { stroke: #999; }
  .ls-faq details { border-color: #ccc; background: #fff; }
  .ls-faq details p { color: #101820; }
  .ls-faq summary { color: #101820; }
  .ls-faq details[open] summary::after, .ls-faq summary::after { display: none; }
  .ls-cite { color: #444; }
  a { color: #101820; text-decoration: underline; }
}

/* Stage matrix: role-count column and thin rows.
   A stage with a handful of open roles cannot support a percentage. Showing
   50% off a base of two reads as a finding and is not one, so those rows show
   raw counts and are dimmed. */
.ls-matrix .ls-n {
  font-family: var(--ls-mono);
  font-size: 11.5px;
  color: var(--ls-faint);
  text-align: right;
  white-space: nowrap;
}
.ls-matrix thead .ls-n { text-align: right; }
.ls-matrix tr.ls-thin th[scope="row"],
.ls-matrix tr.ls-thin .ls-n { color: var(--ls-faint); }
.ls-cell-thin {
  background: rgba(243, 239, 231, .05);
  color: var(--ls-faint);
  font-style: normal;
}
.ls-thin-note { margin-top: 12px; }

/* Two export buttons on the funding stage panel: the companies bar chart and
   the stage matrix are separate datasets. */
.ls-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Reading flags on the top employers table. Colour carries no meaning on its
   own here, the words do, so a colourblind reader loses nothing. */
.ls-read-flag {
  font-family: var(--ls-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.ls-read-fresh   { background: rgba(79, 163, 168, .18); color: #7FC4C8; }
.ls-read-typical { background: rgba(243, 239, 231, .07); color: var(--ls-dim); }
.ls-read-stale   { background: rgba(217, 143, 62, .16); color: #E0A868; }

/* Submit a role. The card is a <button>, so it needs the anchor card's styling
   plus a reset for the browser defaults a button carries. */
.ls-cta-button {
  border: 1px solid var(--ls-line);
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.ls-cta-button:hover { border-color: var(--ls-amber); }

.ls-submit {
  margin-top: 24px;
  padding: 24px 26px;
  background: var(--ls-bg-deep);
  border: 1px solid var(--ls-line);
  border-radius: 10px;
}
.ls-submit[hidden] { display: none; }
.ls-submit .ls-sub { margin-top: 0; }
.ls-field-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.ls-field { display: block; margin-bottom: 14px; }
.ls-field > span {
  display: block;
  font-family: var(--ls-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ls-dim);
  margin-bottom: 6px;
}
.ls-field > span em {
  font-style: normal;
  color: var(--ls-faint);
  letter-spacing: .06em;
}
.ls-field input,
.ls-field textarea {
  width: 100%;
  background: var(--ls-surface);
  border: 1px solid var(--ls-line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--ls-paper);
  font-family: var(--ls-body);
  font-size: 15px;
  line-height: 1.4;
}
.ls-field input:focus,
.ls-field textarea:focus {
  outline: none;
  border-color: var(--ls-amber);
  box-shadow: 0 0 0 2px rgba(217, 143, 62, .18);
}
.ls-field textarea { resize: vertical; }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden. */
.ls-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ls-submit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ls-submit-msg { margin: 12px 0 0; font-size: 14.5px; min-height: 1.2em; color: var(--ls-dim); }
.ls-submit-msg.is-ok { color: #7FC4C8; }
.ls-submit-msg.is-error { color: #E0A868; }

@media (max-width: 640px) {
  .ls-field-row { grid-template-columns: 1fr; gap: 0; }
  .ls-submit { padding: 18px 16px; }
}