/* Attrition: the staircase of stage counts, scan to ENTER. Every selector is scoped under .m-attrition. */
.m-attrition {
  --at-step: 2rem; --at-name: 8.75rem; --at-count: 4.5rem; --at-lost: 4.75rem; --at-kept: 3.75rem; --at-tog: 1.5rem;
  --at-gap: 18px; --at-bar-h: 16px;
  --at-hatch: repeating-linear-gradient(135deg, var(--ink) 0 1.06px, transparent 1.06px 4.243px);
}
.m-attrition .at-n { font: 400 .86em/1 var(--mono); font-style: normal; letter-spacing: -.02em; color: var(--ink); }
.m-attrition .dek .at-n { color: var(--ink); }

/* Shared grid for the column heads and every row */
.m-attrition .at-colhead,
.m-attrition .at-head {
  display: grid; align-items: center; column-gap: var(--at-gap);
  grid-template-columns: var(--at-step) var(--at-name) minmax(0, 1fr) var(--at-count) var(--at-lost) var(--at-kept) var(--at-tog);
}
.m-attrition .at-meta { display: contents; }

.m-attrition .at-stair { margin-top: 26px; }
.m-attrition .at-colhead { align-items: end; border-bottom: 1px solid var(--ink); font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-attrition .at-colhead > span { padding-bottom: 7px; }
.m-attrition .at-c-count, .m-attrition .at-c-lost, .m-attrition .at-c-kept { text-align: right; }

/* The log axis ruler that heads the bar column */
.m-attrition .at-axis { display: block; min-width: 0; }
.m-attrition .at-axis-t { display: block; padding-bottom: 4px; }
.m-attrition .at-axis-ruler { display: block; position: relative; height: 22px; }
.m-attrition .at-axis-ruler i { position: absolute; bottom: 0; width: 1px; background: var(--muted); }
.m-attrition .at-minor { height: 4px; opacity: .7; }
.m-attrition .at-axis-ruler .at-major { height: 8px; background: var(--ink); }
.m-attrition .at-major b { position: absolute; bottom: 10px; left: 0; transform: translateX(-50%); font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--ink); text-transform: none; white-space: nowrap; }
.m-attrition .at-major.is-end b { transform: translateX(calc(-100% + 1px)); }

/* Rows */
.m-attrition .at-rows { list-style: none; margin: 0; padding: 0; }
.m-attrition .at-row { border-bottom: 1px solid var(--rule); }
.m-attrition .at-head {
  width: 100%; min-height: 52px; margin: 0; padding: 13px 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; overflow: hidden; position: relative;
}
.m-attrition .at-head.is-static { cursor: default; }
.m-attrition button.at-head:hover { background: var(--paper2); }
.m-attrition button.at-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.m-attrition .at-step { font: 400 12px/1 var(--mono); color: var(--muted); letter-spacing: .02em; padding-left: 2px; }
.m-attrition .at-name { font: 600 21px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); min-width: 0; }
.m-attrition .at-count { font: 500 18px/1 var(--mono); text-align: right; color: var(--ink); }
.m-attrition .at-lost, .m-attrition .at-kept { font: 400 14px/1 var(--mono); text-align: right; color: var(--muted); }
.m-attrition .at-dash { color: var(--rule); }
.m-attrition .at-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The disclosure mark: a small square with + / - */
.m-attrition .at-tog { justify-self: end; width: 22px; height: 22px; border: 1px solid var(--rule); position: relative; }
.m-attrition .at-tog::before, .m-attrition .at-tog::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--ink); }
.m-attrition .at-tog::before { width: 9px; height: 1.5px; transform: translate(-50%, -50%); }
.m-attrition .at-tog::after { width: 1.5px; height: 9px; transform: translate(-50%, -50%); }
.m-attrition .at-head[aria-expanded="true"] .at-tog { border-color: var(--ink); }
.m-attrition .at-head[aria-expanded="true"] .at-tog::after { display: none; }
.m-attrition .is-static .at-tog { display: none; }

/* The bar track: log gridlines, the ghost of the previous step, the hatched bar, and the risers that make the stair */
.m-attrition .at-track { position: relative; display: block; height: var(--at-bar-h); min-width: 0; }
.m-attrition .at-grid { position: absolute; top: -60px; bottom: -60px; width: 1px; background: var(--rule); opacity: .75; }
.m-attrition .at-ghost { position: absolute; left: 0; top: 0; bottom: 0; border: 1px solid var(--muted); border-left: 0; opacity: .55; }
.m-attrition .at-bar { position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px; background: var(--at-hatch); border: 1px solid var(--ink); background-color: var(--paper); }
.m-attrition .at-rise, .m-attrition .at-drop { position: absolute; width: 0; border-left: 1px solid var(--muted); opacity: .55; margin-left: -1px; }
.m-attrition .at-rise { bottom: 100%; height: 60px; }
.m-attrition .at-drop { top: 100%; height: 60px; border-left-color: var(--ink); opacity: .9; }
.m-attrition .at-none { position: absolute; left: 6px; top: 50%; transform: translateY(-52%); padding: 0 4px; background: var(--paper); font: italic 400 14px/1 var(--serif); color: var(--muted); white-space: nowrap; }
.m-attrition .at-none.is-after { padding-left: 2px; }
.m-attrition .at-head:hover .at-bar, .m-attrition .at-head:hover .at-none, .m-attrition .at-head:hover .at-pending { background-color: var(--paper2); }
.m-attrition .at-scan-note { display: none; }

/* ENTER: the destination, set heavier in ink (status colour stays with the status badges) */
.m-attrition .is-enter .at-name { font-weight: 800; }
.m-attrition .is-enter .at-count { font-weight: 700; }
.m-attrition .is-enter .at-bar { border-width: 1.5px; }
/* The step the headline names: its Stopped figure is the one accent in the chart */
.m-attrition .is-worst .at-lost { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* An open panel separates the two bar ends a riser or drop line would join, so those connectors step aside */
.m-attrition .at-row.is-open .at-drop, .m-attrition .at-row.is-open + .at-row .at-rise { display: none; }

/* Not yet counted (boards published before the funnel existed) */
.m-attrition .at-pending { position: absolute; left: 0; top: 50%; transform: translateY(-52%); padding-right: 6px; background: var(--paper); font: italic 400 14px/1 var(--serif); color: var(--muted); white-space: nowrap; }
.m-attrition .is-unknown .at-name, .m-attrition .is-unknown .at-count { color: var(--muted); }

/* Draw-in: the bars ink in row by row once the staircase is on screen */
.m-attrition .at-wait .at-bar { clip-path: inset(0 100% 0 0); }
.m-attrition .at-wait .at-ghost, .m-attrition .at-wait .at-rise, .m-attrition .at-wait .at-drop, .m-attrition .at-wait .at-none { opacity: 0; }
.m-attrition .at-drawn .at-bar { clip-path: inset(0 0 0 0); transition: clip-path .95s cubic-bezier(.22, .7, .2, 1) calc(var(--i) * 130ms + 120ms); }
.m-attrition .at-drawn .at-ghost, .m-attrition .at-drawn .at-rise { transition: opacity .5s ease calc(var(--i) * 130ms); }
.m-attrition .at-drawn .at-drop, .m-attrition .at-drawn .at-none { transition: opacity .4s ease calc(var(--i) * 130ms + 900ms); }

/* The disclosure panel */
.m-attrition .at-panel { padding: 2px 0 24px calc(var(--at-step) + var(--at-gap)); }
.m-attrition .at-panel-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 44px; }
.m-attrition .at-desc { font: italic 400 17px/1.45 var(--serif); color: var(--ink); margin: 0 0 12px; max-width: 460px; }
.m-attrition .at-stat { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.m-attrition .at-stat b { font: 500 30px/1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
.m-attrition .at-stat .at-n { color: var(--muted); }
.m-attrition .at-why-h { margin: 2px 0 6px; }
.m-attrition .at-why-h ~ .at-why-h { margin-top: 18px; }
.m-attrition .at-reasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.m-attrition .at-reasons li { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 2.75rem; align-items: center; gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 1.35; }
.m-attrition .at-r-bar { position: relative; height: 9px; }
.m-attrition .at-r-bar i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px; background: var(--at-hatch); border: 1px solid var(--ink); }
.m-attrition .at-r-n { font: 500 14px/1 var(--mono); text-align: right; }
.m-attrition .at-r-rest { color: var(--muted); }
.m-attrition .at-fn { font: italic 400 14px/1.45 var(--serif); color: var(--muted); margin: 8px 0 0; }
.m-attrition .at-fn-lead { margin: 0; padding-top: 8px; border-top: 1px solid var(--ink); max-width: 520px; }
.m-attrition .at-fn .at-n { color: var(--muted); }
.m-attrition .at-names { list-style: none; margin: 0; padding: 0; }
.m-attrition .at-names li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 3rem 3rem; align-items: baseline; gap: 12px; padding: 0; border-bottom: 1px solid var(--rule); }
.m-attrition .at-names .at-names-h { margin-top: -4px; padding: 0 0 4px; border-bottom: 1px solid var(--ink); font: 600 10px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-attrition .at-names .at-names-h span:nth-child(n + 3) { text-align: right; }
.m-attrition .at-sym { display: inline-block; padding: 7px 0; font: 800 17px/1.2 var(--serif); text-decoration: none; }
.m-attrition .at-sym:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.m-attrition .at-dircell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.m-attrition .at-dir { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.m-attrition .at-stale { font: italic 400 13.5px/1.2 var(--serif); color: var(--muted); }
.m-attrition .at-score { font: 500 14px/1 var(--mono); text-align: right; }
.m-attrition .at-grade { font: 400 13px/1 var(--mono); color: var(--muted); text-align: right; }

/* Caption under the chart */
.m-attrition .at-caption { font: italic 400 14px/1.5 var(--serif); color: var(--muted); margin: 12px 0 0; max-width: 780px; }

/* Pull quote: the single gate that stopped the most triggered setups */
.m-attrition .at-quote { margin: 34px 0 0 calc(var(--at-step) + var(--at-name) + 2 * var(--at-gap)); max-width: 760px; border-top: 2px solid var(--ink); padding-top: 14px; }
.m-attrition .at-quote blockquote { margin: 0; font: italic 400 clamp(22px, 2.5vw, 29px)/1.28 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.m-attrition .at-quote em { font-style: italic; }
.m-attrition .at-quote strong { font-style: normal; font-weight: 800; letter-spacing: -.01em; }
.m-attrition .at-quote .at-n { font-size: .8em; }
.m-attrition .at-quote figcaption { margin-top: 12px; font: italic 400 14px/1.45 var(--serif); color: var(--muted); }
.m-attrition .at-quote figcaption .at-n { color: var(--muted); }
.m-attrition .at-q-label { font: 600 10.5px/1.4 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; margin-right: 10px; }

/* No funnel yet: the status split of the setups this board records */
.m-attrition .at-split { margin-top: 26px; }
.m-attrition .at-tally { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 8px 22px; }
.m-attrition .at-tally li { display: flex; align-items: center; gap: 8px; }
.m-attrition .at-tally-n { font: 500 17px/1 var(--mono); }

/* Empty: the six steps as a typeset outline, counts still blank */
.m-attrition .at-outline { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.m-attrition .at-outline li { display: grid; gap: 6px; padding: 10px 12px 14px; border-left: 1px solid var(--rule); }
.m-attrition .at-outline li:first-child { border-left: 0; padding-left: 0; }
.m-attrition .at-outline .at-name { font-size: 19px; color: var(--muted); }
.m-attrition .at-outline .at-count { text-align: left; color: var(--rule); }

/* Narrow desktop and tablet: tighter numeric columns, the panel in one column */
@media (max-width: 980px) {
  .m-attrition { --at-name: 7.25rem; --at-count: 3.75rem; --at-lost: 4.25rem; --at-kept: 3.25rem; --at-gap: 14px; }
  .m-attrition .at-panel-in { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .m-attrition .at-why { margin-top: 6px; }
}

/* Phone: name and count on one line, the bar under them, the stopped / kept line under that */
@media (max-width: 760px) {
  .m-attrition { --at-step: 1.5rem; --at-gap: 12px; --at-bar-h: 14px; }
  .m-attrition .at-colhead { grid-template-columns: var(--at-step) minmax(0, 1fr); }
  .m-attrition .at-c-name, .m-attrition .at-c-count, .m-attrition .at-c-lost, .m-attrition .at-c-kept, .m-attrition .at-colhead > span:last-child { display: none; }
  .m-attrition .at-c-step { visibility: hidden; }
  .m-attrition .at-head {
    grid-template-columns: var(--at-step) minmax(0, 1fr) auto auto; row-gap: 8px; padding: 12px 0 11px;
    grid-template-areas: "step name count tog" ". track track track" ". meta meta meta";
  }
  .m-attrition .is-static.at-head { grid-template-areas: "step name count count" ". track track track" ". meta meta meta"; }
  .m-attrition .at-head .at-step { grid-area: step; align-self: baseline; padding-left: 0; }
  .m-attrition .at-head .at-name { grid-area: name; font-size: 19px; align-self: baseline; }
  .m-attrition .at-head .at-count { grid-area: count; align-self: baseline; }
  .m-attrition .at-head .at-track { grid-area: track; }
  .m-attrition .at-head .at-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 14px; align-self: center; }
  .m-attrition .at-lost, .m-attrition .at-kept { font-size: 12.5px; text-align: left; }
  .m-attrition .at-unit { position: static; width: auto; height: auto; overflow: visible; clip: auto; font: 400 12px/1 var(--sans); color: var(--muted); }
  .m-attrition .at-count .at-unit { margin-left: 2px; }
  .m-attrition .at-dash { display: none; }
  .m-attrition .at-scan-note { display: inline; font: 400 12px/1 var(--sans); color: var(--muted); }
  .m-attrition .at-head .at-tog { grid-area: tog; align-self: center; }
  /* Rows are tall and far apart here, so cut gridlines read as stray ticks; the ruler above carries the scale */
  .m-attrition .at-grid { display: none; }
  .m-attrition .is-worst .at-lost .at-unit { color: var(--accent); }
  .m-attrition .at-rise, .m-attrition .at-drop { display: none; }
  .m-attrition .at-panel { padding-left: calc(var(--at-step) + var(--at-gap)); }
  .m-attrition .at-panel-in { grid-template-columns: minmax(0, 1fr); }
  .m-attrition .at-desc { font-size: 16px; }
  .m-attrition .at-reasons li { grid-template-columns: minmax(0, 1fr) 2.5rem; grid-template-areas: "label n" "bar bar"; }
  .m-attrition .at-r-label { grid-area: label; }
  .m-attrition .at-r-n { grid-area: n; }
  .m-attrition .at-r-bar { grid-area: bar; height: 7px; }
  .m-attrition .at-quote { margin-left: 0; }
  .m-attrition .at-outline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-attrition .at-outline li { padding: 10px 10px 12px; }
  .m-attrition .at-outline li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .m-attrition .at-outline li:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .m-attrition .at-outline .at-name { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-attrition .at-bar { clip-path: none !important; transition: none !important; }
  .m-attrition .at-ghost, .m-attrition .at-rise, .m-attrition .at-drop, .m-attrition .at-none { transition: none !important; }
}