/* kit-ext4.css — the marks of the Affiliates page (24 Oct 2026; KIT.md section 11). Load after kit-ext3.css, before app.css.
   Styles of shell-ext4.js (S.statusRing, S.ival, S.gauge, S.moneyFlow) and of the composition classes the Affiliates page shares with the next E pages: the door, the E window sheet,
   the wide stat figure, the quiet select chip. Every value is a token of kit.css 6.1; nothing here is below 12 px; hues come from the --hue-* tokens. */

/* ---------- the status ring ---------- */
.e-sr{display:inline-block;vertical-align:middle;flex:none;overflow:visible}
.e-sr text.n{font-size:var(--fs-micro);font-weight:700;fill:var(--color-text);font-family:inherit}
.e-sr circle.soft{stroke-opacity:.45}

/* ---------- the interval mark and its axis ---------- */
.e-iv{display:inline-block;vertical-align:middle;overflow:visible;flex:none}
.e-iv-axis{display:block;overflow:visible}
.e-iv-axis text.t{font-size:var(--fs-micro);fill:var(--color-text-muted);font-family:inherit}

/* ---------- the gauge ---------- */
.e-gauge{display:block;overflow:visible;max-width:100%}
.e-gauge text{font-family:inherit}
.e-gauge text.g{font-size:var(--fs-micro);font-weight:600;fill:var(--color-text)}
.e-gauge text.big{font-size:22px;font-weight:700;letter-spacing:-.02em}
.e-gauge text.t{font-size:var(--fs-micro);fill:var(--color-text-muted)}

/* ---------- the money flow ---------- */
.e-mf{display:block;width:100%;min-width:0;max-width:640px}
.e-mf-svg{display:block;max-width:100%;overflow:visible}
.e-mf-svg text{font-family:inherit;font-size:var(--fs-micro);fill:var(--color-text)}
.e-mf-svg text.h{fill:var(--color-text-muted);font-weight:500}
.e-mf-svg text.l{font-size:var(--fs-small);font-weight:500}
.e-mf-svg text.l.b{font-weight:700}
.e-mf-svg text.m{fill:var(--color-text-muted)}
.e-mf-svg text.o{fill:var(--hue-rose);font-weight:600}
.e-mf-svg text.d{font-size:var(--fs-small);font-weight:700}
.e-mf-svg text.dv{font-size:var(--fs-small);font-weight:600}
.e-mf-svg g.src[role=button]{cursor:pointer;outline:none}
.e-mf-svg g.src[role=button]:focus-visible .hit{stroke:var(--hue-blue);stroke-width:2;rx:6}
.e-mf-svg g.src[role=button]:hover text.l{fill:var(--color-action)}
.e-mf-empty{margin:0;font-size:var(--fs-small);color:var(--color-text-muted)}

/* ---------- the door: a quiet pill that opens a window (it reads, it never acts) ---------- */
.e-door{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;height:32px;border:0;border-radius:var(--radius-pill);padding:0 14px;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--hue-blue);background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--hue-blue);cursor:pointer;transition:background-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.e-door:hover{background:var(--hue-blue-t)}
.e-door:active{transform:scale(.98)}
.e-door:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 1.5px var(--hue-blue),var(--focus-ring)}

/* ---------- a wide stat figure: seven characters or more are set at 32 px so the figure clears the card's badge ---------- */
.e-st .v.fit{font-size:32px;margin-top:22px}

/* ---------- the quiet select inside a criteria chip (the book chip) ---------- */
.e-cr .e-sel{font-weight:600;color:var(--ink-blue);padding-right:14px}
.e-cr.is-quiet{background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);color:var(--color-text-muted)}
.e-cr.is-quiet b{color:var(--color-text)}

/* ---------- the foot of an E page when a role has no export: its words take a line of their own under the figures and the links ---------- */
.e-foot .e-foot-note{flex:0 0 100%}

/* ---------- the E window sheet: the canvas under white sections, 936 px at 1000 px (add class e-win to the dialog that S.window returns) ---------- */
dialog.sx-win.e-win{width:min(936px,calc(100vw - 32px));background:var(--color-canvas);border-radius:18px}
dialog.sx-win.e-win .sx-win-panel{padding:18px 24px 20px}
dialog.sx-win.e-win .sx-win-title{font-size:var(--fs-title);font-weight:600;letter-spacing:var(--ls-title);display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
dialog.sx-win.e-win .sx-win-sub{margin-left:0}
dialog.sx-win.e-win .sx-win-tabs{margin:12px 0 12px}
dialog.sx-win.e-win .sx-win-x{background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule)}
dialog.sx-win.e-win .e-sec h4{display:flex;align-items:center;flex-wrap:wrap}
/* the "?" of a section title, a block header, a column head or the foot of an E page: the same mark as in a panel title (kit-ext3.css draws it for .e-pt, .e-held, .e-band) */
:is(.e-sec h4,.e-lh,.e-foot,.e-mini,.aff-h) .i{width:16px;height:16px;border:1.5px solid var(--color-text-muted);color:var(--color-text-muted);margin-left:6px;vertical-align:1px;background:transparent}
:is(.e-sec h4,.e-lh,.e-foot,.e-mini,.aff-h) .i svg{display:none}
:is(.e-sec h4,.e-lh,.e-foot,.e-mini,.aff-h) .i::before{content:"?";font-size:10px;font-weight:700;line-height:1}
:is(.e-sec h4,.e-lh,.e-foot,.e-mini,.aff-h) .i:hover{color:var(--color-action);border-color:var(--color-action)}
:is(.e-sec h4,.e-lh,.e-foot,.e-mini,.aff-h) .i[aria-expanded=true]{background:var(--color-action);border-color:var(--color-action);color:#fff}
@media (max-width:600px){dialog.sx-win.e-win{width:100vw;border-radius:0}dialog.sx-win.e-win .sx-win-panel{padding:14px 14px 18px}}