/* Trading Journal — same dark band-and-tile system as Strategy Tester. Everything is scoped to #tj so theme styles can't leak in or out. */
#tj{
  --bg:#000000; --panel:#080808; --tile:#111111; --line:#2C2C2C; --edge:#1E1E1E;
  --fg:#FFFFFF; --mut:#999999; --dim:#707070;
  --purple:#9581FC; --blue:#4D9FE5; --cyan:#44CACF; --teal:#18A98F; --green:#9DCF6C; --yellow:#F6DF53; --orange:#FBB158;
  --pos:#4D9FE5; --neg:#FBB158; --ink:#0A0A0A;
  --disp:"Lexend",Verdana,sans-serif; --body:Verdana,Geneva,"DejaVu Sans",sans-serif;
  color-scheme:dark;
  background:var(--bg);color:var(--fg);font:13px/1.45 var(--body);text-align:left;
  padding-inline:16px;padding-block:20px 48px;
}
body.tj-full{margin:0;background:#000}
#tj.tj-embed{border-radius:12px;max-width:100%}
#tj *,#tj *::before,#tj *::after{box-sizing:border-box}
#tj [hidden]{display:none!important}
#tj p{margin:0}
#tj button,#tj input,#tj select,#tj textarea{font:inherit;color:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;line-height:normal;margin:0}
#tj a{color:var(--cyan)}
#tj :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#tj .tj-wrap{width:100%;min-width:0;max-width:1500px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding:0}
#tj h1{font:600 22px var(--disp);margin:0;color:var(--fg);letter-spacing:0;text-transform:none}
#tj h2{font:500 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0}
#tj h3{color:var(--fg);letter-spacing:0;text-transform:none}
#tj .num{font-variant-numeric:tabular-nums}
#tj .pos{color:var(--pos)}#tj .neg{color:var(--neg)}#tj .mut{color:var(--mut)}
#tj .top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
#tj .top p{margin:2px 0 0;color:var(--mut);font-size:12px;max-width:70ch}
#tj .btn{background:var(--purple);color:var(--ink);border:0;border-radius:6px;padding:9px 16px;font-weight:bold;cursor:pointer}
#tj .btn:hover{filter:brightness(1.1)}#tj .btn:disabled{opacity:.5;cursor:default}
#tj .ghost{background:none;border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;color:var(--mut)}
#tj .ghost:hover{color:var(--fg);border-color:var(--mut)}
#tj .ghost:disabled{opacity:.4;cursor:default}
#tj .ghost.danger:hover{color:var(--orange);border-color:var(--orange)}
#tj .band{background:var(--panel);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
#tj .bandhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
#tj .grid{display:grid;gap:10px}
#tj .inputs{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#tj .tile{background:var(--tile);border-radius:8px;padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--c,var(--line))}
#tj .tile>label{font-size:11px;opacity:.85;color:var(--fg)}
#tj .tile .row{display:flex;gap:6px;align-items:center}
#tj .tile select,#tj .tile input[type=date]{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:6px 8px;width:100%;min-width:0;font-size:13px;height:auto}
#tj .seg{display:flex;background:var(--bg);border-radius:5px;padding:2px;border:1px solid var(--line)}
#tj .seg button{flex:1;border:0;background:none;padding:5px 8px;border-radius:4px;cursor:pointer;color:var(--mut);font-size:12px}
#tj .seg button[aria-pressed=true]{background:var(--c,var(--green));color:var(--ink);font-weight:bold}
#tj .main{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
@media(max-width:1000px){#tj .main{grid-template-columns:minmax(0,1fr)}}
#tj .chartbox{position:relative;height:340px;min-width:0}
#tj .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:620px){#tj .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
#tj .kpi{background:var(--tile);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:96px;align-items:center;text-align:center}
#tj .kpi .lbl{font-size:13px}
#tj .kpi .big{margin-block:auto;font:500 30px/1.2 var(--disp);color:var(--c);overflow-wrap:anywhere}
#tj .kpi dl{margin:auto 0;width:min(100%,200px);padding-inline:10px;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:1px 10px;color:var(--c);font:500 16px var(--disp)}
#tj .kpi dt{font:12px var(--body);color:var(--mut);align-self:center;margin:0}
#tj .kpi dd{margin:0;text-align:right}
#tj #msg{background:var(--tile);border-left:3px solid var(--orange);border-radius:6px;padding:8px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
#tj #msg.ok{border-left-color:var(--cyan)}
#tj .note{color:var(--mut);font-size:11px}
#tj #imp{border:1px solid var(--purple)}
#tj #imp .stats{display:flex;flex-wrap:wrap;gap:18px}
#tj #imp .stats b{font:500 22px var(--disp);display:block}
#tj .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#tj .empty{text-align:center;padding:36px 16px;align-items:center;gap:10px}
#tj .empty h3{font:500 18px var(--disp);margin:0}
#tj .empty ol{text-align:left;color:var(--mut);margin:0;padding-left:20px;max-width:60ch}
#tj .calwrap{display:grid;gap:14px;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media(max-width:1000px){#tj .calwrap{grid-template-columns:minmax(0,1fr)}}
#tj .cal{background:var(--tile);border-radius:8px;overflow:hidden;min-width:0;align-self:start}
#tj .cal header{display:flex;justify-content:space-between;align-items:center;background:var(--cyan);color:var(--ink);font:600 14px var(--disp);padding:6px 10px;margin:0}
#tj .cal header button{background:none;border:0;color:var(--ink);cursor:pointer;font:600 14px var(--disp);padding:2px 8px}
#tj .cg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1.1fr);gap:1px;background:var(--panel)}
#tj .cg>div,#tj .cg>button{background:var(--tile);min-height:64px;padding:4px 5px;font-size:10px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;border:0;border-radius:0;text-align:left;color:inherit}
#tj .cg>button{cursor:pointer}
#tj .cg>button:hover{background:#262626}
#tj .cg>button[aria-pressed=true]{outline:2px solid var(--cyan);outline-offset:-2px}
#tj .cg>.out{background:var(--bg);color:var(--dim)}
#tj .cg>.dh{min-height:0;text-align:center;color:var(--mut);padding:4px 0;display:block}
#tj .cg .d{display:flex;justify-content:space-between;color:var(--dim);width:100%}
#tj .cg .d i{width:6px;height:6px;border-radius:50%;background:var(--yellow);align-self:center}
#tj .cg .v{font:500 12px var(--disp);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tj .cg .c{text-align:center;color:var(--dim)}
#tj .cg .wk{background:var(--panel);justify-content:center;align-items:center}
#tj .cg .day.win{box-shadow:inset 0 -3px 0 var(--pos)}
#tj .cg .day.loss{box-shadow:inset 0 -3px 0 var(--neg)}
#tj .daypanel{background:var(--tile);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
#tj .daypanel h3{margin:0;font:600 16px var(--disp)}
#tj .field{display:flex;flex-direction:column;gap:4px}
#tj .field>span{font-size:11px;color:var(--mut)}
#tj textarea{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%;min-height:68px;resize:vertical;line-height:1.45}
#tj .inline{display:flex;flex-wrap:wrap;gap:10px}
#tj .inline .field{flex:1;min-width:150px}
#tj .scroll{overflow-x:auto;min-width:0}
#tj table{border-collapse:collapse;width:100%;font-size:12px;margin:0;border:0;background:none}
#tj th,#tj td{padding:6px 8px;text-align:right;white-space:nowrap;border:0;background:none;color:inherit;vertical-align:middle}
#tj th:first-child,#tj td:first-child{text-align:left}
#tj td.l,#tj th.l{text-align:left}
#tj thead th{color:var(--mut);font-weight:normal;position:sticky;top:0;background:var(--panel)}
#tj .daypanel thead th{background:var(--tile)}
#tj tbody tr:nth-child(odd){background:rgba(255,255,255,.025)}
#tj tbody tr.click{cursor:pointer}
#tj tbody tr.click:hover{background:rgba(68,202,207,.10)}
#tj .tall{max-height:520px;overflow:auto}
#tj .chip{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:0 7px;font-size:11px;color:var(--mut);margin-right:3px}
#tj .chip.m{border-color:var(--orange);color:var(--orange)}
#tj .g{display:inline-block;min-width:20px;text-align:center;border-radius:4px;font:600 11px var(--disp);color:var(--ink);padding:1px 4px}
#tj .gA{background:var(--teal)}#tj .gB{background:var(--green)}#tj .gC{background:var(--yellow)}#tj .gD{background:var(--orange)}#tj .gF{background:#F27D6B}
#tj .two{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
#tj .fold{align-self:start;min-width:0}
#tj .fold>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;background:var(--tile);border-radius:6px;padding:9px 12px;font:500 13px var(--disp)}
#tj .fold>summary::-webkit-details-marker{display:none}
#tj .fold>summary::after{content:"Show ▾";color:var(--mut);font:12px var(--body)}
#tj .fold[open]>summary::after{content:"Hide ▴"}
#tj .fold[open]>summary{margin-bottom:6px}
#tj dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 32px)}
#tj dialog::backdrop{background:rgba(0,0,0,.75)}
#tj .dl{padding:16px;display:flex;flex-direction:column;gap:12px}
#tj .dl header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:0;padding:0;background:none}
#tj .dl header h3{margin:0;font:600 18px var(--disp)}
#tj .dl .pl{font:500 30px var(--disp)}
#tj .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
#tj .facts div{background:var(--tile);border-radius:6px;padding:6px 9px;display:flex;flex-direction:column}
#tj .facts span{font-size:10px;color:var(--mut)}
#tj .facts b{font:500 13px var(--disp);font-variant-numeric:tabular-nums}
#tj .txt{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:7px 9px;width:100%;min-width:0;height:auto}
#tj .chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
#tj .chips button.chip{cursor:pointer;background:none}
#tj .chips button.chip::after{content:" ×"}
#tj .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
#tj .shot{position:relative;background:var(--bg);border-radius:6px;overflow:hidden;aspect-ratio:16/10;max-width:100%}
#tj .shot img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
#tj .shot button{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.7);border:0;color:var(--fg);border-radius:4px;cursor:pointer;padding:1px 6px}
#tj .dropzone{border:1px dashed var(--line);border-radius:6px;padding:10px;text-align:center;color:var(--mut);font-size:12px}
#tj .foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
#tj .confirm{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--orange);font-size:12px}
#tj #drop{position:fixed;inset:0;background:rgba(0,0,0,.88);display:grid;place-items:center;font:600 22px var(--disp);color:var(--cyan);border:3px dashed var(--cyan);z-index:99999}
#tj .tj-gate{background:var(--panel);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:12px;max-width:560px}
#tj .tj-gate-btn,.tj-gate-btn{display:inline-block;background:#9581FC;color:#0A0A0A;border-radius:6px;padding:9px 16px;font-weight:bold;text-decoration:none}
.tj-gate{padding:20px;border:1px solid #ddd;border-radius:8px}
.tj-gate p{margin:0 0 10px}
.tj-gate-link{margin-left:12px}
#tj .row2{display:flex;gap:8px;align-items:center;margin-top:4px}
#tj .row2 .txt{flex:1;min-width:0}
#tj select.txt{height:auto;cursor:pointer}
#tj .setbox{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:8px}

/* Black-first surfaces to match the landing page: near-black bands and tiles, defined by thin edges instead of gray fills */
#tj .band{border:1px solid var(--edge)}
#tj .tile,#tj .kpi,#tj .cal,#tj .fold>summary{border:1px solid var(--edge)}
#tj .daypanel,#tj .facts div,#tj #msg,#tj .tj-gate{border:1px solid var(--edge)}
#tj .tile{border-top:3px solid var(--c,var(--line))}
#tj #msg{border-left:3px solid var(--orange)}
#tj .cg>button:hover{background:#1C1C1C}
#tj .chhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
#tj .chctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#tj .seg.sm button{padding:3px 10px;font-size:12px}#tj select.txt.sm{width:auto;padding:4px 8px;font-size:12px}
#tj .chartwrap{display:flex;flex-direction:column;gap:6px;margin-top:6px}
#tj .chbox{height:340px;border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:#0A0A0A}
#tj .chartwrap .note a{color:var(--mut);text-decoration:underline}
/* Every stat tile the same height: rows share the tallest row height */
#tj .kpis{grid-auto-rows:1fr}
/* Print: white page, black text, no colour */
#printHead{display:none}
@media print{
@page{margin:12mm}
html,body{background:#fff!important}
*,*::before,*::after{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;border-color:#bbb!important;-webkit-print-color-adjust:economy;print-color-adjust:economy}
.ce-navwrap,.ce-head,.ce-nav,.ghost,.btn,input[type=file],input[type=checkbox],#msg,#aiBox,#tabs,#srcBand,.advtabs,#drop,dialog,.foot,.chev,#imp,.top p,.top .actions,.seg button:not([aria-pressed=true]){display:none!important}
#cPrev,#cNext{display:none!important}
*{outline-color:#000!important}
#printHead{display:block;font-size:12px;margin:2px 0 12px}
.seg{border:0!important;padding:0!important;display:block!important}
.seg button{border:0!important;padding:0!important;font-weight:600;text-align:left}
input,select,textarea{border:0!important;padding:0!important;appearance:none;-webkit-appearance:none;resize:none}
textarea{field-sizing:content;min-height:0}
canvas{filter:grayscale(1) brightness(.55);max-width:100%!important;height:auto!important}
.tall,.scroll{max-height:none!important;overflow:visible!important}
.kpi,.tile,.chartbox,.wd,.cal,.mtile,.src,.verdict,.sub,tr{break-inside:avoid}
.band{border:1px solid #bbb!important}
.advpane[data-t]::before{content:attr(data-t);display:block;font-weight:600;font-size:15px;margin:16px 0 8px}
}
/* Print, simplified: every card becomes one plain line of a list; charts and tables stay */
@media print{
body,.wrap,.tj-wrap{font:11px/1.45 Arial,Helvetica,sans-serif!important;max-width:none!important;padding:0!important;margin:0!important}
h1{font-size:18px!important;margin:0!important}
.grid{display:block!important}
.band,.sub,.daypanel,.calwrap{border:0!important;padding:0!important;margin:0 0 14px!important;border-radius:0!important;display:block!important}
.band>h2,.bandhead h2,.band>.bandhead{font-size:13px!important;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.band>h2,.band>.bandhead{border-bottom:1.5px solid #000!important;padding:0 0 3px!important;margin:0 0 6px!important}
.bandhead{display:flex!important;justify-content:space-between;gap:10px}
.kpi,.tile,.mtile,.wd,.verdict,.src,.sring{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:baseline!important;justify-content:flex-start!important;gap:2px 10px;border:0!important;border-bottom:1px dotted #bbb!important;border-radius:0!important;padding:2px 0!important;margin:0!important;min-height:0!important;text-align:left!important;font:inherit!important}
.kpi>*,.tile>*,.mtile>*,.wd>*,.verdict>*,.sring>*{font:inherit!important;margin:0!important;width:auto!important;padding:0!important}
.kpi .lbl,.tile>label,.tile>.lbl,.wd h3,.mtile>span:first-child,.verdict b,.sring b{font-weight:700!important;min-width:150px;text-transform:none!important;letter-spacing:0!important}
.kpi .big,.mtile b,.wd .p{font-weight:600!important}
.kpi .note,.tile .x,.wd .mut,.mtile span,.verdict span{color:#333!important}
.kpi dl{display:flex!important;flex-wrap:wrap;gap:0 6px;font:inherit!important}
.kpi dt{font-weight:400!important;color:#333!important}.kpi dd{margin:0 8px 0 0!important}
.chip{border:0!important;padding:0!important;font:inherit!important}.chip::before{content:"· "}
.ring{display:none!important}
.sring>div{display:contents!important}
.row{display:inline-flex!important;gap:4px}
input,select{font:inherit!important;width:auto!important;max-width:120px}
.chartbox{height:auto!important;max-width:620px;margin:4px 0 8px!important}
canvas{max-height:240px!important;width:auto!important}
table{font-size:10px!important}th,td{padding:1px 6px!important;border-bottom:1px solid #ddd!important}
.scroll{border:0!important}
.cals,#cals,.cal,.lists h3{break-inside:auto}

#cal{display:none!important}
.advpane[data-t]::before{font-size:12px;border-bottom:1px solid #000;margin:14px 0 4px;padding-bottom:2px}
.advk,.ainputs{display:block!important}
.ain{display:inline-flex!important;gap:4px;margin-right:16px}
.lists{display:block!important}
p.note{margin:4px 0!important}
}
@media print{
details:not([open]){display:none!important}
details>summary{border:0!important;padding:0 0 2px!important;font-weight:700!important;list-style:none}
details>summary .x,details>summary .note,details>summary::after,details>summary::marker{display:none!important;content:none!important}
.ain,.ainputs>*{border:0!important;padding:0!important;border-radius:0!important;background:none!important}
.ain input{border:0!important}
.bandhead .note,.bandhead span{text-transform:none!important;letter-spacing:0!important;font-weight:400!important}
.sring{display:block!important}
}
@media print{.bandhead>span.note{display:none!important}.field{margin:0 0 6px!important}.field>span{font-weight:700}}
#tj .dstart{display:flex;align-items:center;gap:6px;margin-left:auto}#tj .dstart select{width:auto;padding:4px 8px;font-size:13px}
@media print{#tj .dstart{display:none!important}}