/* The CeciKnows Monitor (docs/web-ui-v2-manifest.md §6, V4), shared by the web app and the Telegram Mini App. Every rule is scoped under .mon so nothing leaks into the app. Ported from web/monitor/index.html's stylesheet with the Monitor's own variables mapped onto tokens.css: surface-2 → --raised · ink → --i · muted → --m · faint → --f · accent, subtab → --ac · accent-soft → --acw · font-ui → --ui · font-data → --mono; good/bad/warn/lock/hold as named. The chart palette (TCOL in format.mjs), the planning violet and the chain chips keep the Monitor's own colours. The detail sheet, help layer and splash cover the Monitor, not the page. */ .mon{--plan:#A78BFA;--build:var(--warn);position:relative;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;background:var(--surface);color:var(--i);font:15px/1.45 var(--ui);-webkit-text-size-adjust:100%} .mon [hidden]{display:none!important} .mon button{cursor:pointer} .mon button:focus-visible,.mon input:focus-visible,.mon [tabindex]:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .mon .row:focus-visible,.mon .crow:focus-visible,.mon .cmd:focus-visible,.mon .toptab:focus-visible,.mon .subtab:focus-visible{outline-offset:-2px} /* header: one row — Monitor · stamp · ? ↻ × (Redesign v1) */ .mon .hrow{display:flex;align-items:center;gap:8px;min-width:0} .mon .hrow .title{margin:0;flex:none;font:500 20px/1.2 var(--serif);letter-spacing:-.01em;color:var(--i)} .mon .hrow .stamp{flex:1;min-width:0;font:500 11px var(--mono);color:var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mon .hbtns{display:flex;gap:6px;flex:none} .mon .iconbtn.close{font-size:19px;font-weight:500;color:var(--m)} .mon .iconbtn.close:hover{color:var(--i)} .mon.compact .head{padding:6px 12px 0} .mon.compact .hrow .title{font-size:17px} .mon.compact .toptabs{margin:6px 0} .mon.compact .iconbtn,.mon.compact .refresh{width:28px;height:28px} /* the outside-Telegram / fatal note the Mini App shell draws in place of the Monitor */ .mon .gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 20px;text-align:center;color:var(--m);font-size:13.5px} .mon .gate b{color:var(--i);font:500 20px/1.25 var(--serif)} .mon .gate a{color:var(--lock)} .mon *{scrollbar-width:thin;scrollbar-color:var(--raised) transparent} .mon *::-webkit-scrollbar{width:8px;height:8px} .mon *::-webkit-scrollbar-track{background:transparent} .mon *::-webkit-scrollbar-thumb{background:var(--raised);border-radius:8px;border:2px solid transparent;background-clip:padding-box} .mon *::-webkit-scrollbar-thumb:hover{background:var(--f);background-clip:padding-box;border:2px solid transparent} .mon *::-webkit-scrollbar-corner{background:transparent} .mon *{box-sizing:border-box} .mon .app{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;background:var(--surface)} .mon .head{padding:8px 16px 0;flex:none} .mon .refresh{border:1px solid var(--line);background:var(--raised);color:var(--i);border-radius:8px;width:32px;height:32px;font-size:16px;flex:none} .mon .refresh.spin{animation:mon-spin .8s linear infinite;color:var(--ac)} @keyframes mon-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.mon .refresh.spin{animation:none}} .mon .toptabs{display:flex;gap:4px;margin:8px 0 8px;padding:4px;background:var(--raised);border-radius:12px} .mon .toptab{flex:1;border:0;background:transparent;color:var(--m);padding:8px 4px;font:800 13.5px var(--ui);position:relative;border-radius:9px} .mon .toptab[aria-selected="true"]{background:var(--surface);color:var(--ac);box-shadow:0 1px 3px rgba(0,0,0,.25)} .mon .toptab[aria-selected="true"]:after{content:"";position:absolute;left:50%;bottom:4px;width:16px;height:2px;margin-left:-8px;border-radius:1px;background:var(--ac)} .mon .toptab .bdg{position:absolute;top:3px;right:8px;min-width:17px;height:17px;border-radius:9px;background:var(--bad);color:#fff;font:700 10.5px var(--ui);display:grid;place-items:center;padding:0 5px} .mon .subtabs{display:flex;padding:0 8px;border-bottom:1px solid var(--line);background:var(--surface);flex:none} .mon .subtab{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--m);padding:9px 2px 8px;font:700 11px var(--ui);margin-bottom:-1px;letter-spacing:.02em;text-transform:uppercase} .mon .subtab[aria-selected="true"]{color:var(--ac);border-bottom-color:var(--ac)} /* the scrollbar appeared only on the panes long enough to need one, so every card's right edge jumped about 10px as you moved between tabs (review, 2026-09-26). A stable gutter reserves the space whether or not it is in use. */ .mon .body{position:relative;flex:1;overflow:auto;min-height:0;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable} .mon .pane{display:none} .mon .pane.on{display:block} .mon .sec{padding:12px 16px;border-bottom:1px solid var(--line)} .mon .sec h4{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--f)} .mon .tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mon .tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))} /* One hero per pane (operator ruling, 2026-09-26): equity is the number this pane is about. It used to share a row with a "Today" tile that, on a day with no close reference, held a dash at headline size. The day's change sits beside the figure now. */ .mon .phero{display:flex;flex-direction:column;gap:2px;margin-bottom:10px} .mon .phero .v{font:500 30px var(--mono);font-variant-numeric:tabular-nums;color:var(--i);line-height:1.05} .mon .phero .d{display:flex;align-items:baseline;gap:8px;font:400 13px var(--mono);font-variant-numeric:tabular-nums} .mon .phero .d .pos{color:var(--good)} .mon .phero .d .neg{color:var(--bad)} .mon .phero .d .flat{color:var(--m)} .mon .phero .d .p{font-size:11.5px;color:var(--f)} .mon .phero .s{font:400 11px var(--ui);color:var(--f)} .mon .tile .l{font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f)} /* the tile surface itself: tokens.css (item 23) */ .mon .tile .v{font-family:var(--mono);font-size:18px;font-weight:600} .mon .tile .s{font-family:var(--mono);font-size:11px;color:var(--m)} .mon .pos{color:var(--good)} .mon .neg{color:var(--bad)} .mon .flat{color:var(--m)} .mon canvas.chart{width:100%;height:150px;display:block;border-radius:8px;background:var(--raised)} .mon .section canvas.chart{height:190px} .mon canvas.bars{width:100%;height:56px;display:block;border-radius:8px;background:var(--raised);margin-top:6px} .mon .bookbar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:6px 0 8px} .mon .bookbar i{display:block;height:100%} .mon .booklegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--m)} .mon .booklegend .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px} .mon .booklegend b{font-family:var(--mono);font-weight:500;color:var(--i)} .mon .booklegend.stack{flex-direction:column;gap:6px} .mon .booklegend.stack span{display:flex;align-items:baseline;gap:6px} .mon .booklegend.stack .q.one{max-width:70vw} .mon .booklegend.stack b{margin-left:auto} .mon .row.pmrow{grid-template-columns:1fr 92px 70px} .mon .crow>span{min-width:0} .mon .crow .sym{min-width:0} .mon .crow .symcell{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .mon .crow .symcell .q{display:inline} .mon .conc{display:flex;justify-content:space-between;font-size:12px;color:var(--m);margin-top:6px} .mon .conc b{font-family:var(--mono);font-weight:500;color:var(--i)} .mon .alloc{display:flex;flex-direction:column;gap:6px} .mon .alloc .r{display:grid;grid-template-columns:90px 1fr 70px;gap:8px;align-items:center;font-size:12px} .mon .alloc .n{font-weight:700} .mon .alloc .bar{position:relative;height:10px;background:var(--raised);border-radius:5px} .mon .alloc .bar i{position:absolute;left:0;top:0;height:100%;border-radius:5px} .mon .alloc .bar b{position:absolute;top:-3px;width:2px;height:16px;background:var(--i);opacity:.7} /* one colour for all three directions: .under/.over/.at are there to be read by a test or a stylesheet later, NOT to borrow --good and --bad for a distance that is neither good nor bad (review, 2026-09-26) */ .mon .alloc .g{font-family:var(--mono);text-align:right;font-size:11.5px;color:var(--m)} .mon .list{display:flex;flex-direction:column} .mon .row{display:grid;grid-template-columns:64px 1fr 70px;gap:8px;align-items:center;padding:8px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;color:inherit;font:inherit;width:100%} .mon .row .sym{font-family:var(--mono);font-weight:600;font-size:13px} .mon .row .sub{font-size:11px;color:var(--m)} .mon .row .mid{font-family:var(--mono);font-size:11.5px;color:var(--m);display:flex;justify-content:space-between;gap:6px;align-items:center} .mon .row .wbar{position:relative;height:4px;background:var(--raised);border-radius:2px;margin-top:4px} .mon .row .wbar i{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--ac)} .mon .row .pbar{position:relative;height:4px;background:var(--raised);border-radius:2px;margin-top:3px} .mon .row .pbar i{position:absolute;top:0;height:100%;border-radius:2px} .mon .row .tot{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .mon .row .tot small{display:block;font-size:10.5px;color:var(--m);font-weight:500} .mon .chip{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--raised);color:var(--m)} .mon .ochip{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:0 5px;border-radius:5px;vertical-align:1px;margin-right:5px;border:1px solid var(--line);color:var(--m);background:var(--raised)} .mon .ochip.yes{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,transparent);background:color-mix(in srgb,var(--good) 14%,transparent)} .mon .ochip.no{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:color-mix(in srgb,var(--bad) 14%,transparent)} .mon .q{font-family:var(--ui);font-weight:500;font-size:12.5px;line-height:1.3} .mon .q.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mon .q.one{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom} .mon .idline{font-family:var(--mono);font-size:10.5px;color:var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px} .mon .tchip{display:inline-block;font-size:11px;padding:1px 7px;border-radius:6px;border:1px solid var(--acb);background:var(--acw);color:var(--ac);margin-right:6px} .mon .chip.on{color:var(--good)} .mon .chip.paper{color:var(--lock)} .mon .chip.live{color:var(--warn)} .mon .chip.off{color:var(--f)} .mon .chip.blocked{color:var(--bad)} .mon .chip.amber{color:var(--warn)} .mon .chip.gold{color:var(--actext)} .mon .icard .chips .chip{white-space:nowrap} .mon .cchip{display:inline-block;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.02em} .mon .pair{font-family:var(--mono);font-size:10.5px;color:var(--f);margin-left:5px;font-weight:500} .mon .chchip{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:0 5px;border-radius:5px;vertical-align:1px;margin-right:5px;border:1px solid var(--line);color:var(--m);background:var(--raised)} .mon .chchip.polygon{color:#8f5cf0;border-color:rgba(143,92,240,.5);background:rgba(143,92,240,.12)} .mon .chchip.ton{color:#1a9de8;border-color:rgba(26,157,232,.5);background:rgba(26,157,232,.12)} .mon .vbadge{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:0 5px;border-radius:5px;margin-left:6px;vertical-align:1px;border:1px solid currentColor;text-transform:uppercase} .mon .vbadge.testnet,.mon .vbadge.paper{color:var(--lock)} .mon .vbadge.live{color:var(--warn)} .mon .vrows{display:flex;flex-direction:column;gap:7px} .mon .vrows .r{display:grid;grid-template-columns:14px 112px 1fr;gap:8px;align-items:start;font-size:12px} .mon .vrows .r>span{min-width:0} .mon .vrows .r .l{color:var(--m);font-weight:600} .mon .vrows .r .v{font-family:var(--mono);font-weight:600;word-break:break-word} .mon .vrows .r .s{color:var(--m);font-size:11.5px} .mon .vrows .led{margin-top:4px} .mon .gas{display:flex;flex-direction:column;gap:8px} .mon .gas .g{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12px;align-items:baseline} .mon .gas .g .m{grid-column:1/-1;height:6px;border-radius:3px;background:var(--raised);overflow:hidden} .mon .gas .g .m i{display:block;height:100%} .mon .gas .g small{color:var(--m);font-size:11px} .mon .gas .g b{font-family:var(--mono)} .mon .desk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 16px 4px} .mon .desk .c{background:var(--raised);border-radius:10px;padding:8px 10px} .mon .desk .c .l{font-size:11px;color:var(--m);font-weight:600} .mon .desk .c .v{font-family:var(--mono);font-size:16px;font-weight:600} .mon .noteam{margin:14px 16px;padding:14px;border:1px dashed var(--line);border-radius:12px;font-size:13px;line-height:1.45} .mon .noteam h4{margin:0 0 6px;font-size:13px} .mon .noteam p{margin:0;color:var(--m)} .mon .noteam ul{margin:6px 0 0;padding-left:18px;color:var(--m)} .mon .noteam code{font-family:var(--mono);font-size:12px;color:var(--i)} .mon .row .chg{font-family:var(--mono);font-size:11px} .mon .row.wrow{grid-template-columns:1fr 1fr 78px} .mon .unpriced{font-size:12px;color:var(--m);padding:4px 0 0} .mon .unpriced li{margin:2px 0} /* M3 (FROZEN 2026-09-21) W1–W4: the in view line under the title — one slim line, faintly highlighted with no border (a whisper of ink when active, a faint gold wash when locked) */ .mon .inview{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:8px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;line-height:1;min-height:30px;box-sizing:border-box;margin:6px 0 0;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.03);font:400 12.5px var(--ui);color:var(--m);min-width:0} html[data-theme="light"] .mon .inview{background:rgba(0,0,0,.03)} .mon .inview.locked{background:rgba(221,203,155,.05)} /* the Life tab's line before its household is read: the same box, empty, so the header never jumps */ .mon .inview.ghost{background:transparent} html[data-theme="light"] .mon .inview.locked{background:rgba(149,123,60,.07)} .mon .inview .name{font-weight:600;color:var(--i)} .mon .inview .sep{color:var(--f)} .mon .inview .st{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase} .mon .inview .st.on{color:var(--good)} .mon .inview .st.off{color:var(--warn)} .mon .inview .why{font-size:12px;color:var(--f);min-width:0;overflow:hidden;text-overflow:ellipsis} .mon .inview .name,.mon .inview .st,.mon .inview .sep,.mon .inview .vbadge{flex:none} /* every part sits on the row's middle: one line height, no per-font offsets (operator, 2026-09-21) */ .mon .inview>*{line-height:1;display:inline-flex;align-items:center;margin:0} .mon .inview .who,.mon .inview .why{display:block;line-height:1.3} .mon .inview .vbadge{line-height:13px;padding-top:1px} .mon .inview .vbadge{margin-left:0;vertical-align:middle} .mon .inview .who{font:400 12px var(--mono);color:var(--f);min-width:0;overflow:hidden;text-overflow:ellipsis} /* M3 W15–W19: three tiles, the Overall tile a read that opens its overlay */ .mon .tiles.three{grid-template-columns:1fr 1fr 1fr} .mon .tile.act{cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%;display:block} .mon .tile.act:hover{border-color:var(--acb)} .mon .tile .l .d{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:7px;vertical-align:1px} .mon .tile .l .d.good{background:var(--good)} .mon .snote{margin:0;padding:0 16px 8px;font-size:12.5px;color:var(--m)} /* the Instances card: its header opens the detail, its figure row carries View and Switch (W17) */ .mon .icard .ih{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer} /* the card in view wears a dashed blue frame (operator, 2026-09-21); the active one keeps its solid brass. Both at once: solid brass outside, the dashed blue just inside it */ .mon .icard.viewing{border:2px dashed var(--lock);padding:9px 11px 9px 15px;background:color-mix(in srgb,var(--lock) 6%,transparent)} .mon .icard.viewing.active{border:1px solid var(--ac);padding:10px 12px 10px 16px;box-shadow:0 0 0 1px var(--ac) inset;outline:2px dashed var(--lock);outline-offset:-6px} .mon .icard .fig{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--mono);flex-wrap:wrap} .mon .icard .fig b{font-size:15px;font-weight:600} .mon .icard .fig small{font-size:11px;color:var(--m)} .mon .icard .fig .sp{flex:1} .mon .ibtn{font:500 11.5px var(--ui);border:1px solid var(--glassline);background:var(--glass);color:var(--btntext,var(--i));border-radius:7px;padding:5px 11px;cursor:pointer;white-space:nowrap;line-height:normal} .mon .ibtn:hover{background:var(--glasshi)} .mon .ibtn[disabled]{color:var(--f);opacity:.55;cursor:not-allowed;background:var(--glass)} /* the Overall overlay's rows (W19): name and caption left, the converted figure right */ .mon .orows{display:flex;flex-direction:column;border-top:1px solid var(--hairline)} .mon .orow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--hairline)} .mon .orow .on{flex:1;min-width:0} .mon .orow .on b{display:block;font:600 13.5px var(--ui);color:var(--i)} .mon .orow .on .rty{display:block;font:400 12px var(--ui);color:var(--m);margin-top:1px} .mon .orow .on .rid{display:block;font:500 11.5px var(--mono);color:var(--f);margin-top:1px;overflow-wrap:anywhere} .mon .orow .on small,.mon .orow .ov small{display:block;font:11px var(--mono);color:var(--f);margin-top:2px} .mon .orow .ov{text-align:right;flex:none} .mon .orow .ov b{display:block;font:600 14px var(--mono);font-variant-numeric:tabular-nums} .mon .orow.off .on b,.mon .orow.off .ov b{color:var(--f);font-weight:500} .mon .detail .note{margin:0 0 12px;font:12.5px/1.45 var(--ui);color:var(--m)} .mon .detail .tiles{margin-bottom:12px} /* three tiles into two columns leaves the third alone on its own row; it spans instead (the same rule 6 the Life tiles follow) — review, 2026-09-26 */ @media (max-width:480px){ .mon .tiles.three{grid-template-columns:1fr 1fr} .mon .tiles.three>*:nth-child(3){grid-column:1/-1} } .mon .icard{position:relative;display:block;width:calc(100% - 32px);margin:0 16px 10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px 10px 16px;background:transparent;color:inherit;font:inherit;text-align:left;overflow:hidden} .mon .icard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--f)} .mon .icard.connected:before{background:var(--good)} .mon .icard.error:before,.mon .icard.blocked:before{background:var(--bad)} .mon .icard.degraded:before,.mon .icard.paused:before{background:var(--warn)} .mon .icard.active{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac) inset} .mon .icard .h{display:flex;align-items:center;gap:10px} .mon .icard .badge{width:34px;height:34px;border-radius:9px;background:var(--raised);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:13px;flex:none} .mon .icard .h b{display:block;font-size:13.5px;line-height:1.2} .mon .icard .h small{display:block;font-family:var(--mono);font-size:11px;color:var(--m)} .mon .icard .h .chips{margin-left:auto;display:flex;flex-direction:column;gap:3px;align-items:flex-end} .mon .caps{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .mon .cap{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--raised);color:var(--m)} .mon .cap.on{color:var(--i)} .mon .cap.on .d{background:var(--good)} .mon .cap.warn .d{background:var(--warn)} .mon .cap .d{width:6px;height:6px;border-radius:50%;background:var(--f)} .mon .stat{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mon .stat .c{background:var(--raised);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px} .mon .stat .c .l{font-size:11px;color:var(--m);font-weight:600} .mon .stat .c .v{font-family:var(--mono);font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px} .mon .stat .c .s{font-size:11.5px;color:var(--m)} .mon .led{width:9px;height:9px;border-radius:50%;background:var(--f);flex:none} .mon .led.ok{background:var(--good)} .mon .led.warn{background:var(--warn)} .mon .led.bad{background:var(--bad)} .mon .led.info{background:var(--lock)} .mon .gauge{position:relative;height:8px;background:var(--raised);border-radius:4px;margin-top:4px} .mon .gauge i{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--good)} .mon .gauge b{position:absolute;top:-3px;width:2px;height:14px;background:var(--bad)} .mon .gauge-l{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--m);margin-top:2px} .mon .dir{display:flex;flex-direction:column;gap:8px;font-size:13px} .mon .dir .it{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:start} .mon .dir .it .k{font-size:11px;color:var(--f);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .mon .filters{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2;overflow-x:auto} .mon .filter{flex:none;border:1px solid var(--line);background:transparent;color:var(--m);border-radius:999px;padding:4px 10px;font:700 11px var(--ui)} .mon .filter[aria-selected="true"]{background:var(--raised);color:var(--i);border-color:var(--f)} .mon .ev{display:grid;grid-template-columns:44px 22px 1fr;gap:8px;align-items:start;padding:8px 16px;border-bottom:1px solid var(--line);font-size:12.5px} .mon .ev .w{font-family:var(--mono);font-size:11px;color:var(--f);padding-top:2px} .mon .ev .t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--f);display:block} .mon .ev.wait{background:var(--acw)} .mon .ev.wait .t{color:var(--ac)} .mon .ev .go{display:block;font-size:11.5px;color:var(--lock);margin-top:2px} .mon .mhero{display:flex;align-items:baseline;justify-content:space-between} .mon .mhero .big{font-family:var(--mono);font-size:26px;font-weight:600} .mon .mhero .lbl{font-size:12px;color:var(--m);font-weight:600} .mon .mbar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:10px 0 8px;background:var(--raised)} .mon .mbar i{display:block;height:100%} .mon .mleg{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:11.5px;color:var(--m)} .mon .mleg .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px} .mon .mleg b{font-family:var(--mono);font-weight:500;color:var(--i)} .mon .mleg small{display:block;color:var(--f);font-size:10.5px;margin-left:14px} .mon .hlights{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px} .mon .hl{background:var(--raised);border-radius:8px;padding:6px;font-size:10.5px;color:var(--m);text-align:center} .mon .hl .v{display:flex;align-items:center;justify-content:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--i);margin-top:2px} .mon .vflow{display:flex;flex-direction:column;gap:6px} .mon .vflow .srcrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px} .mon .vflow .sbx{background:var(--raised);border-radius:8px;padding:6px 8px;font-size:11px;line-height:1.3;text-align:center} .mon .vflow .sbx b{display:block;font-size:11.5px} .mon .vflow .sbx small{color:var(--m);font-size:10.5px} .mon .vflow .varr{text-align:center;color:var(--f);font-size:16px;line-height:1} .mon .vflow .ns{border:1px solid var(--ac);background:var(--acw);border-radius:10px;padding:8px 10px;text-align:center;font-size:12px} .mon .vflow .ns b{display:block} .mon .vflow .ns small{display:block;color:var(--m);font-size:10.5px} .mon .vflow .readers{display:grid;grid-template-columns:1fr 1fr;gap:6px} .mon .vflow .rd{background:var(--raised);border-radius:8px;padding:8px;font-size:11.5px;line-height:1.35} .mon .vflow .rd b{display:block;font-size:12px} .mon .vflow .rd .reads{display:flex;gap:3px;margin:5px 0} .mon .vflow .rd .reads i{display:block;width:12px;height:12px;border-radius:3px} .mon .vflow .rd .reads i.no{opacity:.15} .mon .vflow .rd small{color:var(--m);font-size:10.5px;display:block} .mon .vflow .rd.veto{border-left:3px solid var(--bad)} .mon .vflow .rd.veto small.rule{color:var(--bad);font-weight:700} .mon .tsum{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--m);margin-bottom:6px} .mon .tsum b{font-family:var(--mono);font-weight:500;color:var(--i)} .mon .recall{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:7px 16px;border-bottom:1px solid var(--line);font-size:12.5px} .mon .recall .w{font-family:var(--mono);font-size:11px;color:var(--f);padding-top:2px} .mon .recall .k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-right:6px;color:var(--m)} .mon .recall.cancel .k{color:var(--bad)} .mon .recall.shrink .k{color:var(--warn)} .mon .lesson{border:1px solid var(--line);border-left:3px solid var(--ac);border-radius:0 10px 10px 0;padding:8px 10px;margin:0 16px 8px;font-size:12.5px} .mon .lesson .q{font-weight:600} .mon .lesson .r{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin-top:5px;font-size:11.5px;color:var(--m)} .mon .lesson .r span:first-child{color:var(--f);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10px;padding-top:2px} .mon .fact{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);font-size:12.5px} .mon .fact .w{display:block;font-family:var(--mono);font-size:10.5px;color:var(--f);margin-top:2px} .mon .grp{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--f)} .mon .grp button{border:1px solid var(--line);background:transparent;color:var(--lock);border-radius:999px;padding:2px 9px;font:700 11px var(--ui);letter-spacing:0;text-transform:none} .mon .empty,.mon .err{padding:28px 16px;color:var(--m);text-align:center;font-size:13px} .mon .err.late b{color:var(--m)} /* still loading is not an error: no red */ .mon .err b{color:var(--bad)} .mon .hint{font-size:12px;color:var(--f);padding:6px 16px 10px} .mon .foot{flex:none;border-top:1px solid var(--line);padding:8px 16px 12px;font-size:12px;color:var(--m)} .mon .detail{position:absolute;inset:0;background:var(--surface);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;z-index:5} .mon .detail.open{transform:none} @media (prefers-reduced-motion:reduce){.mon .detail{transition:none}} .mon .splash{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--surface)} .mon .splash[hidden]{display:none} .mon .splash .mark{height:auto;opacity:.75;animation:mon-breathe 2.4s ease-in-out infinite,mon-glow 2.4s ease-in-out infinite;will-change:transform,filter} .mon .splash small{font:500 11px var(--mono);color:var(--f);letter-spacing:.04em;text-align:center;max-width:80%} /* the mark breathes and its glow swells with it, in the champagne of the working mark */ @keyframes mon-breathe{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:.95;transform:scale(1.02)}} @keyframes mon-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(221,203,155,0)) drop-shadow(0 0 0 rgba(221,203,155,0))} 50%{filter:drop-shadow(0 0 10px rgba(221,203,155,.45)) drop-shadow(0 0 28px rgba(221,203,155,.22))}} html[data-theme="light"] .mon .splash .mark{animation-name:mon-breathe,mon-glow-light} @keyframes mon-glow-light{0%,100%{filter:drop-shadow(0 0 0 rgba(149,123,60,0))}50%{filter:drop-shadow(0 0 12px rgba(149,123,60,.35))}} /* the loader (canvas option R2): four arcs with rounded ends, one of them champagne and carrying the mark's own halo; the turn eases in and out, so the ring breathes in time with the mark */ .mon .splash .ring{width:40px;height:40px;animation:mon-ring 2s cubic-bezier(.65,0,.35,1) infinite;transform-origin:50% 50%} .mon .splash .ring circle{fill:none;stroke-width:4;stroke-linecap:round} .mon .splash .ring .quiet{stroke:var(--f);opacity:.35} .mon .splash .ring .lit{stroke:var(--ac);filter:drop-shadow(0 0 4px rgba(221,203,155,.75))} html[data-theme="light"] .mon .splash .ring .lit{filter:drop-shadow(0 0 4px rgba(149,123,60,.5))} @keyframes mon-ring{to{transform:rotate(360deg)}} /* option G: the mark under a band of light, a hairline that fills by one part at a time, and the parts themselves lighting up as each lands — champagne for what is in, amber for one running slow */ .mon .splash .wrap{position:relative;width:min(64vw,260px);line-height:0} .mon .splash .wrap .mark{width:100%} .mon .splash .sweep{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgba(255,248,230,.95) 48%,rgba(221,203,155,.9) 52%,transparent 70%);background-size:260% 100%; -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; animation:mon-sweep 2.6s ease-in-out infinite} @keyframes mon-sweep{0%{background-position:130% 0}100%{background-position:-30% 0}} .mon .splash.still .sweep{animation:none;opacity:0} .mon .splash.still .mark{animation:none;opacity:.38;filter:grayscale(.3)} .mon .splash .line{position:relative;width:min(70vw,200px);height:2px;border-radius:1px;background:var(--acw);overflow:hidden} .mon .splash .line b{position:absolute;left:0;top:0;bottom:0;border-radius:1px;transition:width .45s ease; background:linear-gradient(90deg,rgba(221,203,155,.35),var(--ac))} .mon .splash .parts{display:flex;flex-direction:column;gap:7px} .mon .splash .prow{display:flex;align-items:center;gap:9px;font:400 12px var(--mono);color:var(--f)} .mon .splash .prow .pdot{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--f)} .mon .splash .prow.wait .pdot{animation:mon-partwait 1.3s ease-in-out infinite} .mon .splash .prow.done{color:var(--i)} .mon .splash .prow.done .pdot{background:var(--ac);box-shadow:0 0 6px rgba(221,203,155,.5)} .mon .splash .prow.late{color:var(--warn)} .mon .splash .prow.late .pdot{background:var(--warn);box-shadow:none} .mon .splash .prow.off .pdot{box-shadow:inset 0 0 0 1.5px var(--line)} .mon .splash .prow em{font-style:normal;font-size:11px;color:var(--warn)} @keyframes mon-partwait{0%,100%{opacity:.3}50%{opacity:.9}} @media (prefers-reduced-motion:reduce){.mon .splash .sweep{animation:none;opacity:.25}.mon .splash .prow.wait .pdot{animation:none;opacity:.5} .mon .splash .line b{transition:none}} .mon .splash .retry{font:500 12px var(--ui);border:1px solid var(--glassline);background:var(--glass);color:var(--i);border-radius:7px;padding:6px 16px;cursor:pointer} @media (prefers-reduced-motion:reduce){.mon .splash .mark{animation:none}.mon .splash .ring{animation:none}} .mon .detail .top{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);flex:none} .mon .back{order:2;margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--m);font:600 11.5px var(--ui);padding:4px 10px;border-radius:7px;line-height:1.35;flex:none} .mon .back:hover{color:var(--ac);border-color:var(--ac)} .mon .help .hhead .iconbtn{order:3} .mon .detail .name{font-weight:800;min-width:0;flex:1} .mon .detail .name small{display:block;font-family:var(--mono);font-weight:500;font-size:11.5px;color:var(--m)} .mon .detail .dbody{flex:1;overflow:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:14px} .mon .detail .dbody>*{flex:none} .mon .kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px} .mon .kv dt{color:var(--m);font-weight:600} .mon .kv dd{margin:0;font-family:var(--mono);text-align:right} .mon .section h4{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--f)} .mon .section p{margin:0;font-size:13px} .mon .section ul{margin:0;padding-left:16px;font-size:13px} .mon .section li{margin:2px 0} .mon .rollup{padding:12px 16px 10px;border-bottom:1px solid var(--line)} .mon .rollup .big{display:flex;align-items:baseline;justify-content:space-between} .mon .rollup .pnl{font-family:var(--mono);font-size:26px;font-weight:600} .mon .rollup .lbl{font-size:12px;color:var(--m);font-weight:600} .mon .rollup .cap{font-size:12px;color:var(--m);margin:2px 0 6px} .mon .segbar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:10px 0 8px;background:var(--raised)} .mon .segbar i{display:block;height:100%} .mon .legend{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:12px;color:var(--m)} .mon .legend b{font-family:var(--mono);font-weight:500;color:var(--i)} .mon .legend .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px} .mon .jump{display:flex;padding:8px 12px 0} /* rule 8: a search box takes plain type. Monospace made a placeholder sentence look like a code literal you were meant to copy (operator ruling, 2026-09-26). */ .mon .jump input{flex:1;border:1px solid var(--line);background:var(--raised);color:var(--i);border-radius:8px;padding:8px 10px;font:400 13px var(--ui)} .mon .ctabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2} .mon .ctab{flex:1;border:1px solid var(--line);background:transparent;color:var(--m);border-radius:8px;padding:7px 4px;font:700 11.5px var(--ui)} .mon .ctab[aria-selected="true"]{background:var(--raised);color:var(--i);border-color:var(--f)} .mon .clist{position:relative} .mon .crow{position:absolute;left:0;right:0;height:64px;display:grid;grid-template-columns:34px 1fr 68px;gap:8px;align-items:center;padding:9px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;color:inherit;font:inherit;width:100%} .mon .crow .n{font-family:var(--mono);font-size:13px;color:var(--m)} .mon .crow .sym{font-family:var(--mono);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:6px} .mon .crow .st{font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .mon .crow .tot{font-family:var(--mono);font-size:13.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .mon .crow .spark{width:48px;height:18px;display:block;margin-left:auto} .mon .st.planning{color:var(--plan)} .mon .st.building{color:var(--build)} .mon .st.armed{color:var(--lock)} .mon .st.done{color:var(--good)} .mon .st.stopped{color:var(--bad)} .mon .st.flat{color:var(--f)} .mon .strip{position:relative;height:14px;margin-top:5px} .mon .strip .axis{position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line)} .mon .strip .band{position:absolute;top:4px;height:6px;background:var(--acw);border-top:1px solid var(--ac);border-bottom:1px solid var(--ac)} .mon .strip .zero{position:absolute;top:2px;width:1px;height:10px;background:var(--f)} .mon .strip .stop{position:absolute;top:1px;width:2px;height:12px;background:var(--bad)} .mon .strip .stop.locked{background:var(--lock)} .mon .strip .hi{position:absolute;top:1px;width:2px;height:12px;background:var(--good)} .mon .strip .hwm{position:absolute;top:0;width:1px;height:6px;background:var(--lock)} .mon .strip .mark{position:absolute;top:2px;width:10px;height:10px;border-radius:50%;background:var(--i);border:2px solid var(--surface);transform:translateX(-5px);box-shadow:0 0 0 1px var(--f)} .mon .strip .mark.pos{background:var(--good)} .mon .strip .mark.neg{background:var(--bad)} .mon .bigstrip{position:relative;height:92px;margin:4px 8px 0;flex:none} .mon .bigstrip .axis{position:absolute;left:0;right:0;top:45px;height:2px;background:var(--line)} .mon .bigstrip .band{position:absolute;top:38px;height:16px;background:var(--acw);border:1px solid var(--ac);border-radius:3px} .mon .bigstrip .tick{position:absolute;top:32px;width:2px;height:28px} .mon .bigstrip .tick.zero{background:var(--f);width:1px} .mon .bigstrip .tick.stop{background:var(--bad)} .mon .bigstrip .tick.stop.locked{background:var(--lock)} .mon .bigstrip .tick.hi{background:var(--good)} .mon .bigstrip .tick.hwm{background:var(--lock);height:12px;top:24px;width:1px} .mon .bigstrip .lab{position:absolute;top:66px;font-family:var(--mono);font-size:11px;color:var(--m);white-space:nowrap;line-height:1.2;background:var(--surface);padding:0 3px;border-radius:3px;z-index:2} .mon .bigstrip .lab.top{top:8px} .mon .bigstrip .lab.c{transform:translateX(-50%)} .mon .bigstrip .lab.l{transform:none} .mon .bigstrip .lab.r{transform:translateX(-100%)} .mon .bigstrip .lab.stop{color:var(--bad)} .mon .bigstrip .lab.stop.locked{color:var(--lock)} .mon .bigstrip .lab.hi{color:var(--good)} .mon .bigstrip .lab.lo{color:var(--ac)} .mon .bigstrip .mark{position:absolute;top:38px;width:16px;height:16px;border-radius:50%;background:var(--i);border:3px solid var(--surface);transform:translateX(-8px);box-shadow:0 0 0 1px var(--f)} .mon .bigstrip .mark.pos{background:var(--good)} .mon .bigstrip .mark.neg{background:var(--bad)} .mon .facts{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--mono);font-size:12px;color:var(--m)} .mon .facts b{color:var(--i);font-weight:600} .mon .lv{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;font-size:12px;font-family:var(--mono)} .mon .lv .k{color:var(--m);font-family:var(--ui);font-weight:600} .mon .lv .sw{display:inline-block;width:14px;border-top:2px dashed currentColor;vertical-align:middle;margin-right:6px} .mon .nochart{padding:22px 12px;border-radius:8px;background:var(--raised);color:var(--m);font-size:13px;text-align:center} .mon .thesis{font-size:13px;border-left:3px solid var(--ac);padding:4px 10px;background:var(--raised);border-radius:0 8px 8px 0} .mon .help{position:absolute;inset:0;background:var(--surface);display:none;flex-direction:column;z-index:6} .mon .help.open{display:flex} .mon .help .hhead{padding:8px 16px 8px;border-bottom:1px solid var(--line);flex:none;display:flex;align-items:center;gap:10px} .mon .help .hhead .name{font-weight:800;font-size:16px;flex:1} .mon .help .hhead .name small{display:block;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--f)} .mon .iconbtn,.mon .refresh{padding:0;line-height:1;display:grid;place-items:center} .mon .iconbtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--raised);color:var(--i);font:800 15px var(--ui);display:grid;place-items:center;flex:none} /* the help button is one of three, not the highlighted one (operator, 2026-09-21) */ .mon .help .hbody{flex:1;overflow:auto;min-height:0} .mon .search{padding:10px 12px 6px} .mon .search input{width:100%;border:1px solid var(--line);background:var(--raised);color:var(--i);border-radius:10px;padding:10px 12px;font:500 13.5px var(--ui)} .mon .sec h4 span.n{font-weight:600;letter-spacing:0;text-transform:none;color:var(--lock);float:right} .mon .guides{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px} .mon .guide{flex:none;width:150px;background:var(--raised);border-radius:10px;padding:9px 10px;font-size:12.5px;border:1px solid transparent;text-align:left;color:inherit;font-family:inherit} .mon .guide b{display:block;font-size:12.5px;line-height:1.3} .mon .guide small{display:block;color:var(--m);font-size:11px;margin-top:3px} .mon .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .mon .topic{display:block;background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 9px;text-align:left;color:inherit;font:inherit} .mon .topic .ic{font-size:16px;line-height:1.2} .mon .topic b{display:block;font-size:12.5px} .mon .topic small{display:block;color:var(--m);font-size:10.5px;line-height:1.3} .mon .topic .cnt{font-family:var(--mono);font-size:10px;color:var(--f)} .mon .ttabs{display:flex;padding:0 8px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:2} .mon .ttab{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--m);padding:9px 2px 8px;font:700 11px var(--ui);margin-bottom:-1px;letter-spacing:.02em;text-transform:uppercase} .mon .ttab[aria-selected="true"]{color:var(--i);border-bottom-color:var(--ac)} .mon .cmd{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:8px 16px;border-bottom:1px solid var(--line);align-items:start} .mon .cmd .v{font-family:var(--mono);font-size:12.5px;font-weight:600} .mon .cmd .b{font-size:12px;color:var(--m);margin-top:2px} .mon .cmd .hd{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--f);padding-top:4px} .mon .badge{display:inline-block;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--raised);color:var(--m)} .mon .badge.read{color:var(--good)} .mon .badge.app{color:var(--ac)} .mon .badge.manage{color:var(--lock)} .mon .badge.decide{color:var(--warn)} .mon .badge.manual_order{color:var(--bad)} .mon .badge.tap{color:var(--ac);border:1px solid var(--ac)} .mon .cmd .x{grid-column:1/-1;display:none;background:var(--raised);border-radius:8px;padding:8px 10px;font-size:12px} .mon .cmd.open .x{display:block} .mon .exlist{padding:8px 16px;display:flex;flex-direction:column;gap:6px} .mon .exrow{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--raised);border-radius:8px;padding:7px 10px;font-family:var(--mono);font-size:12px;white-space:pre-wrap} .mon .exrow button,.mon .cmd button{border:1px solid var(--line);background:transparent;color:var(--lock);border-radius:6px;padding:2px 8px;font:700 11px var(--ui);flex:none} .mon .hdetails{padding:12px 16px 16px;font-size:13.5px;line-height:1.5} .mon .hdetails b{font-weight:700} .mon .hdetails i{font-style:normal;color:var(--m)} .mon .hdetails .ttl{font-size:16px;font-weight:800;line-height:1.3} .mon .hdetails .tsub{color:var(--m);font-size:13px;margin:2px 0 10px} .mon .hdetails h5{margin:16px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--f)} .mon .hdetails p{margin:6px 0} .mon .hdetails ul{list-style:none;margin:0;padding:0} .mon .hdetails li{padding:7px 0;border-bottom:1px solid var(--line)} .mon .hdetails li:last-child{border-bottom:0} .mon .hdetails li .k{font-weight:600} .mon .hdetails li .d{color:var(--m);font-size:12.5px;margin-top:2px} .mon .hdetails li .d i{color:var(--m)} .mon .hdetails code{font-family:var(--mono);font-size:.92em;background:var(--raised);padding:1px 4px;border-radius:4px} .mon .hdetails pre{font-family:var(--mono);font-size:12px;background:var(--raised);padding:8px;border-radius:8px;overflow-x:auto} .mon .concept{padding:8px 16px;border-bottom:1px solid var(--line);font-size:12.5px} .mon .concept b{display:block} .mon .concept span{color:var(--m)} .mon .steps{margin:0;padding-left:18px;font-size:13px} .mon .steps li{margin:6px 0} .mon .steps .ex{font-family:var(--mono);font-size:12px;background:var(--raised);border-radius:6px;padding:4px 8px;display:inline-block;margin-top:2px} .mon .steps small{display:block;color:var(--m);font-size:11.5px} .mon .hfoot{flex:none;border-top:1px solid var(--line);padding:8px 16px 12px;font-size:12px;color:var(--m)} /* Wealth · Positions as a table (operator ruling, 2026-09-26). Was a three-part flex row carrying two bars that encoded weight and P&L a second time, in lengths nobody could read against the row above. Five columns that line up, and ONLY the P&L column takes colour — a value is not a gain. The row stays a real