/*
  Kinetic Signal: Work (work.html).
  Sections: #intro (fitted WORK), three flagship systems (#ea-suite, #trading-dashboard,
  #signal-platform) with the SM6 signal paths, #builds word wall (SM3), #stack, #start.
  Shared components and every token come from base.css.
  Order: page layout, components, sections, media queries.
*/

/* ==========================================================================
   #intro: the fitted title, then the sub and the lede side by side from 1024px
   ========================================================================== */

.page-work .page-intro {
  padding-bottom: var(--section-y);
}

.page-work .page-lede {
  color: var(--fg-2);
}

/* ==========================================================================
   Signal-path diagrams (SM6, DESIGN.md 3.4): two inline SVGs per figure
   ========================================================================== */

.sp {
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
}

/* Compact below 768px, wide from 768px. Only the shown variant is in the accessibility tree. */
.sp--wide {
  display: none;
}

.sp--compact {
  max-width: 27.5rem;
}

/* Layer 1: the input. Thin, jagged, paper at half strength. */
.sp-noise path {
  stroke: var(--fg);
  stroke-width: 1.5;
  stroke-opacity: 0.5;
  stroke-linejoin: round;
}

/* Layer 2: context lines (channel, brackets, alert ticks). */
.sp-ctx path {
  stroke: var(--fg);
  stroke-width: 1.5;
  stroke-opacity: 0.35;
  stroke-linejoin: round;
}

/*
  Layer 3: the signal. Always the thickest, brightest line. Butt caps: a square or round cap
  would leave a dot at the start of a path that is not drawn yet (dash offset 1).
*/
.sp-signal path {
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linejoin: round;
}

.sp-signal .s5 {
  stroke-width: 5;
}

.sp-signal .s2 {
  stroke-width: 2.5;
}

/* An 8-unit square that ends a strand: a path 8 units long and 8 units thick. */
.sp-signal .s8 {
  stroke-width: 8;
}

/* Layer 4: labels in caps. Sizes are viewBox units, set as attributes in the markup. */
.sp-big {
  fill: var(--fg);
  stroke: none;
  font-stretch: 62%;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.sp-small {
  fill: var(--fg-2);
  stroke: none;
  font-stretch: 75%;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   The three systems
   ========================================================================== */

.case {
  padding-bottom: var(--section-y);
}

.case-count {
  margin-bottom: var(--s-6);
}

.case-head {
  row-gap: var(--s-6);
}

/* The same scale as the system titles on Home, so the two pages name a system the same way. */
.case-title {
  font-size: clamp(2.25rem, 1rem + 3.2vw, 4.25rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.case-body {
  display: grid;
  gap: var(--s-6);
  align-content: start;
}

.case-desc {
  max-width: 34em;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

/* Facts: the label is the term (first in the source), the value sets above it. */
.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-8);
}

.case-facts .readout {
  flex-direction: column-reverse;
}

.case-facts .readout-value {
  font-size: clamp(3rem, 1.5rem + 4.5vw, 5.5rem);
  text-transform: uppercase;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.case-figure {
  margin-top: var(--s-8);
}

/* The legend: a thin paper line for the input, a thick lime line for the signal. */
.case-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--fg-2);
}

.legend-key {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.legend-key::before {
  content: "";
  width: 2rem;
  height: 1.5px;
  background: var(--fg);
  opacity: 0.5;
}

.legend-key--signal::before {
  height: 0.375rem;
  background: var(--accent);
  opacity: 1;
}

/* ==========================================================================
   #builds: the word wall, one kind of build per line
   ========================================================================== */

.builds {
  padding-block: var(--section-y) 0;
}

.builds .label {
  margin-bottom: var(--s-6);
}

/*
  One item per line. The longest line ("A TradingView trend indicator (Pine Script)") fits
  one row at 1440px with this size; below that a line may wrap, so items are separated by
  hairlines and not by the accent square.
*/
.builds .wordwall-list {
  flex-direction: column;
  align-items: stretch;
  font-size: clamp(2rem, 0.8rem + 4.2vw, 5rem);
}

.builds .wordwall-list > li {
  padding-block: 0.16em 0.1em;
  border-top: 1px solid var(--line);
  white-space: normal;
  text-wrap: balance;
}

.builds .wordwall-list > li:last-child {
  border-bottom: 1px solid var(--line);
}

.builds .wordwall-list > li:not(:last-child)::after {
  display: none;
}

/* ==========================================================================
   #stack: four groups
   ========================================================================== */

.stack-grid {
  row-gap: var(--s-7);
}

/* No side inset: every panel starts on the column edge, like the section head. */
.stack-panel {
  padding-inline: 0;
}

.stack-title {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/*
  The items set in the caps voice of the word wall, one size down: they wrap inside the panel
  with the accent square between them (a box, not a character). main.js hides the square at
  the end of a line.
*/
.stack-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.3em;
  margin-top: var(--s-5);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-stretch: 62%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.stack-list li {
  white-space: nowrap;
}

.stack-list li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.26em;
  height: 0.26em;
  margin-inline: 0.4em;
  vertical-align: 0.2em;
  background: var(--accent);
}

.stack-list li.is-line-end::after {
  visibility: hidden;
}

/* ==========================================================================
   Media queries
   ========================================================================== */

@media (min-width: 768px) {
  .sp--wide {
    display: block;
  }

  .sp--compact {
    display: none;
  }

  .stack-panel {
    grid-column: span 4;
  }
}

@media (min-width: 1024px) {
  /*
    The title spans the full width; the sub (inside the h1) and the lede (after it) share the
    next row. The h1 takes both rows as a subgrid, so the lede can sit beside the sub.
  */
  .page-work .page-intro .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--gutter);
    align-items: start;
  }

  .page-work .page-title {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }

  .page-work .page-title .fit {
    grid-column: 1 / -1;
  }

  .page-work .page-title .h1-sub {
    grid-column: 1 / 7;
    max-width: 18ch;
  }

  .page-work .page-lede {
    grid-column: 7 / 12;
    grid-row: 2;
    margin-top: 0;
  }

  .case-title {
    grid-column: 1 / 8;
  }

  .case-body {
    grid-column: 8 / -1;
  }
}

@media (min-width: 1280px) {
  .stack-panel {
    grid-column: span 3;
  }
}