/* ==========================================================================
   Lead Signals page only (lead-signals.html, _build/signal_page.py,
   behaviour in assets/signals.js). Styled after the outbound page
   (assets/outbound.css), not the home page's poster frame: thin rules,
   softly tinted cards on small radii, pill tags, the ember tint for a
   selected state and cobalt only as a small accent.
   Without JS everything is shown: `.sg-js` gates every hidden state.
   ========================================================================== */

.sg-k { display: block; margin: 0 0 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.sg-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sg-pill {
  justify-self: start; display: inline-block; padding: 4px 11px; border-radius: 100px; border: 1px solid rgba(226, 82, 15, .4);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange);
}
/* the outbound panel surface */
.sg-card, .sg-panels {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--ov), .04), rgba(var(--ov), .012));
}

/* ---- hero ---------------------------------------------------------------- */
.sg-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.sg-card { padding: 20px; }
.sg-card__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sg-dots { display: inline-flex; gap: 6px; }
.sg-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--ov), .14); }
.sg-dots i:first-child { background: rgba(255, 112, 112, .5); }
.sg-card__foot { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; }
.sg-feed { list-style: none; margin: 0; padding: 8px 0; display: grid; gap: 2px; }
.sg-feed__row {
  display: grid; grid-template-columns: 92px 1fr 34px; grid-template-rows: auto auto; column-gap: 12px;
  padding: 10px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.45; opacity: .4;
  transition: opacity var(--mid) var(--ease), background var(--mid) var(--ease), transform .5s var(--ease);
}
.sg-feed__row:nth-child(n+6) { display: none; }
.sg-feed__row:first-child { opacity: 1; background: rgba(var(--ov), .045); }
.sg-feed__row.is-new { transform: translateY(-8px); opacity: 0; transition: none; }
.sg-feed__row b { grid-column: 2; font-weight: 500; color: var(--text); }
.sg-feed__ev { grid-column: 2; color: var(--text-2); font-size: 13px; }
.sg-feed__age { grid-row: 1; grid-column: 3; justify-self: end; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.sg-tag {
  grid-row: 1 / 3; align-self: start; margin-top: 2px; text-align: center; padding: 4px 0; border-radius: 100px;
  border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); white-space: nowrap;
}
.sg-tag--hiring   { color: #E2520F; border-color: rgba(226, 82, 15, .4); }
.sg-tag--tender   { color: #3F6E8C; border-color: rgba(63, 110, 140, .4); }
.sg-tag--request  { color: var(--amber); border-color: rgba(168, 107, 18, .4); }
.sg-tag--exec, .sg-tag--funding { color: var(--cobalt); border-color: rgba(47, 91, 211, .35); }

/* ---- types: an icon sheet over a heat field ------------------------------
   The five tabs are one specimen sheet (moodboard pin 48): ruled cells, each
   a fine-line icon in a viewfinder. Behind the icons, signals.js paints a
   heat field (pin 41): signals flare under each cell and fade at that type's
   real half-life, and the selected type burns steadily. The thermal ramp is
   data colour, so it appears only where something is being measured. */
.sg-types { display: grid; gap: 16px; }
.sg-sheet { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.sg-sheet__in { position: relative; }
.sg-heat { position: absolute; left: 0; top: 0; width: 100%; height: var(--fig-h, 132px); pointer-events: none; }
.sg-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sg-tab {
  display: grid; grid-template-rows: var(--fig-h, 132px) auto; text-align: left; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.sg-tab + .sg-tab { border-left: 1px solid var(--line-2); }
.sg-tab__fig {
  position: relative; display: grid; place-items: center; color: var(--text);
  /* viewfinder corners, drawn as eight short rules */
  --c: rgba(var(--ov), .42); --k: 12px; --o: 14px;
  background:
    linear-gradient(var(--c), var(--c)) var(--o) var(--o) / var(--k) 1px, linear-gradient(var(--c), var(--c)) var(--o) var(--o) / 1px var(--k),
    linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) var(--o) / var(--k) 1px, linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) var(--o) / 1px var(--k),
    linear-gradient(var(--c), var(--c)) var(--o) calc(100% - var(--o)) / var(--k) 1px, linear-gradient(var(--c), var(--c)) var(--o) calc(100% - var(--o)) / 1px var(--k),
    linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) calc(100% - var(--o)) / var(--k) 1px, linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) calc(100% - var(--o)) / 1px var(--k);
  background-repeat: no-repeat;
}
.sg-tab__ico { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.sg-tab__no, .sg-tab__life { position: absolute; top: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--text-3); }
.sg-tab__no { left: 34px; }
.sg-tab__life { right: 34px; }
.sg-tab__txt { display: grid; gap: 3px; padding: 13px 16px 15px; border-top: 1px solid var(--line-2); background: var(--ink); transition: background var(--fast), box-shadow var(--fast); }
.sg-tab b { font-size: 15px; font-weight: 500; line-height: 1.25; }
.sg-tab__txt span { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.sg-tab:hover .sg-tab__txt { background: color-mix(in srgb, var(--ink) 94%, var(--text)); }
.sg-tab:hover .sg-tab__ico { transform: scale(1.06); }
.sg-tab[aria-selected="true"] .sg-tab__txt { background: color-mix(in srgb, var(--ink) 90%, #E2520F); box-shadow: inset 0 2px 0 #E2520F; }
.sg-tab[aria-selected="true"] .sg-tab__fig { --c: var(--text); }
.sg-tab[aria-selected="true"] .sg-tab__no, .sg-tab[aria-selected="true"] .sg-tab__life { color: var(--text); }
.sg-tab:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.sg-panels { min-width: 0; }
.sg-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: clamp(22px, 3vw, 34px); }
.sg-panel + .sg-panel { border-top: 1px solid var(--line); }
.sg-js .sg-panel + .sg-panel { border-top: 0; }
.sg-js .sg-panel:not([hidden]) { animation: sg-fade 420ms var(--ease); }
@keyframes sg-fade { from { opacity: 0; transform: translateY(8px); } }
.sg-panel__main .h3 { margin-bottom: 16px; }
.sg-panel__main p:not(.sg-k) { margin: 0 0 20px; color: var(--text-2); font-size: 15.5px; max-width: 62ch; }
.sg-life { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.sg-life strong { font-family: var(--font-display); font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.sg-life strong small { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); letter-spacing: 0; }
.sg-life p { margin: 8px 0 12px; color: var(--text-2); font-size: 14px; }
/* a 180 day window; the filled part is one half-life */
.sg-life__bar { height: 6px; border-radius: 100px; background: rgba(var(--ov), .08); overflow: hidden; }
.sg-life__bar i { display: block; height: 100%; width: calc(var(--life) / 180 * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--violet-2), var(--mint)); }
.sg-trap { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid rgba(226, 82, 15, .4); background: rgba(226, 82, 15, .08); }
.sg-trap .sg-k { color: var(--orange); }
.sg-trap p:not(.sg-k) { margin: 0; font-size: 14.5px; color: var(--text); }

/* every source we can build: a head line then two marquee rows (outbound's "Every surface we can run") */
.sg-sources { margin-top: 36px; }
.sg-sources > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.sg-sources h3 { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.sg-sources p { margin: 0; color: var(--text-3); font-size: 13px; }
.sg-marquee { display: grid; gap: 8px; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sg-marquee__track { display: flex; width: max-content; }
.sg-marquee__row { display: flex; flex: none; gap: 8px; padding: 0 4px; margin: 0; list-style: none; animation: sg-marquee 52s linear infinite; }
.sg-marquee__track--rev .sg-marquee__row { animation-direction: reverse; animation-duration: 60s; }
.sg-marquee__row .chip { font-size: 13px; padding: 8px 14px; }
.sg-marquee:hover .sg-marquee__row { animation-play-state: paused; }
@keyframes sg-marquee { to { transform: translateX(-100%); } }
/* the strip closes its section, so the section ends close under it */
#types { padding-bottom: clamp(36px, 4.5vw, 60px); }

/* ---- the climb (the first sixty days) ---------------------------------
   After the reference cycling infographic, but on the page's own paper (a dark
   card was tried and stood out too much): a route winding up a contour-line
   tower (canvas, painted by signals.js) under an SVG layer with the ruler, the
   five callouts and the marker. The figure is cropped to its drawing and given
   the wider column, so it fills the section's height rather than floating. */
.sg-climb {
  --climb-bg: var(--ink); --climb-ink: var(--text); --climb-dim: var(--text-3); --climb-line: var(--line-2);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: center;
}
.sg-climb__fig { position: relative; width: 100%; }
.sg-climb__cv, .sg-climb__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-climb__svg { overflow: visible; font-family: var(--font-mono); }
/* without the script there is no canvas paint, so the route itself stands in */
.sg-climb__route { fill: none; stroke: url(#sgClimbGrad); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.sg-climb.is-ready .sg-climb__route { display: none; }
.sg-climb__axis { fill: none; stroke: var(--climb-dim); stroke-width: 1; }
.sg-climb__days text { fill: var(--climb-dim); font-size: 12px; letter-spacing: .08em; }
.sg-co__lead { fill: none; stroke: var(--climb-line); stroke-width: 1; transition: stroke var(--mid) var(--ease); }
.sg-climb__stop { fill: var(--climb-bg); stroke: var(--climb-ink); stroke-width: 1.5; cursor: pointer; }
.sg-co { cursor: pointer; outline: none; }
.sg-co__ring { fill: var(--climb-bg); stroke: var(--climb-dim); stroke-width: 1.2; transition: fill var(--mid) var(--ease), stroke var(--mid) var(--ease), r var(--mid) var(--ease); }
.sg-co__ico { fill: none; stroke: var(--climb-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.sg-co__t { fill: var(--climb-dim); font-size: 12px; letter-spacing: .1em; transition: fill var(--mid) var(--ease); }
.sg-co:hover .sg-co__ring, .sg-co:focus-visible .sg-co__ring { stroke: var(--climb-ink); }
.sg-co.is-on .sg-co__ring { fill: var(--orange); stroke: var(--orange); r: 32; }
.sg-co.is-on .sg-co__ico { stroke: #fff; opacity: 1; }
.sg-co.is-on .sg-co__t { fill: var(--climb-ink); }
.sg-co__lead.is-on { stroke: var(--climb-ink); }
.sg-climb__stop.is-on { fill: var(--orange); stroke: var(--climb-ink); }
.sg-co:focus-visible .sg-co__ring { stroke: var(--orange); stroke-width: 2; }
.sg-climb__marker circle { fill: var(--climb-bg); stroke: var(--climb-ink); stroke-width: 2.5; }
.sg-climb__marker .sg-climb__core { fill: var(--orange); stroke: none; }
.sg-climb__marker .sg-climb__pulse { fill: none; stroke: rgba(var(--ov), .45); stroke-width: 1.5; animation: sg-pulse 1.8s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sg-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
/* the stops, callouts and marker arrive once the tower has drawn itself */
.sg-climb.is-ready:not(.is-drawn) .sg-co, .sg-climb.is-ready:not(.is-drawn) .sg-co__lead,
.sg-climb.is-ready:not(.is-drawn) .sg-climb__stop, .sg-climb.is-ready:not(.is-drawn) .sg-climb__marker { opacity: 0; }
.sg-co, .sg-co__lead, .sg-climb__stop, .sg-climb__marker { transition: opacity .6s var(--ease); }

.sg-climb__panel { display: grid; gap: 18px; align-content: center; min-width: 0; }
.sg-climb__count { margin: 0; font-size: 13px; color: var(--climb-dim); }
.sg-climb__count b { color: var(--orange); font-weight: 500; }
.sg-climb__step .sg-k { color: var(--climb-dim); }
.sg-climb__step h3 { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); color: var(--text); font-weight: 400; line-height: 1; letter-spacing: -.03em; margin: 4px 0 14px; }
.sg-climb__step p { margin: 0; max-width: 40ch; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.sg-js .sg-climb__step:not([hidden]) { animation: sg-fade 420ms var(--ease); }
.sg-climb__bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sg-climb__bar { height: 4px; padding: 0; border: 0; border-radius: 100px; background: var(--climb-line); cursor: pointer; transition: background var(--mid) var(--ease); }
.sg-climb__bar.is-past { background: rgba(var(--ov), .35); }
.sg-climb__bar.is-on { background: var(--orange); }
.sg-climb__nav { display: flex; align-items: center; gap: 10px; }
.sg-climb__arrow, .sg-climb__play {
  height: 42px; border-radius: 100px; border: 1px solid var(--line); background: rgba(var(--ov), .02); color: var(--text);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; cursor: pointer; transition: background var(--fast), border-color var(--fast);
}
.sg-climb__arrow { width: 42px; font-size: 16px; }
.sg-climb__play { padding: 0 20px; text-transform: uppercase; }
.sg-climb__arrow:hover, .sg-climb__play:hover { border-color: var(--line-2); background: rgba(var(--ov), .05); }
/* no script: every step is listed and the controls have nothing to drive */
html:not(.sg-js) .sg-climb__step { display: block !important; margin-bottom: 18px; }
html:not(.sg-js) .sg-climb__nav, html:not(.sg-js) .sg-climb__bars, html:not(.sg-js) .sg-climb__count, html:not(.sg-js) .sg-climb__marker { display: none; }

/* ---- scope builder (the outbound calculator) ----------------------------- */
.sg-build { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; margin-bottom: 28px; }
.sg-groups { display: grid; gap: 14px; }
.sg-group { border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--ov), .022); padding: 22px; }
.sg-group__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.sg-group__h span { font-family: var(--font-mono); font-size: 12px; color: var(--violet-2); }
.sg-group__h b { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.sg-group__h small { font-size: 13px; color: var(--text-3); }
.sg-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-opt {
  padding: 11px 15px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--ov), .02);
  color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; transition: border-color var(--fast), background var(--fast);
}
.sg-opt:hover { border-color: var(--line-2); background: rgba(var(--ov), .045); }
.sg-opt[aria-pressed="true"] { border-color: rgba(226, 82, 15, .55); background: rgba(226, 82, 15, .10); }
.sg-text {
  width: 100%; padding: 13px 15px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(var(--ov), .02);
  color: var(--text); font: inherit; font-size: 15.5px; transition: border-color var(--fast), background var(--fast);
}
.sg-text::placeholder { color: var(--text-3); }
.sg-text:focus { outline: none; border-color: rgba(226, 82, 15, .55); background: rgba(226, 82, 15, .06); }
.sg-sum {
  position: sticky; top: 92px; display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(420px 220px at 50% -10%, rgba(226, 82, 15, .22), transparent 70%), linear-gradient(180deg, rgba(var(--ov), .05), rgba(var(--ov), .015));
}
.sg-sum pre { margin: 0; padding: 14px 0; min-height: 8em; border-block: 1px solid var(--line); font-family: var(--font-sans); font-size: 15px; line-height: 1.75; white-space: pre-wrap; color: var(--text); }
.sg-sum__note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-3); }
.sg-sum .btn { width: 100%; justify-content: center; }

/* ---- small screens ------------------------------------------------------- */
@media (max-width: 900px) {
  .sg-hero__grid, .sg-build, .sg-panel, .sg-types, .sg-climb { grid-template-columns: 1fr; }
  /* the sheet keeps its five cells and scrolls sideways instead of wrapping */
  .sg-sheet { overflow-x: auto; overscroll-behavior-x: contain; --fig-h: 108px; }
  .sg-sheet__in { width: max-content; }
  .sg-tabs { grid-template-columns: repeat(5, 156px); }
  .sg-tab__ico { width: 38px; height: 38px; }
  .sg-tab__no { left: 26px; }
  .sg-tab__life { right: 26px; }
  .sg-tab__fig { --o: 10px; --k: 10px; }
  .sg-tab__no, .sg-tab__life { top: 15px; }
  .sg-tab__txt span { display: none; }
  .sg-sum { position: static; }
}
@media (max-width: 640px) {
  .sg-co__t { display: none; }
  .sg-climb__days text { font-size: 12.5px; }
  .sg-feed__row { grid-template-columns: 84px 1fr; }
  .sg-feed__age { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-js .sg-panel:not([hidden]) { animation: none; }
  .sg-feed__row { transition: none; }
  .sg-climb__pulse { animation: none !important; }
  .sg-js .sg-climb__step:not([hidden]) { animation: none; }
  .sg-marquee { -webkit-mask-image: none; mask-image: none; }
  .sg-marquee__track { width: auto; }
  .sg-marquee__row { animation: none; flex-wrap: wrap; row-gap: 8px; }
  .sg-marquee__row[aria-hidden] { display: none; }
}