/* The ENTER corner: a scatter of the board by score and reward to risk. Every selector is scoped under .m-corner. */
.m-corner .cn-n { font: 400 .86em/1 var(--mono); font-style: normal; letter-spacing: -.02em; }
.m-corner.story-sec > h2 { text-wrap: balance; }
.m-corner .cn-head2 { display: block; margin-top: .1em; font-size: .62em; line-height: 1.15; letter-spacing: -.01em; color: var(--muted); }
.m-corner .dek { text-wrap: pretty; }
.m-corner .dek b { font-weight: 600; font-style: normal; font-family: var(--sans); font-size: .82em; letter-spacing: .02em; color: var(--ink); }

/* Controls: direction toggle on the left, the key on the right */
.m-corner .cn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--ink); }
.m-corner .cn-dirs { display: flex; align-items: center; gap: 12px; }
.m-corner .cn-bar-l { font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.m-corner .chip { min-height: 34px; padding: 6px 12px; font-weight: 600; }
.m-corner .cn-cc { font: 400 11.5px/1 var(--mono); margin-left: 3px; opacity: .75; }
.m-corner .cn-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12px/1.3 var(--sans); color: var(--ink); }
.m-corner .cn-key li { display: inline-flex; align-items: center; gap: 6px; }
.m-corner .cn-key li.is-zero { color: var(--muted); }
.m-corner .cn-kc { font: 400 11.5px/1 var(--mono); color: var(--muted); }
.m-corner .cn-key-dir { padding-left: 18px; border-left: 1px solid var(--rule); }
.m-corner .cn-key-dir span + .cn-glyph { margin-left: 8px; }
.m-corner .cn-glyph { flex: none; overflow: visible; vertical-align: middle; }
.m-corner .cn-readout { margin: 10px 0 0; font: 13px/1.5 var(--sans); color: var(--muted); min-height: 1.5em; }
.m-corner .cn-readout b { color: var(--ink); font-weight: 600; }
.m-corner .cn-readout .cn-n { color: var(--ink); font-size: .92em; }

/* The figure */
.m-corner .cn-fig { margin: 18px 0 0; }
.m-corner .cn-note { position: absolute; top: 0; right: 12px; width: max-content; margin: 0; text-align: right; font: italic 400 15px/1.4 var(--serif); color: var(--ink); pointer-events: none; }
.m-corner .cn-note em { font-style: italic; }
.m-corner .cn-note em + em { display: block; color: var(--muted); }
.m-corner .cn-swatch { display: inline-block; width: 14px; height: 11px; margin-right: 7px; vertical-align: -1px; border: 1.5px solid var(--accent); border-width: 0 0 1.5px 1.5px;
  background: repeating-linear-gradient(135deg, var(--accent) 0 1px, transparent 1px 4.243px); }
.m-corner .cn-plot { position: relative; outline: none; }
.m-corner .cn-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.m-corner .cn-plot.is-over { cursor: pointer; }
.m-corner .cn-svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.m-corner .cn-hint { margin: 6px 0 0; font: 12px/1.4 var(--sans); color: var(--muted); height: 0; overflow: hidden; }
.m-corner .cn-plot:focus-visible + .cn-hint { height: auto; }
.m-corner .cn-cap { margin: 14px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); max-width: 820px; font: italic 400 14px/1.5 var(--serif); color: var(--muted); }
.m-corner .cn-cap .cn-n { color: var(--ink); }

/* SVG: frame and type */
.m-corner .cn-grid line { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.m-corner .cn-axis { stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.m-corner .cn-thr { stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.m-corner .cn-band-rule { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.m-corner .cn-aplus { stroke: var(--accent); stroke-width: 1; stroke-opacity: .55; shape-rendering: crispEdges; }
.m-corner .cn-edge { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: square; }
.m-corner .cn-hatch-l { stroke: var(--accent); stroke-width: 1.1; stroke-opacity: .5; }
.m-corner .cn-tick { font: 400 11px var(--mono); fill: var(--muted); }
.m-corner .cn-tick.is-key { fill: var(--ink); font-weight: 500; }
.m-corner .cn-tickmark { stroke: var(--muted); stroke-width: 1; shape-rendering: crispEdges; }
.m-corner .cn-tickmark.is-key { stroke: var(--ink); }
.m-corner .cn-band { font: 600 10px var(--sans); letter-spacing: .12em; fill: var(--muted); }
.m-corner .cn-band.is-key { fill: var(--accent); }
.m-corner .cn-axtitle { font: 600 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.m-corner .cn-leader { fill: none; stroke: var(--ink); stroke-width: 1; }
.m-corner .cn-leader-dot { fill: var(--ink); }
.m-corner .cn-floor { font: italic 400 12.5px var(--serif); fill: var(--muted); }
.m-corner .cn-emptymsg { font: italic 400 17px var(--serif); fill: var(--muted); }

/* Marks: shape and fill carry the status, the triangle's point carries the direction */
.m-corner .cn-under { fill: var(--paper); stroke: var(--paper); stroke-width: 4; stroke-linejoin: round; }
.m-corner .cn-m { stroke-linejoin: round; }
.m-corner .cn-m-ENTER { fill: var(--green); stroke: var(--green); stroke-width: 1; }
.m-corner .cn-m-PENDING { fill: var(--violet); stroke: var(--violet); stroke-width: 1; }
.m-corner .cn-m-WAIT { fill: var(--paper); stroke: var(--amber); stroke-width: 1.7; }
.m-corner .cn-m-AVOID { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.m-corner .cn-glyph.is-ink .cn-m { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.m-corner .cn-pt.is-sel .cn-m-AVOID { stroke: var(--ink); }

/* Direct labels, with a paper halo so they read over the hatch and the rules */
.m-corner .cn-lab { font: 600 11.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
.m-corner .cn-lab-note { font: italic 400 12.5px var(--serif); fill: var(--muted); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
.m-corner .cn-lead { stroke: var(--ink); stroke-width: .8; }
.m-corner .cn-label { cursor: pointer; }
.m-corner .cn-label.is-sel .cn-lab { text-decoration: underline; text-decoration-color: var(--accent); }
.m-corner .cn-pin { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.m-corner .cn-pin-t { font: 500 10.5px var(--mono); fill: var(--ink); }

/* Hover / keyboard selection: a ring, hairline guides to both axes, and the values set on the axes */
.m-corner .cn-ring { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.m-corner .cn-guide { stroke: var(--ink); stroke-width: 1; stroke-opacity: .45; shape-rendering: crispEdges; }
.m-corner .cn-tag { fill: var(--ink); }
.m-corner .cn-tag-t { font: 500 10.5px var(--mono); fill: var(--paper); }
.m-corner .has-sel .cn-marks .cn-pt:not(.is-sel) { opacity: .55; }
.m-corner .has-sel .cn-labels .cn-label:not(.is-sel) { opacity: .55; }

/* Tooltip (the shared .tip, laid out for this chart) */
.m-corner .cn-tip { white-space: normal; width: max-content; max-width: min(300px, calc(100% - 4px)); padding: 9px 12px 10px; color: var(--ink); }
.m-corner .cn-tip-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.m-corner .cn-tip-sym { font: 800 20px/1 var(--serif); letter-spacing: -.01em; }
.m-corner .cn-tip-dir { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-corner .cn-tip-dir .cn-glyph { width: 12px; height: 12px; }
.m-corner .cn-tip-h .badge { margin-left: auto; }
.m-corner .cn-tip-setup { margin-top: 3px; font: italic 400 13.5px/1.3 var(--serif); color: var(--muted); }
.m-corner .cn-tip-nums { display: flex; gap: 0 16px; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid var(--rule); }
.m-corner .cn-tip-nums div { min-width: 0; }
.m-corner .cn-tip-nums dt { font: 600 9.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-corner .cn-tip-nums dd { margin: 0; font: 500 15px/1.3 var(--mono); }
.m-corner .cn-tip-nums dd small { font: 600 11px/1 var(--sans); color: var(--muted); }
.m-corner .cn-tip-nums .cn-tip-where { font: 12px/1.3 var(--sans); padding-top: 2px; }
.m-corner .cn-tip-gate { margin-top: 7px; padding-top: 6px; border-top: 1px dotted var(--rule); font: 12.5px/1.4 var(--sans); }
.m-corner .cn-tip-gate > span:first-child { display: block; font: 600 9.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-corner .cn-tip-go { margin-top: 6px; font: italic 400 12px/1.3 var(--serif); color: var(--muted); }
.m-corner .cn-gs { font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.m-corner .cn-gs-fail { color: var(--red); }
.m-corner .cn-gs-wait { color: var(--amber); }
.m-corner .cn-gs-pending { color: var(--violet); }
.m-corner .cn-in { color: var(--accent); font-weight: 600; }

/* The table alternative */
.m-corner .cn-tablebox { margin-top: 18px; }
.m-corner .cn-disclose { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.m-corner .cn-disclose:hover .cn-disclose-t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.m-corner .cn-tog { width: 20px; height: 20px; border: 1px solid var(--ink); position: relative; flex: none; }
.m-corner .cn-tog::before, .m-corner .cn-tog::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.m-corner .cn-tog::before { width: 9px; height: 1.5px; }
.m-corner .cn-tog::after { width: 1.5px; height: 9px; }
.m-corner .cn-disclose[aria-expanded="true"] .cn-tog::after { display: none; }
.m-corner .cn-tbl { margin-top: 10px; }
.m-corner .cn-tbl-note { margin: 0 0 8px; font: italic 400 14px/1.4 var(--serif); color: var(--muted); }
.m-corner .cn-tbl td { vertical-align: middle; }
.m-corner .cn-tbl td.num { font-size: 14px; }
.m-corner .cn-tsym { display: inline-block; padding: 8px 8px 8px 0; margin: -8px 0; font: 800 16px/1 var(--serif); }
.m-corner .cn-tdir { display: inline-flex; align-items: center; gap: 5px; }
.m-corner .cn-tdir .cn-glyph { width: 12px; height: 12px; }
.m-corner .cn-tg { font: 600 11px/1 var(--sans); color: var(--muted); }

/* Ink in: the corner's edge draws, the hatch lands, then the marks set left to right and the labels follow. */
.m-corner .cn-pop { transform-box: fill-box; transform-origin: center; }
.m-corner .is-pre .cn-pop, .m-corner .is-pre .cn-labels, .m-corner .is-pre .cn-pins, .m-corner .is-pre .cn-corner,
.m-corner .is-pre .cn-edge, .m-corner .is-pre .cn-aplus, .m-corner .is-pre .cn-leader, .m-corner .is-pre .cn-leader-dot, .m-corner .is-pre .cn-note { opacity: 0; }
.m-corner .is-in .cn-edge { animation: cn-draw 700ms cubic-bezier(.3, .1, .2, 1) 120ms both; }
.m-corner .is-in .cn-corner, .m-corner .is-in .cn-aplus { animation: cn-fade 600ms ease-out 520ms both; }
.m-corner .is-in .cn-note, .m-corner .is-in .cn-leader, .m-corner .is-in .cn-leader-dot { animation: cn-fade 500ms ease-out 760ms both; }
.m-corner .is-in .cn-pop { animation: cn-set 460ms cubic-bezier(.2, .9, .3, 1.25) var(--d, 400ms) both; }
.m-corner .is-in .cn-labels, .m-corner .is-in .cn-pins { animation: cn-fade 500ms ease-out 1300ms both; }
.m-corner .is-swap .cn-pop, .m-corner .is-swap .cn-labels { animation: cn-fade 260ms ease-out both; }
@keyframes cn-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes cn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cn-set { from { opacity: 0; transform: scale(.2); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .m-corner .cn-bar { gap: 12px; }
  .m-corner .cn-key { gap: 6px 14px; }
  .m-corner .cn-key-dir { padding-left: 0; border-left: 0; }
  .m-corner .cn-note { font-size: 14px; }
  .m-corner .cn-head2 { font-size: .7em; }
}
@media (prefers-reduced-motion: reduce) {
  .m-corner .cn-plot *, .m-corner .cn-plot { animation: none !important; }
}