/* kit-ext3.css — the concept E marks (23 Oct 2026; KIT.md section 10). Load after kit.css, kit-ext.css, kit-ext2.css; before app.css.
   Translated from the stylesheet block of front/sketches/make_inspired.py (83 rules), with every value taken from the tokens of kit.css 6.1 (--hue-*, --color-*, --shadow-*,
   --radius-*, --fs-*, --ease-*). Classes carry the e- prefix. Rules of the grammar that live in CSS: panels carry no border, only the shadow ring; tabular numerals are inherited from html;
   the focus ring of an E mark is a box-shadow (--focus-ring); nothing below 12 px (E's 10 and 11 px labels read 12 here, the render gate's floor); motion is 100 ms on hover and press,
   150 ms on a popup, and prefers-reduced-motion switches all of it off (kit.css). */

/* ---------- hues: one custom property set per hue, read by every mark ---------- */
.h-blue{--h:var(--hue-blue);--ht:var(--hue-blue-t);--hb:var(--hue-blue-b);--hi:var(--ink-blue)}
.h-teal{--h:var(--hue-teal);--ht:var(--hue-teal-t);--hb:var(--hue-teal-b);--hi:var(--ink-ok)}
.h-rose{--h:var(--hue-rose);--ht:var(--hue-rose-t);--hb:var(--hue-rose-b);--hi:var(--ink-danger)}
.h-amber{--h:var(--hue-amber);--ht:var(--hue-amber-t);--hb:var(--hue-amber-b);--hi:var(--ink-warn);--hf:var(--hue-amber-fig)}
.h-slate{--h:var(--hue-slate);--ht:var(--hue-slate-t);--hb:var(--hue-slate-b);--hi:var(--hue-slate)}
.h-ink{--h:var(--hue-ink);--ht:var(--hue-slate-t);--hb:var(--hue-slate-b);--hi:var(--hue-ink)}
/* --hi is the text ink of a hue (lens fe-5: a 12 px word or pill on its own tint reads 4.5:1); --h stays the fill, the bar, the icon and the 40 px figure */

/* ---------- icons, badges, pills, change arrows ---------- */
.e-ic{display:inline-block;vertical-align:middle;flex:none}
.e-ib{width:28px;height:28px;border-radius:8px;display:inline-grid;place-items:center;color:#fff;flex:none;background:var(--h)}
.e-pill{display:inline-flex;align-items:center;height:22px;border-radius:var(--radius-pill);padding:0 9px;font-size:var(--fs-micro);font-weight:600;white-space:nowrap;line-height:1;background:var(--ht);color:var(--hi,var(--h));border:0;font-family:inherit}
.e-pill.h-slate,.e-pill.h-ink{color:var(--color-text)}
.e-pill b{margin-left:4px;font-weight:700}
.e-pill.solid{background:var(--h);color:#fff}
.e-pill.outline{background:var(--color-surface);color:var(--color-text-muted);box-shadow:inset 0 0 0 1px var(--color-rule)}
.e-pill.outline b{color:var(--color-text)}
.e-pill.as-btn{cursor:pointer;transition:box-shadow var(--dur-press) var(--ease-out),background-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.e-pill.as-btn:hover{box-shadow:inset 0 0 0 1px var(--h)}
.e-pill.as-btn:active{transform:scale(.97)}
.e-pill.as-btn[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--color-action);background:var(--color-selected);color:var(--color-text)}
.e-pill.as-btn:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.e-chg{font-weight:600;white-space:nowrap}
.e-chg.good{color:var(--ink-ok)}
.e-chg.bad{color:var(--ink-danger)}
.e-chg.flat{color:var(--color-text-muted);font-weight:500}
.e-pl{display:block;overflow:visible}

/* ---------- bars and ledger rows ---------- */
.e-bar{display:inline-block;background:var(--color-rule-soft);border-radius:var(--radius-pill);vertical-align:middle;overflow:hidden;width:100%;height:8px}
.e-bar i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--h)}
.e-lr{display:grid;grid-template-columns:var(--c,112px 1fr 44px);column-gap:10px;align-items:center;height:24px;font-size:var(--fs-small)}
.e-lr .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-lr .v{text-align:right;font-weight:600}
.e-lr .v .s{color:var(--color-text-muted);font-weight:400;font-size:var(--fs-micro);margin-left:5px}
.e-lr.bold .l,.e-lr.bold .v{font-weight:700}
.e-lr.indent .l{padding-left:14px;color:var(--color-text-muted)}
.e-db,.e-sb,.e-hr,.e-ring{display:inline-block;vertical-align:middle;overflow:visible}

/* ---------- avatar, day cells, gate dots, campaign day line ---------- */
.e-av{display:inline-grid;place-items:center;border-radius:50%;font-weight:700;letter-spacing:.01em;box-shadow:0 0 0 3px var(--color-surface);position:relative;z-index:1;background:var(--ht);color:var(--hi,var(--h));flex:none}
.e-days{display:inline-flex;gap:3px;align-items:flex-end}
.e-days i{flex:none;width:clamp(3px,calc(190px / var(--n,14) - 3px),12px);height:16px;border:1px solid var(--color-text);display:block;border-radius:2px}
.e-days i.on{background:var(--color-text)}
.e-days i.today{border-color:var(--hue-blue);background:var(--hue-blue)}
.e-days i.ret{border-color:var(--hue-rose);border-style:dashed}
.e-days i.ret.today{background:var(--hue-blue)}
.e-days i.ret.passed{background:var(--hue-rose);border-style:solid}
.e-gd{display:inline-flex;align-items:center;gap:8px}
.e-gd .dots{display:inline-flex;gap:3px}
.e-gd .dots i{width:8px;height:8px;border-radius:50%;display:block}
.e-gd .dots i.ok{background:var(--hue-teal)}
.e-gd .dots i.no{background:var(--hue-rose)}
.e-gd .t{font-size:var(--fs-micro);color:var(--color-text-muted)}
.e-dl{display:block;overflow:visible}
.e-dl text.t{font-size:12px;fill:var(--color-text-muted);font-family:inherit}
.e-dl text.t.b{font-weight:600;fill:var(--color-text)}

/* ---------- the proposal card and the pipeline ---------- */
.e-prop{background:var(--color-canvas);border-radius:10px;padding:7px 10px 8px 12px;border:1px solid var(--color-rule-soft);min-width:0}
.e-prop .t{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-weight:600;font-size:var(--fs-small)}
.e-prop .t .n{min-width:0}
.e-prop .t b.pri{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1;text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;flex:none}
.e-prop .t b.pri small{font-size:var(--fs-micro);font-weight:500;color:var(--color-text-muted);letter-spacing:0;line-height:1;margin-bottom:3px}
.e-prop .ev{font-size:var(--fs-micro);color:var(--color-text-muted);margin-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.e-prop .ev.inl{display:block}
.e-prop .ev b{color:var(--hue-blue);font-weight:600}
.e-prop .ev .ht{min-width:0}
.e-pipe{position:relative}
.e-pipe::before{content:"";position:absolute;left:35px;top:0;bottom:0;width:2px;background:var(--color-rule-soft)}
.e-pr{display:grid;grid-template-columns:36px minmax(0,1fr) 204px;gap:14px;align-items:center;padding:7px 18px;border-bottom:1px solid var(--color-rule-soft);position:relative;cursor:pointer;transition:background-color var(--dur-press) var(--ease-out)}
.e-pr:last-child{border-bottom:0}
.e-pr:hover{background:var(--color-surface-hover)}
.e-pr.sel{background:var(--color-selected-row)}
.e-pr.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hue-blue);z-index:2}
.e-pr.sel .e-prop{background:var(--color-surface)}
.e-pr:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--hue-blue)}
.e-pr .mid{min-width:0}
.e-pr .l1{display:flex;align-items:center;gap:10px;min-height:22px;min-width:0}
.e-pr .l1 b{font-size:var(--fs-body);font-weight:600;white-space:nowrap}
.e-pr .l1 .m{font-size:var(--fs-micro);color:var(--color-text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-pr .l2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;font-size:var(--fs-micro);color:var(--color-text-muted);min-width:0}
.e-pr .l2 .tags{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.e-pr .dl{font-weight:600;white-space:nowrap;color:var(--color-text-muted)}
.e-pr .dl.soon{color:var(--ink-warn)}
.e-pr .dl.late{color:var(--ink-danger)}
.e-pr .dl.z{font-weight:400}

/* ---------- panels ---------- */
.e-panel{background:var(--color-surface);box-shadow:var(--shadow-panel);border-radius:var(--radius-m);padding:16px 20px 14px;min-width:0;transition:box-shadow var(--dur-press) var(--ease-out)}
.e-panel:hover{box-shadow:var(--shadow-panel-hover)}
.e-pt{font-size:var(--fs-body);font-weight:600;margin:0 0 10px;letter-spacing:-.005em;display:flex;align-items:center;flex-wrap:wrap;gap:0}
.e-panel.rcard{padding:12px 16px 10px}
.e-panel.rcard .e-pt{font-size:var(--fs-small);margin-bottom:6px}
.e-panel.list{padding:0;overflow:hidden;position:relative}
.e-panel.list .ph{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;min-height:40px;padding:6px 18px;border-bottom:1px solid var(--color-rule);background:var(--color-canvas);font-size:var(--fs-micro);color:var(--color-text-muted);font-weight:500;flex-wrap:wrap}
.e-panel.list .ph .e-pt{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;font-weight:500}
.e-panel.list .ph .e-pt b{color:var(--color-text);font-weight:600;font-size:var(--fs-small)}
.e-panel.list .tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.e-panel+.e-panel.rcard{margin-top:12px}
:is(.e-pt,.e-st .nfo,.e-held,.e-dark h4,.e-band) .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-pt,.e-st .nfo,.e-held,.e-dark h4,.e-band) .i svg{display:none}
:is(.e-pt,.e-st .nfo,.e-held,.e-dark h4,.e-band) .i::before{content:"?";font-size:10px;font-weight:700;line-height:1}
:is(.e-pt,.e-st .nfo,.e-held,.e-dark h4,.e-band) .i:hover{color:var(--color-action);border-color:var(--color-action)}
:is(.e-pt,.e-st .nfo,.e-held,.e-dark h4,.e-band) .i[aria-expanded=true]{background:var(--color-action);border-color:var(--color-action);color:#fff}
.e-dark h4 .i{border-color:#ffffff80;color:#ffffffb3}

/* ---------- stat cards and the strip ---------- */
.e-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px}
.e-st{position:relative;border:1px solid var(--hb);border-radius:var(--radius-l);padding:16px 18px 14px;min-height:126px;box-shadow:0 1px 2px #10182808;background:linear-gradient(165deg,var(--ht),var(--color-surface) 78%);min-width:0}
.e-st .e-ib{position:absolute;top:14px;right:14px}
.e-st .nfo{position:absolute;right:14px;bottom:12px;line-height:0}
.e-st .nfo .i{margin-left:0}
.e-st .v{font-size:var(--fs-stat);font-weight:700;letter-spacing:var(--ls-fig);line-height:1;margin:16px 0 8px;white-space:nowrap;color:var(--hf,var(--h))}
.e-st.h-slate .v{color:var(--color-text)}
.e-st .v.txt{font-size:var(--fs-title);font-weight:600;letter-spacing:0;line-height:1.2;margin:18px 0 12px;color:var(--color-text-muted)}
.e-st .v .u{font-size:.5em;font-weight:600;opacity:.75;margin-right:.06em;vertical-align:.28em}
.e-st .v .sx-count{font:inherit;letter-spacing:inherit;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.e-st .lab{font-size:var(--fs-small);font-weight:600}
.e-st .sub{font-size:var(--fs-micro);color:var(--color-text-muted);margin-top:3px;max-width:100%}
.e-st .sub.full{max-width:100%}
.e-st .sub b{color:var(--color-text);font-weight:600}
/* K1 (26 Oct 2026): the figure has a band of its own and the pulse line sits in it, right-aligned under the corner badge (never under the label or the sub line); its cell is a size container and the line
   is not drawn when the figure leaves less than 92 px (84 + 8); the "?" keeps the lower right corner and the last text line keeps 18 px clear of it (zero specificity: a page may set its own) */
.e-st .hd{display:flex;align-items:flex-start}
.e-st .hd .v{flex:none}
.e-st .hd .sp{flex:1 1 0;min-width:0;container-type:inline-size;height:22px;margin:34px -7px 0 0;padding-right:3px;display:flex;justify-content:flex-end;align-items:center}
@container (max-width:91px){.e-st .hd .sp .e-pl{display:none}}
@supports not (container-type:inline-size){.e-st .hd .sp{display:none}}
.e-st .hd .v.txt~.sp{display:none}
.e-st:where(:has(.nfo)) :where(.sub,.lab:last-child){padding-right:18px}

/* ---------- the dated list, the rank arithmetic, chip row, foot, band ---------- */
.e-dated{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--color-rule-soft)}
.e-dated li{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;font-size:var(--fs-micro);line-height:1.35;padding:1px 0 3px}
.e-dated li::before{content:"";position:absolute;left:-18px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--color-text)}
.e-dated li:first-child::before{background:var(--hue-blue)}
.e-dated li .d{color:var(--color-text-muted)}
.e-dated li b{font-weight:600}
.e-rank{padding:8px 10px;border-radius:10px;background:var(--color-canvas);font-size:var(--fs-micro);line-height:1.5;margin-bottom:8px}
.e-rank b{font-weight:600}
.e-rank .eq{color:var(--color-text-muted)}
.e-held{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-micro);color:var(--color-text-muted)}
.e-held .aside{margin-left:auto}
.e-foot{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;font-size:var(--fs-micro);color:var(--color-text-muted)}
.e-foot .l{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.e-foot .r{display:flex;gap:18px;flex-wrap:wrap}
.e-fl-link{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:2px 0;font:inherit;font-size:var(--fs-micro);font-weight:500;color:var(--color-text);cursor:pointer;text-decoration:none;border-radius:3px}
.e-fl-link:hover{color:var(--color-action);text-decoration:underline;text-underline-offset:3px}
.e-fl-link:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.e-band{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;min-height:48px;padding:0 20px;background:var(--color-surface);border-radius:var(--radius-m);box-shadow:var(--shadow-panel)}
.e-band h2{font-size:var(--fs-lead);font-weight:600;margin:0;letter-spacing:var(--ls-title);display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.e-band h2 span{color:var(--color-text-muted);font-weight:400;font-size:var(--fs-small);letter-spacing:0}
.e-band .rl{max-width:100%;overflow:hidden}
.e-ruler{display:block;max-width:100%;height:auto;overflow:visible}
.e-ruler text.t{font-size:12px;fill:var(--color-text-muted);font-family:inherit}
.e-ruler text.t.b{font-weight:600;fill:var(--color-text)}
.e-ruler text.t.b.blue{fill:var(--hue-blue)}

/* ---------- the navy card ---------- */
.e-dark{background:linear-gradient(160deg,var(--hue-navy-1),var(--hue-navy-2));color:#fff;border-radius:var(--radius-l);padding:16px 20px 14px;box-shadow:0 12px 32px -12px #0b173066}
.e-dark h4{font-size:var(--fs-small);font-weight:600;margin:0 0 6px;color:#ffffffb3;display:flex;align-items:center}
.e-dark .hero{font-size:var(--fs-hero);font-weight:700;letter-spacing:var(--ls-fig);line-height:1}
.e-dark .hero small{font-size:var(--fs-body);font-weight:600;letter-spacing:0;margin-left:8px;color:#ffffffb3}
.e-dark .val{font-size:var(--fs-small);color:#ffffffb3;margin-top:6px}
.e-dark .val b{color:#fff;font-weight:600}
.e-dark .hr{display:flex;align-items:center;gap:14px;margin-top:10px}
.e-dark .leg{font-size:var(--fs-micro);color:#ffffffb3}
.e-dark .leg .lt{color:#fff;font-weight:600;margin-bottom:4px}
.e-dark .leg div{display:flex;align-items:center;gap:6px;margin:3px 0}
.e-dark .leg i{width:8px;height:8px;border-radius:50%;display:inline-block}
.e-dark .leg b{color:#fff;font-weight:600}

/* ---------- the market-style table and the library form ---------- */
.e-mt{width:100%;border-collapse:collapse}
.e-mt th{font-size:var(--fs-micro);color:var(--color-text-muted);font-weight:500;text-align:left;padding:0 8px 8px 0;border-bottom:1px solid var(--color-rule)}
.e-mt th.r,.e-mt td.r{text-align:right}
.e-mt th.c,.e-mt td.c{text-align:center}
.e-mt td{height:38px;border-bottom:1px solid var(--color-rule-soft);padding:0 8px 0 0;vertical-align:middle;font-size:var(--fs-small)}
.e-mt tr:last-child td{border-bottom:0}
.e-mt td b{font-weight:600}
.e-mt tr.off td{color:var(--color-text-muted)}
.e-mt tr.sel td{background:var(--color-selected-row)}
.e-mt tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--hue-blue)}
.e-mt .e-fl{font-size:var(--fs-lead);margin-right:8px;vertical-align:-1px}
.e-mt .count{display:inline-flex;align-items:center;height:22px;border-radius:var(--radius-pill);padding:0 9px;font-size:var(--fs-micro);font-weight:600;background:var(--color-canvas)}
.e-mt .rg{display:inline-flex;align-items:center;gap:8px}
.e-mt .rg b{font-size:var(--fs-small)}
.e-mt .rg span{font-size:var(--fs-micro);color:var(--color-text-muted);display:block;line-height:1.2}
.e-mt.lib td{height:56px;padding:0 8px 0 0}
.e-mt.lib td .s{color:var(--color-text-muted);font-size:var(--fs-micro);display:block}
.e-mt.lib td:first-child,.e-mt.lib th:first-child{padding-left:12px}
.e-cmp{display:grid;grid-template-columns:1fr 46px;column-gap:8px;row-gap:3px;align-items:center;font-size:var(--fs-micro);color:var(--color-text-muted);max-width:170px}
.e-cmp b{color:var(--color-text);font-weight:600}
.e-fl{display:inline-block}

/* ---------- classes of the sketch kit with no primitive yet (compose them in the page): window sections, campaign card, tiers, minis, criteria ---------- */
.e-sec{background:var(--color-surface);box-shadow:var(--shadow-panel);border-radius:var(--radius-m);padding:14px 18px 12px}
.e-sec h4{font-size:var(--fs-body);font-weight:600;margin:0 0 8px;display:flex;align-items:center}
.e-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.e-lh{font-size:var(--fs-micro);color:var(--color-text-muted);font-weight:500;min-height:24px;display:flex;align-items:center;border-bottom:1px solid var(--color-rule-soft);margin-bottom:2px}
.e-lh b{color:var(--color-text);font-weight:600;margin-right:5px}
.e-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}
.e-tiers .v{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.e-tiers .n{font-size:var(--fs-micro);color:var(--color-text-muted);margin-top:3px;display:flex;gap:6px;align-items:center}
.e-cells{display:grid;grid-template-columns:repeat(4,1fr);margin-top:7px}
.e-cells b{display:block;font-size:var(--fs-small);font-weight:600;line-height:1.2}
.e-cells span{font-size:var(--fs-micro);color:var(--color-text-muted)}
.e-camp{background:var(--color-surface);box-shadow:var(--shadow-panel);border-radius:var(--radius-m);padding:12px 14px 10px}
.e-camp .ch{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.e-camp .ch b{font-weight:600;font-size:var(--fs-small);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-camp .ct{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.e-camp .sofar{margin-top:8px;padding-top:6px;border-top:1px solid var(--color-rule-soft)}
.e-minis{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.e-mini{display:inline-flex;align-items:baseline;gap:7px;font-size:var(--fs-micro);color:var(--color-text-muted)}
.e-mini b{font-size:var(--fs-lead);font-weight:700;color:var(--color-text);letter-spacing:var(--ls-title)}
.e-crit{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.e-cr{height:32px;display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-s);padding:0 10px 0 12px;font-size:var(--fs-small);background:var(--hue-blue-t);box-shadow:inset 0 0 0 1px var(--hue-blue-b);color:var(--color-text)}
.e-cr b{font-weight:600;color:var(--ink-blue)}
.e-cr.add{background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);color:var(--color-text-muted)}
.e-menu{display:flex;flex-wrap:wrap;gap:6px}
.e-menu span{height:24px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:0 10px;font-size:var(--fs-micro);color:var(--color-text-muted);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule)}
.e-btns{display:flex;gap:8px;margin-top:12px}
.e-btns .b{height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-s);padding:0 12px;font-size:var(--fs-small);font-weight:600;color:var(--color-text);background:var(--color-surface);flex:1;box-shadow:inset 0 0 0 1px var(--color-rule)}
.e-btns .b.pri{background:var(--hue-blue);color:#fff;box-shadow:none}

/* ---------- the sort control inside a list title: a quiet text select, not a boxed control ---------- */
.e-sel{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23636d7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1px center;font:inherit;font-size:var(--fs-small);font-weight:500;color:var(--color-text);padding:2px 16px 2px 0;margin:0 0 0 2px;border-radius:3px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-thickness:1px;min-width:0}
.e-sel{field-sizing:content}
.e-sel:hover{color:var(--color-action)}
.e-panel.list .ph .e-pt b .e-sub{font-weight:400;color:var(--color-text-muted);font-size:var(--fs-small)}
.e-sel:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}

/* ---------- the E page frame: the stat strip spans the page, the list and the rail sit side by side under it ----------
   The view renders .e-page into #view; while one is there the workspace (.ws) becomes a grid whose items are the page's own blocks and the rail (aside#rail, the shell's
   selection rail), which is the right column. No element of the shell is edited: this is a style on the grid the shell already makes, scoped by :has(.e-page). The rows are
   named areas, so a page without a band or a held row simply has no such row (spacing is margin-bottom on the items, not a grid gap, so an absent row leaves no gap). */
.ws:has(.e-page){--rail-w:280px;display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);column-gap:14px;row-gap:0;align-items:start;
  grid-template-areas:"band band" "stats stats" "held held" "body rail" "foot foot"}
.ws:has(.e-page)>.main,.ws:has(.e-page) .e-page{display:contents}
.ws:has(.e-page) .e-band{grid-area:band;margin-bottom:14px}
.ws:has(.e-page) .e-stats{grid-area:stats;margin-bottom:14px}
.ws:has(.e-page) .e-held{grid-area:held;margin-bottom:14px}
.ws:has(.e-page) .e-body{grid-area:body;min-width:0;margin-bottom:14px}
.ws:has(.e-page)>.rail{grid-area:rail;background:none;box-shadow:none;border-radius:0;padding:0;position:static;max-height:none;overflow:visible;min-width:0;margin-bottom:14px}
.ws:has(.e-page) .e-foot{grid-area:foot}
.ws:has(.e-page)>.rail:empty{display:none}
@media (max-width:900px){
  .ws:has(.e-page){display:flex;flex-direction:column;gap:14px}
  .ws:has(.e-page) .e-band,.ws:has(.e-page) .e-stats,.ws:has(.e-page) .e-held,.ws:has(.e-page) .e-body,.ws:has(.e-page)>.rail{margin-bottom:0}
  .ws:has(.e-page) .e-band{order:1}.ws:has(.e-page) .e-stats{order:2}.ws:has(.e-page) .e-held{order:3}.ws:has(.e-page) .e-body{order:4}
  .ws:has(.e-page)>.rail{order:5;margin-top:0}.ws:has(.e-page) .e-foot{order:6}
  .e-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-band .rl{display:none}
}
@media (max-width:700px){
  .e-pr{grid-template-columns:36px minmax(0,1fr);gap:10px 12px;padding:9px 12px}
  .e-pr .e-prop{grid-column:1/-1}
  .e-pr .l1{flex-wrap:wrap;gap:2px 10px}
  .e-pr .l1 .m{white-space:normal}
  .e-pr .l2{flex-wrap:wrap}
  .e-pr .l2 .tags{margin-left:0;justify-content:flex-start}
  .e-pipe::before{left:29px}
  .e-st .v{font-size:32px}
  .e-st .sub{max-width:100%}
  .e-st .hd .sp{display:none}
  .e-panel.list .ph{padding:6px 12px}
  .e-two,.e-tiers{grid-template-columns:1fr 1fr}
}

/* ================================================================
   The E shell chrome (23 Oct 2026): top bar 56, tab row 44, band 48, then the page. Scoped by body.e-shell, which pulse.html and churn.html carry; the scorecard page keeps
   the earlier header and band. Source: front/sketches/make_inspired.py top(), ptabs()/ctabs(), band() and their CSS (.top .mark .prod .search .seg .links .avu .tabs .band).
   The markup is built by app.js (buildHeader with opts.e, paintFacts); the ids the shell looks up are unchanged (header-slot, scope, tabs, facts, notice-slot, view, rail, states, foot-note).
   ================================================================ */
body.e-shell .app-header.e-top{height:56px;padding:0 24px;gap:14px;background:var(--color-surface);border-bottom:1px solid var(--color-rule-soft);flex-wrap:nowrap}
.e-top .brand{padding:0;min-height:0;flex:none}
.e-mark{width:28px;height:28px;border-radius:8px;background:var(--hue-blue);display:grid;place-items:center;flex:none}
.e-top .app-nav{margin:0;display:flex;gap:2px;background:var(--color-canvas);border-radius:9px;padding:3px;flex:none}
.e-top .app-nav a{font-size:var(--fs-small);font-weight:500;color:var(--color-text-muted);padding:4px 10px;min-height:0;border-radius:7px;box-shadow:none;transition:background-color var(--dur-press) var(--ease-out),color var(--dur-press) var(--ease-out)}
.e-top .app-nav a:hover{background:transparent;color:var(--color-text)}
.e-top .app-nav a[aria-current=page]{color:var(--color-text);font-weight:600;background:var(--color-surface);box-shadow:0 1px 2px #10182814}
.e-searchslot{flex:0 6 252px;min-width:112px}   /* the go-to field of the navigation sketches (25 Oct 2026, concept-E-nav-screen1-1000.png: 252 px wide); it gives way first, down to its minimum, as the header's other blocks need the room (app.js HEADER_FIT_CSS does the same between 901 and 1180 px, and the Gates link of review mode needs it at 1181) */
.e-hsearch{position:relative;width:100%}
.e-hsearch .sx-search-box{position:relative}
.e-hsearch .input{height:32px;min-height:32px;padding:0 10px;border:0;border-radius:9px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);font-size:var(--fs-small);color:var(--color-text)}
.e-hsearch .input::placeholder{color:var(--color-text-muted)}
.e-hsearch .input::-webkit-search-cancel-button{-webkit-appearance:none}
.e-hsearch .input:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.e-hsearch .input:disabled{background:var(--color-surface)}
.e-hsearch .sx-search-clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;background:none;border-radius:var(--radius-s);color:var(--color-text-muted);font-size:18px;line-height:1;cursor:pointer}
.e-hsearch .sx-search-pop{position:absolute;left:0;top:calc(100% + 4px);width:340px;max-width:calc(100vw - 32px);z-index:40;background:var(--color-surface);border-radius:var(--radius-m);box-shadow:var(--shadow-pop);padding:4px;max-height:380px;overflow:auto}
.e-hsearch .sx-search-pop[hidden]{display:none}
.e-hsearch .sx-search-head{font-size:var(--fs-micro);color:var(--color-text-muted);padding:6px 10px 4px}
.e-hsearch .sx-search-list{list-style:none;margin:0;padding:0}
.e-hsearch .sx-search-list li{padding:8px 10px;border-radius:var(--radius-s);cursor:pointer;font-size:var(--fs-small)}
.e-hsearch .sx-search-list li[aria-selected=true]{background:var(--color-selected-row)}
.e-hit{display:flex;flex-direction:column;gap:1px}
.e-hit b{font-weight:600}
.e-hit .m{font-size:var(--fs-micro);color:var(--color-text-muted)}
.e-top .e-hr{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.e-top .scope{display:flex;align-items:center;gap:10px;flex:none}
.e-top .seg{display:inline-flex;align-items:center;height:32px;padding:2px;gap:0;border:0;border-radius:9px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-rule);overflow:visible}
.e-top .seg>*+*{border-left:0}
.e-top .seg button{min-height:26px;height:26px;padding:0 8px;border-radius:6px;font-size:var(--fs-small);font-weight:500;color:var(--color-text-muted);background:transparent;transition:background-color var(--dur-press) var(--ease-out),color var(--dur-press) var(--ease-out)}
.e-top .seg button:hover{background:var(--color-surface-hover);color:var(--color-text)}
.e-top .seg button[aria-pressed=true]{background:var(--color-text);color:#fff;font-weight:500}
.e-top .seg button:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.e-top .hdr-link{padding:0 4px;min-height:32px;font-weight:500;color:var(--color-text-muted);border-radius:var(--radius-s);box-shadow:none}
.e-top .hdr-link:hover{background:transparent;color:var(--color-text)}
.e-top .hdr-link .e-gdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--hue-rose);margin-left:5px;vertical-align:2px}
.e-top .role-select{height:32px;min-height:32px;padding:0 26px 0 10px;border:0;border-radius:9px;box-shadow:inset 0 0 0 1px var(--color-rule);font-size:var(--fs-small);font-weight:500;min-width:0;width:auto}
.e-top .reveal{min-height:32px;gap:6px;color:var(--color-text-muted)}
.e-top .me{width:28px;height:28px;border:0;background:var(--hue-blue-t);color:var(--ink-blue);font-size:11px;flex:none}

body.e-shell .e-tabrow{display:flex;align-items:center;gap:16px;height:44px;padding:0 24px;background:var(--color-surface);border-bottom:1px solid var(--color-rule-soft)}
.e-tabrow .ptabs{flex:1 1 auto;min-width:0;max-width:100%;margin:0;gap:0;border:0;height:44px;align-items:stretch}
.e-tabrow .ptabs button{height:44px;min-height:0;padding:0 10px;margin:0;border-bottom:2px solid transparent;font-size:var(--fs-small);font-weight:500;color:var(--color-text-muted);gap:6px;transition:color var(--dur-press) var(--ease-out)}
.e-tabrow .ptabs button:hover{color:var(--color-text)}
.e-tabrow .ptabs button[aria-selected=true]{color:var(--color-text);font-weight:600;border-bottom-color:var(--hue-blue)}
.e-tabrow .ptabs .count{margin:0;background:var(--hue-blue-t);color:var(--ink-blue);border-radius:var(--radius-pill);padding:1px 7px;font-size:var(--fs-micro);font-weight:700;min-width:0}
.e-tabrow .ptabs .count.alert{background:var(--hue-rose-t);color:var(--ink-danger)}
.e-tabrow .ptabs button:focus-visible{outline:2px solid transparent;box-shadow:inset var(--focus-ring)}
.e-tabextra{flex:none;display:flex;align-items:center;gap:8px}
.e-tabextra .select{min-height:30px;height:30px;padding:0 28px 0 10px;border:0;border-radius:9px;box-shadow:inset 0 0 0 1px var(--color-rule);font-size:var(--fs-small);min-width:0;max-width:240px}

body.e-shell .e-shellband{display:flex;align-items:center;justify-content:space-between;gap:4px 24px;min-height:48px;padding:0 32px;background:var(--color-surface);border-bottom:1px solid var(--color-rule-soft);flex-wrap:wrap}
.e-shellband .e-bt{margin:0;font-size:var(--fs-lead);font-weight:600;letter-spacing:var(--ls-title);display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;min-width:0}
.e-shellband .e-bsub{color:var(--color-text-muted);font-weight:400;font-size:var(--fs-small);letter-spacing:0}
.e-shellband .e-bruler{max-width:100%;overflow:hidden;line-height:0}

body.e-shell .page{padding-top:20px;padding-bottom:10px}
body.e-shell .ws{margin-top:0}
body.e-shell #notice-slot:not(:empty){margin:0 0 16px}
body.e-shell .page-foot{height:40px;min-height:40px;padding:0 32px;font-size:var(--fs-micro);align-items:center;flex-wrap:nowrap;gap:0 16px;overflow:hidden}
body.e-shell .page-foot #foot-note{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.e-shell .page-foot .state-switch{flex:none}

@media (max-width:1180px){.e-top .reveal span{font-size:var(--fs-micro)}}
/* The tab row between 901 and 1180 px (25 Oct 2026, lens ix-3): Pulse's eleven tabs (766 px at 10 px of side padding) and the 240 px segment select needed 1,022 px of the 952 the row has at 1000, so the strip
   scrolled on its hidden scrollbar and Models sat out of view. Tabs take 8 px a side and the gap 12 px (722 px of tabs), the select is 200 px and gives way first (to 116 px, "All segments" stays whole), the strip never
   shrinks below its tabs: at 1000 px nothing scrolls, at 901 px the row still fits. Render check R19 reads this. At 900 px and below the row wraps as before (390 px: the strip scrolls, said in R19). */
/* The header between 901 and 999 px (25 Oct 2026): with the role control printing its name (app.js buildHeader, HEADER_FIT_CSS) the Pulse header needs 964 px, so from 901 to 963 px it scrolled sideways (scrollWidth 964 in a
   901 px viewport) while the row is nowrap until 900 px. 901-999 px: the gap between the blocks 14 → 8, the gap inside the scope 10 → 4 and the side padding of the ten market and period buttons 8 → 6 give back 70 px, enough
   from 925 px. 901-924 px: the buttons 5 px, the block gap 6 and the side padding of the two text links 4 → 2 give back 34 px more (23 are missing at 901). The 24 px side margins stay, so the header and the tab row keep one left edge,
   and from 1000 px up nothing changes (1000 is the reviewed width). The right group's own gap (5 px) and the search slot's width are app.js's. */
@media (min-width:901px) and (max-width:999px){
  body.e-shell .app-header.e-top{gap:8px}
  .e-top .scope{gap:4px}
  .e-top .seg button{padding:0 6px}
}
@media (min-width:901px) and (max-width:924px){
  body.e-shell .app-header.e-top{gap:6px}
  .e-top .seg button{padding:0 5px}
  .e-top .hdr-link{padding:0 2px}
}
@media (min-width:901px) and (max-width:1180px){
  body.e-shell .e-tabrow{gap:12px}
  .e-tabrow .ptabs{flex:1 0 auto}
  .e-tabrow .ptabs button{padding:0 8px}
  .e-tabextra{flex:0 1 200px;min-width:116px}
  .e-tabextra:empty{display:none}   /* Churn has no segment select: its empty slot takes no width */
  .e-tabextra .select{width:100%;max-width:200px}
}
/* Twelve tabs (25 Oct 2026: Protection became a page of its own, after Risk): 798 px at 8 px a side, which with the 12 px gap, the select at its 116 px minimum and the 24 px margins needs 974 px, so from 901 to 973 px the
   page scrolled sideways (scrollWidth 950 at 901). 4 px a side gives back 96 px (702 px of tabs; the row fits from 878 px). Only a strip of twelve tabs or more (Pulse), so Churn's eight keep their padding.
   Render check R19 reads it; at 974 px and up nothing changes. */
@media (min-width:901px) and (max-width:973px){
  .e-tabrow .ptabs:has(> :nth-child(12)) button{padding:0 4px}
}
/* Thirteen tabs (25 Oct 2026: Simulate after Bonusing): 866 px at 8 px a side, 814 at 6, 762 at 4, 710 at 2; with the 12 px gap, the select at its 116 px minimum and the 24 px margins the row needs 1,042 / 990 / 938 / 886 px.
   So a strip of thirteen takes 6 px a side from 901 to 1180 px (fits from 990, the reviewed 1000 px included), 4 px from 901 to 989 (fits from 938) and 2 px from 901 to 937 (fits from 886, the select's own side padding 8 px).
   Only a strip of thirteen tabs or more (Pulse); Churn's eight keep theirs. Render check R19 reads it; at 1181 px and up nothing changes. */
@media (min-width:901px) and (max-width:1180px){
  .e-tabrow .ptabs:has(> :nth-child(13)) button{padding:0 6px}
}
@media (min-width:901px) and (max-width:989px){
  .e-tabrow .ptabs:has(> :nth-child(13)) button{padding:0 4px}
}
@media (min-width:901px) and (max-width:937px){
  .e-tabrow .ptabs:has(> :nth-child(13)) button{padding:0 2px}
  .e-tabextra .select{padding:0 22px 0 8px}
}
/* Above the 901 to 1180 block the strip keeps its 10 px (918 px of tabs, the 240 px select, the 16 px gap and the margins: 1,222 px), so from 1181 to 1221 px it scrolled on its hidden bar (scrollWidth 918 in a strip of 877 at 1181):
   8 px a side (866 px, fits from 1170) there. */
@media (min-width:1181px) and (max-width:1221px){
  .e-tabrow .ptabs:has(> :nth-child(13)) button{padding:0 8px}
}
@media (max-width:900px){
  body.e-shell .app-header.e-top{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 16px;row-gap:8px}
  .e-searchslot{flex:1 1 140px}
  .e-top .e-hr{flex-wrap:wrap;margin-left:0;width:100%;row-gap:8px}
  .e-top .scope{flex-wrap:wrap}
  body.e-shell .e-tabrow{padding:0 16px 8px;gap:0 8px;flex-wrap:wrap;height:auto}
  .e-tabextra{flex:1 1 100%}
  .e-tabextra .select{max-width:none;width:100%}
  .e-tabextra:empty{display:none}
  body.e-shell .e-tabrow:has(.e-tabextra:empty){padding-bottom:0}
  body.e-shell .e-shellband{padding:6px 16px}
  .e-shellband .e-bruler{display:none}
  body.e-shell .page{padding-top:16px}
  body.e-shell .page-foot{padding:8px 16px}
}

/* ---------- a rail that scrolls inside itself (K1, 26 Oct 2026; S.railScroll in shell-ext3.js) ----------
   Opt in with the class and S.railScroll(el): the fade shows only while the content overflows (data-overflow), is 16 px, takes room of its own after the last row (no text under it at the foot), lets the
   pointer through; 8 px of air under it. A rail's caption is .e-rail-cap: it sits above its cards with room of its own and is never painted over by the card below. Nothing here applies without the class. */
.e-rail-scroll{overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}
.ws:has(.e-page)>.rail.e-rail-scroll{align-self:stretch;contain:size;overflow-y:auto;padding:0 0 8px}
.e-rail-scroll[data-overflow]::after{content:'';display:block;flex:none;position:sticky;bottom:0;height:16px;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--color-canvas) 0%,transparent),var(--color-canvas))}
.e-rail-cap{margin:0 0 6px 4px;font-size:var(--fs-micro);line-height:1.35;color:var(--color-text-muted);position:relative;z-index:1}
@media (max-width:900px){
  .ws:has(.e-page)>.rail.e-rail-scroll{align-self:auto;contain:none;overflow:visible;padding-bottom:0}
  .ws:has(.e-page)>.rail.e-rail-scroll[data-overflow]::after{display:none}
}