/* Mission Log. The Borderlands 1 mission log, an ECHO console of mission list, briefing and objectives,
   in Jinchi's neon palette. One committed dark world (the console has no daylight version). */
@font-face{font-family:"Geist";src:url("assets/Geist-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/Geist-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/GeistMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/GeistMono-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#13130F; --panel:#16140E; --panel2:#1E1B13; --well:#100F0A;
  --edge:#3A3424; --edge2:#55492F; --ink:#F1EBDA; --soft:#B3AA92; --faint:#736B55;
  --teal:#40E0D0; --pink:#FF1493; --amber:#F0C840; --violet:#8A2BE2; --violet-t:#B48CFF; --coral:#FF8A3D;
  --on-teal:#0E0D09;
  /* mission priority, as BL1's difficulty colours: urgent red, orange, yellow, white, easy, trivial grey */
  --p5:var(--pink); --p4:var(--coral); --p3:var(--amber); --p2:var(--ink); --p1:var(--violet-t); --p0:var(--faint);
  --cut:10px; --tap:44px;
  --display:"Geist Mono","Noto Sans TC",ui-monospace,monospace;   /* headers, labels, buttons, numbers; reading text stays Geist */
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
/* body stays transparent: its own background would paint over the console art layer (body::before, z-index -1) */
html,body{color:var(--ink);font:15px/1.45 "Geist","Noto Sans TC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
/* The console. A flat, drawn frame (clean BL1 ECHO lines, not grungy art): it stays crisp at any window shape and
   nothing in it can collide with the app. Phones use the whole screen; desktop sits the app inside the frame. */
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%,#18201F 0%,var(--bg) 60%),var(--bg)}
.frame{display:none}
@media(min-width:860px){
  .frame{display:block;position:fixed;inset:22px 26px;pointer-events:none;z-index:0;--c:30px;
    background:color-mix(in srgb,var(--teal) 55%,transparent);filter:drop-shadow(0 0 10px rgba(64,224,208,.18));
    clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
  .frame::before{content:"";position:absolute;inset:1.5px;background:linear-gradient(180deg,#141917,#111312 70%);
    clip-path:polygon(calc(var(--c) - .6px) 0,100% 0,100% calc(100% - var(--c) + .6px),calc(100% - var(--c) + .6px) 100%,0 100%,0 calc(var(--c) - .6px))}
  /* small accents, BL1-style notches: amber on the top edge, magenta ticks top right, amber bottom left, a cyan rule at the bottom */
  .frame i{position:absolute;display:block}
  .frame .a1{top:0;left:72px;width:150px;height:3px;background:var(--amber)}
  .frame .a2{top:10px;right:22px;width:46px;height:10px;background:repeating-linear-gradient(115deg,var(--pink) 0 6px,transparent 6px 12px)}
  .frame .a3{bottom:0;left:40px;width:96px;height:3px;background:var(--amber)}
  .frame .a4{bottom:0;right:120px;width:220px;height:3px;background:var(--teal)}
  .frame .a5{top:30%;left:0;width:3px;height:64px;background:var(--pink)}
  html,body{height:100%;overflow:hidden}
  .app{position:fixed;inset:40px 46px;z-index:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--edge2) transparent;
    clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
  .echo{background:linear-gradient(rgba(17,20,19,.96),rgba(17,20,19,.9))}
  .scan{inset:22px 26px}
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.mono{font-family:"Geist Mono","Noto Sans TC",monospace}
.grow{flex:1;min-width:0}

/* faint CRT scanlines over everything; purely decorative */
.scan{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.22;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}

/* ---------- ECHO header ---------- */
.echo{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--edge);padding-top:env(safe-area-inset-top)}
.echo-in{display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto;padding:10px 16px}
.mark{display:flex;align-items:center;gap:9px}
.bang{display:grid;place-items:center;width:26px;height:26px;background:var(--amber);color:var(--bg);
  font:700 17px/1 var(--display);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.wm{white-space:nowrap;font:700 19px/1 var(--display);letter-spacing:0;text-transform:uppercase}
.lvl{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:4px 6px;min-height:var(--tap);justify-content:center}
.lv{font:400 11.5px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;color:var(--soft)}
.lv b{color:var(--teal);font-size:18px;margin-left:2px}
.xpbar{display:block;width:96px;height:5px;background:var(--well);border:1px solid var(--edge)}
.xpbar i{display:block;height:100%;width:0;background:var(--teal);box-shadow:0 0 8px var(--teal);transition:width .6s}
.iconbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;color:var(--soft)}
.iconbtn:hover{color:var(--ink)}

/* tracked mission, like the BL objective tracker on the HUD */
.hud{max-width:1180px;margin:0 auto;padding:0 16px}
.hud:empty{display:none}
.hud .trk{display:flex;align-items:center;gap:10px;padding:7px 0 9px;cursor:pointer}
.hud .trk .lab{font:400 10.5px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;color:var(--amber)}
.hud .trk .t{font:700 14.5px/1.2 "Geist","Noto Sans TC",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .trk .o{font-size:12.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- console: list + briefing ---------- */
.console{max-width:1180px;margin:0 auto;padding:14px 16px 40px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){ .console{grid-template-columns:minmax(320px,400px) 1fr;align-items:start}
  .pane.detail{position:sticky;top:var(--stick,80px)} }   /* --stick = header height + the console's top padding, set in JS */
/* Bevelled frames: the element is filled with the edge colour and clipped to a chamfered shape; ::before is the
   face, inset 1px with the same chamfer, so the border follows the cut corners instead of vanishing there. */
.pane{--bev:var(--cut);position:relative;isolation:isolate;background:var(--edge);
  clip-path:polygon(var(--bev) 0,100% 0,100% calc(100% - var(--bev)),calc(100% - var(--bev)) 100%,0 100%,0 var(--bev))}
.pane::before{content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--panel2),var(--panel));
  clip-path:polygon(calc(var(--bev) - .4px) 0,100% 0,100% calc(100% - var(--bev) + .4px),calc(100% - var(--bev) + .4px) 100%,0 100%,0 calc(var(--bev) - .4px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 40px rgba(0,0,0,.35)}
@media(max-width:859px){ body.reading .list{display:none} body:not(.reading) .detail{display:none} }

/* nav: All, each zone, Stats; scrolls sideways when there are more zones than fit */
.tabs{display:flex;border-bottom:1px solid var(--edge);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 1 0;min-width:0;justify-content:center;padding:0 4px;white-space:nowrap;min-height:var(--tap);font:400 12.5px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--faint);
  border-bottom:2px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--teal);text-shadow:0 0 12px rgba(64,224,208,.35)}
.tabs .n{font:400 11px/1 "Geist Mono","Noto Sans TC",monospace;color:var(--faint);margin-left:5px;letter-spacing:0}
.tools{display:flex;gap:8px;padding:12px 12px 6px;align-items:center}
.find{flex:1;display:flex;align-items:center;gap:8px;background:var(--well);border:1px solid var(--edge);padding:0 10px;min-height:var(--tap)}
.find span{font-size:10.5px;color:var(--faint);letter-spacing:0;text-transform:uppercase}
.find input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 16px;
  font:700 13.5px/1 var(--display);letter-spacing:0;text-transform:uppercase;color:var(--on-teal);background:var(--teal);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost,.btn.warn{position:relative;isolation:isolate;background:var(--edge2);color:var(--soft)}
.btn.warn{background:color-mix(in srgb,var(--pink) 50%,var(--panel));color:var(--pink)}
.btn.ghost::before,.btn.warn::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--panel);
  clip-path:polygon(7.6px 0,100% 0,100% calc(100% - 7.6px),calc(100% - 7.6px) 100%,0 100%,0 7.6px)}
.btn.ghost:hover{color:var(--ink)} .btn.ghost:hover::before{background:var(--panel2)}
.btn.amber{background:var(--amber)}
.btn.wide{width:100%}
.btn.sm{min-height:36px;font-size:13px;padding:0 12px}
.new{white-space:nowrap}

/* mission list */
.mlist{padding:4px 0 10px}
.zone{display:flex;align-items:baseline;gap:8px;padding:12px 14px 4px;font:400 11.5px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--soft)}
.zone::after{content:"";flex:1;height:1px;background:var(--edge);transform:translateY(-3px)}
.zone .n{font:400 11px/1 "Geist Mono","Noto Sans TC",monospace;color:var(--faint);letter-spacing:0;order:2}
.mrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:5px 14px;min-height:40px;position:relative;border-left:3px solid transparent}
.mrow:hover{background:rgba(255,255,255,.025)}
.mrow[aria-current="true"]{background:linear-gradient(90deg,rgba(64,224,208,.10),transparent 70%);border-left-color:var(--teal)}
.dia{width:11px;height:11px;flex:none;background:var(--pc,var(--ink));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 8px var(--pc)}
.mrow .t{font:700 15.5px/1.25 "Geist","Noto Sans TC",system-ui,sans-serif;color:var(--ink)}
.mrow .m{font-size:12px;color:var(--faint);margin-top:1px;display:flex;gap:8px;flex-wrap:wrap}
.mrow.done .t{color:var(--soft)}
.mrow .trkd{font:400 9.5px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);padding:3px 5px}
.prog{font-family:"Geist Mono","Noto Sans TC",monospace;font-size:12px;color:var(--soft);white-space:nowrap}
.due{font-family:"Geist Mono","Noto Sans TC",monospace;font-size:11px;white-space:nowrap;padding:2px 6px;border:1px solid var(--edge2);color:var(--soft)}
.due.today{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 60%,transparent)}
.due.late{color:var(--pink);border-color:color-mix(in srgb,var(--pink) 60%,transparent)}
.empty{padding:26px 16px;text-align:center;color:var(--faint);font-size:14px}
.empty b{display:block;font:700 15px/1.2 var(--display);letter-spacing:0;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.more{display:block;width:100%;padding:12px;font:400 12px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--soft)}

/* briefing */
.detail{padding:0}
.back{display:none;align-items:center;gap:6px;padding:12px 16px 0;font:400 12px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;color:var(--soft);min-height:var(--tap)}
@media(max-width:859px){ .back{display:flex} }
.brief{padding:18px 20px 22px}
.eyebrow{display:flex;gap:10px;align-items:center;font:400 11.5px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--soft)}
.eyebrow .pr{color:var(--pc)}
.brief h1{font:700 clamp(24px,5.2vw,34px)/1.12 "Geist","Noto Sans TC",system-ui,sans-serif;letter-spacing:0;margin:10px 0 6px;
  text-wrap:balance;text-shadow:0 0 22px rgba(255,255,255,.05);overflow-wrap:anywhere}
.brief .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.brief .desc{color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere;max-width:65ch}
.sec{font:400 11.5px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--amber);margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge2),transparent)}
.obj{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--edge)}
.obj:last-child{border-bottom:0}
.box{width:22px;height:22px;flex:none;border:2px solid var(--edge2);display:grid;place-items:center;color:var(--on-teal);font:700 14px/1 var(--display)}
.obj.done .box{background:var(--teal);border-color:var(--teal);box-shadow:0 0 10px rgba(64,224,208,.45)}
.obj .ot{flex:1;min-width:0;overflow-wrap:anywhere}
.obj.done .ot{color:var(--soft);text-decoration:line-through;text-decoration-color:var(--faint)}
.obj .cnt{font-family:"Geist Mono","Noto Sans TC",monospace;font-size:13px;color:var(--soft);min-width:44px;text-align:right}
.step{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--edge2);color:var(--soft);font:400 18px/1 "Geist Mono","Noto Sans TC",monospace}
.step:hover{color:var(--ink);border-color:var(--soft)}
.reward{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--well);border:1px solid var(--edge)}
.reward .xp{white-space:nowrap;font:700 24px/1 var(--display);color:var(--teal);letter-spacing:0;text-shadow:0 0 14px rgba(64,224,208,.4)}
.reward .r{font-size:12.5px;color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.actions .btn{flex:1 1 auto}
.turned{margin-top:16px;font-family:"Geist Mono","Noto Sans TC",monospace;font-size:12.5px;color:var(--teal)}

/* stats */
.stats{padding:18px 20px 22px}
.bigl{font:700 64px/.95 var(--display);color:var(--teal);text-shadow:0 0 30px rgba(64,224,208,.35)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:16px}
.stat{background:var(--well);border:1px solid var(--edge);padding:12px}
.stat b{display:block;font:700 24px/1 var(--display)}
.stat span{font-size:11.5px;color:var(--faint);letter-spacing:0;text-transform:uppercase}
.squad .mrow{cursor:default}

/* sheets (forms) */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(5,5,3,.72);display:none;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
@media(min-width:700px){ .sheet{align-items:center} }
/* the sheet scrolls, so it keeps a plain square frame (a bevel face layer would scroll away with the content) */
.sheet-in{width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:20px 18px 24px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge2);border-top:2px solid var(--teal);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.sheet h3{font:700 19px/1 var(--display);letter-spacing:0;text-transform:uppercase;margin-bottom:14px}
.f{display:block;margin-bottom:12px}
.f>span{display:block;font:400 11px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--well);border:1px solid var(--edge2);padding:10px 12px;min-height:var(--tap);font-size:16px;border-radius:0}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.objedit{display:flex;gap:8px;margin-bottom:8px}
.objedit input:first-child{flex:1}
.objedit .tg{width:84px;flex:none}
.hint{font-size:12.5px;color:var(--faint);margin:-4px 0 12px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{min-height:38px;padding:0 12px;border:1px solid var(--edge2);font:400 12px/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--soft)}
.seg button[aria-pressed="true"]{border-color:var(--pc,var(--teal));color:var(--pc,var(--teal));box-shadow:inset 0 0 0 1px var(--pc,var(--teal))}
.huepick button{width:40px;padding:0;display:grid;place-items:center}
.huepick button i{width:16px;height:16px;display:block;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.err{color:var(--pink);font-size:13px;min-height:1.2em;margin-top:10px}
.diag{font-family:"Geist Mono","Noto Sans TC",monospace;font-size:11.5px;color:var(--faint);line-height:1.7;word-break:break-all;margin-top:14px}
hr{border:0;border-top:1px solid var(--edge);margin:18px 0}

/* MISSION COMPLETE */
.banner{position:fixed;inset:0;z-index:60;display:none;place-items:center;pointer-events:none;
  background:rgba(10,9,6,.9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.banner.on{display:grid}
.banner .b-in{text-align:center;padding:0 12px;animation:pop 1.9s ease-out both;width:min(96vw,920px)}
/* the generated HUD frame, cropped to its edges; the open centre spans ~9-91% across and 23-77% down, so the words are sized to the frame's width */
.banner .frame{position:relative;width:100%;aspect-ratio:1070/226;container-type:inline-size;
  background:url("assets/complete-frame.webp?v=2") center/contain no-repeat;display:grid;place-items:center}
.banner .k{font:700 6cqw/1 "Geist Mono","Noto Sans TC",monospace;letter-spacing:0;text-transform:uppercase;color:var(--teal);white-space:nowrap;max-width:72%;
  text-shadow:0 0 18px rgba(64,224,208,.6),0 0 44px rgba(64,224,208,.3)}
.banner.lvlup .frame{filter:hue-rotate(-128deg) saturate(1.2)}
.banner.lvlup .k{color:var(--amber);text-shadow:0 0 24px rgba(240,200,64,.7),0 0 60px rgba(240,200,64,.35)}
.banner .s{margin-top:18px;font:700 clamp(15px,3.6vw,20px)/1.3 "Geist","Noto Sans TC",system-ui,sans-serif;letter-spacing:0;color:var(--ink);margin-top:10px;overflow-wrap:anywhere}
.banner .x{font:700 clamp(22px,5vw,32px)/1 "Geist Mono","Noto Sans TC",monospace;color:var(--amber);margin-top:10px;letter-spacing:0}
@keyframes pop{0%{opacity:0;transform:scale(1.25)}12%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){ .banner .b-in{animation:fade 1.9s linear both} @keyframes fade{0%,100%{opacity:0}10%,80%{opacity:1}} .xpbar i{transition:none} }

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:70;opacity:0;pointer-events:none;
  background:var(--panel2);border:1px solid var(--edge2);padding:10px 16px;font-size:14px;transition:.2s;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

#mp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
input[type=file]{padding:8px;font-size:14px;color:var(--soft)}
input[type=file]::file-selector-button{font:700 12.5px/1 var(--display);letter-spacing:0;text-transform:uppercase;background:var(--panel2);color:var(--ink);
  border:1px solid var(--edge2);padding:9px 12px;margin-right:10px;cursor:pointer}
.eyebrow .pr{display:inline-flex;align-items:center;gap:6px}
@media(max-width:380px){ .wm{font-size:16px;letter-spacing:0} }

/* Active / Completed parts of a list view */
.part{display:flex;align-items:baseline;gap:8px;padding:16px 14px 4px;font:700 13px/1 var(--display);text-transform:uppercase;color:var(--teal)}
.part .n{font:400 12px/1 var(--display);color:var(--faint)}
.part.done{color:var(--soft);margin-top:14px;border-top:1px solid var(--edge);padding-top:18px}
/* app shell: the page never scrolls or bounces; only the app area does (phones: the whole screen; desktop: inside the frame) */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
@media(max-width:859px){ .app{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} }

/* zone emblems */
.zi{width:20px;height:20px;flex:none;object-fit:contain;filter:drop-shadow(0 0 4px rgba(0,0,0,.5))}
.tabs button{display:inline-flex;align-items:center;gap:5px}
.zone .zi{width:18px;height:18px;transform:translateY(3px)}
.eyebrow .zi{width:18px;height:18px}
.console>.pane{min-width:0}   /* grid items default to min-width:auto, which let a long zone nav stretch the panel past the screen */

/* weekly record chart */
.chart{position:relative;margin-top:14px;padding:14px 14px 10px;background:var(--well);border:1px solid var(--edge)}
.ctitle{font:700 13px/1 var(--display);color:var(--ink);display:flex;gap:10px;align-items:baseline}
.ctitle span{font-weight:400;color:var(--faint);font-size:11.5px}
.plot{position:relative;height:150px;margin-top:14px;padding-left:22px}
.grid{position:absolute;inset:0 0 0 22px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.grid span{height:0;border-top:1px dashed color-mix(in srgb,var(--edge2) 70%,transparent);position:relative}
.grid span::before{content:attr(data-v);position:absolute;left:-22px;top:-7px;font:400 10.5px/1 var(--display);color:var(--faint)}
.bars{position:absolute;inset:0 0 0 22px;display:flex;gap:4px;align-items:stretch}
.wk{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0;border-radius:0}
.wk .stack{display:flex;flex-direction:column-reverse;gap:2px;height:100%;justify-content:flex-start}
.wk .stack i{display:block;width:100%;min-height:3px}
.wk .stack i:last-child{border-radius:4px 4px 0 0}
.wk.now .stack{outline:1px dashed color-mix(in srgb,var(--teal) 45%,transparent);outline-offset:2px}
.wk.hot,.wk:hover{background:rgba(255,255,255,.04)}
.xax{display:flex;justify-content:space-between;padding:6px 0 0 22px;font:400 10.5px/1 var(--display);color:var(--faint)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12.5px;color:var(--soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:block}
.legend .zi{width:16px;height:16px}
.ctip{position:absolute;z-index:3;white-space:pre;pointer-events:none;background:var(--panel2);border:1px solid var(--edge2);padding:7px 9px;font:400 12px/1.45 var(--display);color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.tview{margin-top:10px;font-size:12.5px;color:var(--soft)}
.tview summary{cursor:pointer;font:400 12px/1 var(--display);color:var(--faint);padding:6px 0}
.tview table{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
.tview th,.tview td{text-align:right;padding:4px 6px;border-bottom:1px solid var(--edge)} .tview th:first-child,.tview td:first-child{text-align:left}
.tview{overflow-x:auto}
.zsw{width:10px;height:10px;border-radius:2px;flex:none}
.tabs button .zi{width:22px;height:22px}
.tabs button svg{flex:none}
.part .zi{width:18px;height:18px;align-self:center}
.part .sep{color:var(--faint)}