/* Journal (#/journal), a trade's page (#/trade/…) and the tagging kit they share.
   Prefixes: jr-* journal, td-* trade page, tk-* tag picker / popover. */

/* ───────── journal ───────── */
.jr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 2px 6px; }
.jr-group { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-3); cursor: pointer; padding: 0 6px; }
.jr-group:hover { color: var(--text-2); }

/* The summary: big P&L like the dashboard, then the numbers that matter. */
.jr-sum { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: end; gap: 18px; padding: 18px 2px 20px; }
.jr-net .hero-k em { font-family: var(--serif); font-style: italic; font-size: 16px; margin-left: 4px; }
.jr-net-v { font-size: clamp(34px, 4vw, 50px); font-weight: 600; letter-spacing: -.045em; line-height: 1; margin-top: 8px; }
.jr-k { display: flex; flex-direction: column; gap: 3px; padding-left: 18px; border-left: 1px solid var(--line); min-width: 0; }
.jr-k span { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.jr-k b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.jr-k small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search + filters */
.jr-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 10px; }
.jr-search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 380px; height: 34px; padding: 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line-2); color: var(--text-3); transition: border-color .2s; cursor: text; }
.jr-search:focus-within { border-color: rgba(255, 255, 255, .22); }
.jr-search input { all: unset; flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.jr-search input::placeholder { color: var(--text-3); }
.jr-fbtn { gap: 7px; }
.jr-fcount:not(:empty) { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: #000; background: var(--accent); }
.jr-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 12px; }
.jr-active[hidden] { display: none; }
.jr-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 10px; border-radius: 999px; font-size: 12px; color: var(--text); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s; }
.jr-pill:hover { background: rgba(255, 255, 255, .13); }
.jr-pill em { font-style: normal; color: var(--text-3); }
.jr-pill .ic { opacity: .55; }

/* Day groups and rows */
.jr-day { margin-bottom: var(--gap); }
.jr-day-h { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-bottom: 1px solid var(--line-2); }
.jr-day-t { display: flex; align-items: baseline; gap: 12px; min-width: 0; text-align: left; }
.jr-day-t b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.jr-day-t .dim { font-size: 12.5px; white-space: nowrap; }
.jr-day-t:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-3); }
.jr-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-2); align-self: center; }
.jr-dots { display: flex; gap: 3px; margin-left: auto; }
.jr-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.jr-dots i.o-win { background: var(--pos); }
.jr-dots i.o-loss { background: var(--neg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.jr-day-pnl { font-weight: 600; font-size: 15px; min-width: 96px; text-align: right; }

.jr-row { position: relative; display: grid; grid-template-columns: 22px 64px minmax(150px, 1.25fr) minmax(130px, 1.3fr) minmax(90px, .8fr) minmax(130px, 160px) 58px 104px 30px; gap: 12px; align-items: center; padding: 10px 14px 10px 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; cursor: pointer; transition: background .15s; }
.jr-day .jr-row:last-child { border-bottom: 0; }
.jr-row:hover { background: rgba(255, 255, 255, .035); }
.jr-row.sel { background: rgba(255, 255, 255, .07); }
/* outcome edge */
.jr-row[data-id]::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--text-3); opacity: .5; }
.jr-row.o-win::before { background: var(--pos); opacity: .9; }
.jr-row.o-loss::before { background: var(--neg); opacity: .9; }
.jr-th { cursor: default; padding-top: 0; padding-bottom: 8px; border: 0; color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.jr-th:hover { background: none; }
.jr-th .r, .jr-r, .jr-pnl { text-align: right; }
.jr-time { font-size: 12.5px; white-space: nowrap; }
.jr-sym { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jr-sym-t { min-width: 0; display: flex; flex-direction: column; }
.jr-sym-l { display: flex; align-items: center; gap: 7px; }
.jr-sym-l b { font-weight: 600; font-size: 13.5px; }
.jr-sym small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-n { color: var(--text-2); }
.jr-side { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; color: var(--text-2); background: rgba(255, 255, 255, .06); }
.jr-side.Long { color: var(--text); background: rgba(255, 255, 255, .1); }
.jr-grade { font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); color: var(--text-2); line-height: 16px; }
.jr-tags { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.jr-tag { flex: none; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; color: var(--text-2); background: rgba(255, 255, 255, .045); border: 1px solid var(--line-2); }
.jr-tag.set { color: var(--text); background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .1); }
.jr-tag.bad { color: #fca5a5; background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .2); }
.jr-tag.more { color: var(--text-3); background: none; }
.jr-acc, .jr-px { font-size: 12.5px; }
.jr-r { color: var(--text-2); }
.jr-pnl { font-weight: 600; font-size: 14px; white-space: nowrap; }
.jr-share { width: 28px; height: 28px; opacity: 0; transition: opacity .2s; }
.jr-row:hover .jr-share { opacity: 1; }
.jr-more { text-align: center; padding: 4px 0 10px; }

/* Selection: a box at the start of each row, shown on hover or once anything is picked. */
.jr-ck { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .22); color: transparent; opacity: 0; transition: opacity .15s, background .15s, border-color .15s; flex: none; }
.jr-row:hover .jr-ck, .jr-day-h:hover .jr-ck, .jr.selecting .jr-ck, .jr-ck:focus-visible { opacity: 1; }
.jr-ck:hover { border-color: rgba(255, 255, 255, .5); }
.jr-row.sel .jr-ck, .jr-ck.on { background: var(--accent); border-color: var(--accent); color: #000; }
.jr-ck.some { border-color: var(--accent); }
.jr-ck.some::after { content: ''; width: 8px; height: 2px; border-radius: 2px; background: var(--accent); }
.jr-ck.some .ic { display: none; }
.jr-th .jr-ck { display: none; }

.jr-bulk { position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 16px; background: rgba(18, 18, 20, .82); animation: jrUp .3s var(--ease); }
.jr-bulk[hidden] { display: none; }
.jr-bulk-n { font-size: 13px; color: var(--text-2); margin-right: 6px; white-space: nowrap; }
.jr-bulk-n b { color: var(--text); }
@keyframes jrUp { from { transform: translate(-50%, 16px); opacity: 0; } }

body:not(.pnl-classic):not(.pnl-custom) .jr-net-v.pos {
  background: var(--chrome); background-size: 100% 220%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, .14));
  animation: sheen 7s ease-in-out infinite alternate;
}

@media (max-width: 1250px) {
  .jr-row { grid-template-columns: 22px 60px minmax(140px, 1.2fr) minmax(120px, 1.2fr) minmax(120px, 150px) 56px 100px 30px; }
  .jr-acc { display: none; }
}
@media (max-width: 1050px) {
  .jr-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jr-net { grid-column: 1 / -1; }
  .jr-k:nth-child(2) { border-left: 0; padding-left: 0; }
  .jr-row { grid-template-columns: 22px 60px minmax(140px, 1fr) minmax(110px, 1fr) 56px 100px 30px; }
  .jr-px { display: none; }
}
@media (max-width: 760px) {
  .jr-head { padding-top: 6px; }
  .jr-group > span:first-child { display: none; }
  .jr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px 2px 16px; }
  .jr-k { border-left: 0; padding-left: 0; }
  .jr-k b { font-size: 19px; }
  .jr-search { max-width: none; flex-basis: 100%; }
  .jr-day-h { padding: 11px 12px 11px 10px; gap: 8px; }
  .jr-day-t { flex-direction: column; gap: 0; }
  .jr-dots { display: none; }
  .jr-day-pnl { margin-left: auto; min-width: 0; }
  .jr-row { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; }
  .jr-row > .jr-tags, .jr-row > .jr-r, .jr-row > .jr-share, .jr-row > .jr-acc, .jr-row > .jr-px { display: none; }
  .jr-ck { display: none; }
  .jr.selecting .jr-row { grid-template-columns: 20px 50px minmax(0, 1fr) auto; }
  .jr.selecting .jr-ck { display: grid; }
  .jr-th { display: none; }
  .jr-time { font-size: 11.5px; }
  .jr-bulk { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  .jr-bulk #b-all { display: none; }
}

/* ───────── trade page ───────── */
.td-top { display: flex; align-items: center; gap: 10px; padding: 6px 0 4px; flex-wrap: wrap; }
.td-back { margin-left: -9px; font-size: 13px; text-decoration: none; }
.td-step { display: flex; align-items: center; gap: 2px; font-size: 12px; }
.td-step .icon-btn { width: 30px; height: 30px; }
.td-step [aria-disabled] { opacity: .25; pointer-events: none; }
.td-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.td-acts .danger:hover { color: #fca5a5; background: rgba(248, 113, 113, .12); }

.td-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 2px 20px; }
.td-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.td-id .sym-icon { width: 44px; height: 44px; }
.td-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.td-sym { font-size: 30px; font-weight: 650; letter-spacing: -.035em; line-height: 1.05; }
.td-sub { font-size: 13px; color: var(--text-3); margin-top: 5px; }
.td-money { text-align: right; }
.td-pnl { font-size: clamp(38px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.05em; line-height: 1; margin: 8px 0 8px; }
.td-money-s { font-size: 12.5px; color: var(--text-3); }

.td-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); margin-bottom: var(--gap); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.td-st { padding: 14px 16px 14px 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.td-st + .td-st { padding-left: 16px; border-left: 1px solid var(--line-2); }
.td-st span { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.td-st b { font-size: 18px; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-st small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-st.wide { grid-column: span 2; }
.td-score { position: relative; }
.td-bar { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.td-bar i { display: block; height: 100%; border-radius: inherit; background: var(--text); transition: width .8s var(--ease); }

.td-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
.td-main, .td-side { display: grid; gap: var(--gap); min-width: 0; }
.td-tabs { padding-top: 0; }
.td-sub-h { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 2px; }

.td-keys { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.td-keys .kbd { padding: 0 5px; font-size: 10px; }
.td-keys .kbd + .kbd { margin-left: -2px; }
.td-rv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.td-rv-k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: baseline; gap: 7px; }
.td-rv-k em { font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .75; }
.td-rv-row .seg button { padding: 4px 10px; font-size: 12px; }
.td-rv-row .seg button.on.bad { color: #fca5a5; background: rgba(248, 113, 113, .14); }
.td-auto { margin: -4px 0 8px auto; display: flex; }
.td-tags { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }

@media (max-width: 1150px) {
  .td-grid { grid-template-columns: minmax(0, 1fr); }
  .td-side { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .td-acts .btn span { display: none; }
  .td-hero { padding: 10px 2px 14px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .td-money { text-align: left; }
  .td-sym { font-size: 24px; }
  .td-id .sym-icon { width: 36px; height: 36px; }
  .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-stats { column-gap: 16px; }
  .td-st, .td-st + .td-st { padding: 11px 0; border-left: 0; }
  .td-st.wide { grid-column: 1 / -1; order: 9; border-top: 1px solid var(--line-2); }
  .td-st b { font-size: 16px; }
  .td-keys { display: none; }
}

/* ───────── tag picker ───────── */
.tk-findw { position: relative; }
.tk-find { display: flex; cursor: text; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line-2); color: var(--text-3); transition: border-color .2s; }
.tk-find:focus-within { border-color: rgba(255, 255, 255, .22); }
.tk-find input.tk-q { all: unset; flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.tk-find input.tk-q::placeholder { color: var(--text-3); }
.tk-find:focus-within .tk-kbd { display: none; }
@media (hover: none) { .tk-kbd { display: none; } }
.tk-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; padding: 5px; border-radius: 12px; background: rgba(18, 18, 20, .97); border: 1px solid var(--line); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); max-height: 300px; overflow-y: auto; }
.tk-sug[hidden] { display: none; }
.tk-s { display: flex; width: 100%; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 13px; color: var(--text-2); text-align: left; }
.tk-s span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-s b { color: var(--text); font-weight: 600; }
.tk-s em { font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.tk-s.act, .tk-s:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.tk-dot { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, .2); flex: none; }

.tk-facet { padding: 12px 0 2px; }
.tk-facet + .tk-facet { border-top: 1px solid var(--line-2); margin-top: 10px; }
.tk-body > .tk-facet:first-child { border-top: 0; margin-top: 4px; }
.tk-fh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tk-fh em { font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .7; }
.tk-fh b { margin-left: auto; font-size: 10.5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; color: var(--text); background: rgba(255, 255, 255, .1); letter-spacing: 0; }
.tk-fh .chip-btn { margin-left: auto; padding: 0 4px; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.tk-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); border: 1px solid var(--line); background: rgba(255, 255, 255, .02); transition: color .15s, background .15s, border-color .15s; white-space: nowrap; max-width: 100%; }
.tk-chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .2); }
.tk-chip.on { color: #000; background: var(--accent); border-color: var(--accent); font-weight: 500; }
.tk-chip.on .ic { margin-left: -3px; }
.tk-chip.some { color: var(--text); border-style: dashed; border-color: rgba(255, 255, 255, .35); }
.tk-chip i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.tk-facet.bad .tk-chip.on { color: #fecaca; background: rgba(248, 113, 113, .2); border-color: rgba(248, 113, 113, .45); }
.tk-add { display: inline-flex; align-items: center; gap: 4px; height: 27px; min-width: 27px; justify-content: center; padding: 0 8px; border-radius: 999px; font-size: 12px; color: var(--text-3); border: 1px dashed rgba(255, 255, 255, .14); transition: color .15s, border-color .15s; }
.tk-add:hover { color: var(--text); border-color: rgba(255, 255, 255, .35); }
.tk-add span:empty { display: none; }
input.tk-new { width: 150px; height: 27px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; }
.tk-manage { margin: 14px 0 0 -9px; color: var(--text-3); text-decoration: none; }

/* Popover / sheet */
.tk-pop .tk-sug { position: static; margin-top: 6px; box-shadow: none; max-height: none; background: rgba(255, 255, 255, .03); }
.tk-pop { position: fixed; z-index: 120; width: 400px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; border-radius: 16px; background: rgba(16, 16, 18, .94); opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s var(--ease); }
.tk-pop.in { opacity: 1; transform: none; }
.tk-pop-h { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; border-bottom: 1px solid var(--line-2); }
.tk-pop-h .dim { font-size: 12px; }
.tk-pop-b { padding: 12px 16px 16px; overflow-y: auto; overscroll-behavior: contain; }
.tk-pop .tk-manage { display: none; }
.tk-pop.sheet { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 72vh; transform: translateY(20px); }
.tk-pop.sheet.in { transform: none; }

/* Add trade → fill from a screenshot (OCR). */
.ocr-drop { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 14px 16px; text-align: left;
  border: 1px dashed var(--line-2); border-radius: 12px; color: var(--text-2); transition: border-color .2s var(--ease), background .2s var(--ease); }
.ocr-drop:hover, .ocr-drop.over { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .05); color: var(--text); }
.ocr-drop span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ocr-drop b { font-weight: 500; color: var(--text); font-size: 13.5px; }
.ocr-drop small { font-size: 12px; color: var(--text-3); }
.ocr-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ocr-note.warn { color: var(--neg); }
.modal .field .ocr-hit { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.ocr-chip { display: inline-block; margin: 6px 6px 0 0; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; color: var(--text); }
.ocr-chip:hover { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .06); }