/* =============================================================================
   Trade Journal — page styles
   -----------------------------------------------------------------------------
   Everything the journal needs that kit.css and tools-shared.css do not already
   answer. Nothing below restates a form control, a modal, a chip, a toast or a
   table wrapper: those live in tools-shared.css and this sheet uses them.

   What is genuinely new here:
     - the KPI strip, which is a stat grid rather than the kit's single .mi-stat
     - the equity SVG's own line/fill/crosshair vocabulary
     - the composer's two-column body and its detected-field list
     - the screenshot dropzone and its staged extraction list
     - the strategy comparison bar, which is a diverging bar around a zero line

   Prefix .jr-  ·  every rule scoped html[data-ui='v2'][data-v2]
   Every colour is a --v2-* token. There is no literal colour below this line.
   ========================================================================== */

/* =============================================================================
   1. DEMO BANNER
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-demo {
  display: flex;
  align-items: center;
  gap: var(--v2-s3);
  flex-wrap: wrap;
  margin-bottom: var(--v2-s5);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
}
html[data-ui='v2'][data-v2] .jr-demo[hidden] { display: none; }
html[data-ui='v2'][data-v2] .jr-demo-text {
  flex: 1 1 240px;
  min-width: 0;
  font: 400 var(--v2-t-sm)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
}

/* =============================================================================
   2. KPI STRIP
   -----------------------------------------------------------------------------
   auto-fit rather than a fixed column count: seven tiles wrap to four, then two,
   then one without a breakpoint of their own.
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-kpis {
  display: grid;
  gap: var(--v2-s3);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
html[data-ui='v2'][data-v2] .jr-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s1);
  min-width: 0;
  padding: var(--v2-s4);
  border-radius: var(--v2-r-lg);
  background: var(--v2-surface);
  box-shadow: var(--v2-e1);
}
html[data-ui='v2'][data-v2] .jr-kpi-label {
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-kpi-value {
  font: 600 var(--v2-t-2xl)/1.15 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--v2-tighter);
  color: var(--v2-ink);
}
/* The one-line plain-English note under every figure. Two lines tall whatever
   it says, so a row of tiles keeps one baseline. */
html[data-ui='v2'][data-v2] .jr-kpi-note {
  min-height: 2.7em;
  font: 400 var(--v2-t-xs)/1.45 var(--v2-sans);
  color: var(--v2-ink-3);
}

/* =============================================================================
   3. EQUITY CURVE
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-chart {
  position: relative;
  width: 100%;
  min-height: 220px;
}
html[data-ui='v2'][data-v2] .jr-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}
html[data-ui='v2'][data-v2] .jr-eq-grid { stroke: var(--v2-line); stroke-width: 1; }
html[data-ui='v2'][data-v2] .jr-eq-zero { stroke: var(--v2-line-2); stroke-width: 1; stroke-dasharray: 3 3; }
html[data-ui='v2'][data-v2] .jr-eq-line { fill: none; stroke: var(--v2-accent); stroke-width: 2; }
html[data-ui='v2'][data-v2] .jr-eq-fill { fill: var(--v2-accent-soft); stroke: none; }
html[data-ui='v2'][data-v2] .jr-eq-axis {
  fill: var(--v2-ink-4);
  font: 400 11px/1 var(--v2-mono);
}
html[data-ui='v2'][data-v2] .jr-eq-cross { stroke: var(--v2-ink-4); stroke-width: 1; stroke-dasharray: 2 3; }
html[data-ui='v2'][data-v2] .jr-eq-dot { fill: var(--v2-accent); stroke: var(--v2-surface); stroke-width: 2; }
html[data-ui='v2'][data-v2] .jr-eq-hit { fill: transparent; cursor: crosshair; }

html[data-ui='v2'][data-v2] .jr-readout {
  margin: var(--v2-s3) 0 0;
  min-height: 1.5em;
  font: 400 var(--v2-t-sm)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .jr-readout .mi-mono { color: var(--v2-ink-2); }

/* =============================================================================
   4. FILTERS
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-filters { align-items: flex-start; }
html[data-ui='v2'][data-v2] .jr-search { width: 220px; }
html[data-ui='v2'][data-v2] .jr-mini { width: auto; min-width: 130px; }
html[data-ui='v2'][data-v2] .jr-date { width: 148px; font-family: var(--v2-mono); font-size: var(--v2-t-sm); }
html[data-ui='v2'][data-v2] .jr-dash { color: var(--v2-ink-4); }
html[data-ui='v2'][data-v2] .jr-strat-row {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s3);
  flex: 1 1 100%;
  min-width: 0;
  padding-top: var(--v2-s2);
  border-top: 1px solid var(--v2-line);
}
html[data-ui='v2'][data-v2] .jr-strat-label { flex: none; }

/* =============================================================================
   5. TRADES TABLE
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-row { cursor: pointer; }
html[data-ui='v2'][data-v2] .jr-row:focus-visible { outline: none; box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] .jr-sym {
  font-family: var(--v2-mono);
  font-weight: 600;
  color: var(--v2-ink);
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .jr-cell-num {
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .jr-cell-strats { max-width: 220px; }
html[data-ui='v2'][data-v2] .jr-tag {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  padding: 1px var(--v2-s2);
  border-radius: var(--v2-r-xs);
  background: var(--v2-sunk-2);
  font: 500 var(--v2-t-xs)/1.6 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .jr-tag + .jr-tag { margin-left: var(--v2-s1); }
/* Screenshot indicator: a filled dot rather than an icon font. */
html[data-ui='v2'][data-v2] .jr-shot-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-info);
}
html[data-ui='v2'][data-v2] .jr-rowact { white-space: nowrap; }
/* The planned-row quick action stays quiet until the row is under the pointer,
   so a long table is not a wall of buttons. */
html[data-ui='v2'][data-v2] .jr-rowact .mi-btn { opacity: 0.72; }
html[data-ui='v2'][data-v2] .jr-row:hover .jr-rowact .mi-btn,
html[data-ui='v2'][data-v2] .jr-rowact .mi-btn:focus-visible { opacity: 1; }

/* =============================================================================
   6. STRATEGY PERFORMANCE
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-bar {
  position: relative;
  height: 10px;
  min-width: 120px;
  border-radius: var(--v2-r-xs);
  background: var(--v2-sunk-2);
  overflow: hidden;
}
/* Diverging: the centre of the track is zero, so a losing strategy grows left
   and a winning one right, and the two are comparable at a glance. */
html[data-ui='v2'][data-v2] .jr-bar-mid {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--v2-line-2);
}
html[data-ui='v2'][data-v2] .jr-bar-fill { position: absolute; top: 0; bottom: 0; }
html[data-ui='v2'][data-v2] .jr-bar-fill--pos { left: 50%; background: var(--v2-bull); }
html[data-ui='v2'][data-v2] .jr-bar-fill--neg { right: 50%; background: var(--v2-bear); }
html[data-ui='v2'][data-v2] .jr-thin { opacity: 0.55; }
html[data-ui='v2'][data-v2] .jr-flag {
  display: block;
  margin-top: 2px;
  font: 400 var(--v2-t-xs)/1.4 var(--v2-sans);
  color: var(--v2-warn);
}

/* =============================================================================
   7. ASK YOUR JOURNAL
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-ask-chips { margin-bottom: var(--v2-s4); }
html[data-ui='v2'][data-v2] .jr-answer:empty { display: none; }
html[data-ui='v2'][data-v2] .jr-answer {
  margin-bottom: var(--v2-s4);
  padding: var(--v2-s4) var(--v2-s5);
  border-left: 2px solid var(--v2-accent-line);
  border-radius: 0 var(--v2-r-md) var(--v2-r-md) 0;
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .jr-answer-q {
  display: block;
  margin-bottom: var(--v2-s2);
  font: 600 var(--v2-t-md)/1.4 var(--v2-sans);
  color: var(--v2-ink);
}
html[data-ui='v2'][data-v2] .jr-answer p {
  margin: 0 0 var(--v2-s2);
  max-width: 76ch;
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .jr-answer p:last-child { margin-bottom: 0; }
html[data-ui='v2'][data-v2] .jr-answer ul { margin: 0 0 var(--v2-s2); padding-left: var(--v2-s5); }
html[data-ui='v2'][data-v2] .jr-answer li {
  margin: 0 0 var(--v2-s1);
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
}

/* =============================================================================
   8. COMPOSER
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-tabpanel { padding-top: var(--v2-s5); }
html[data-ui='v2'][data-v2] .jr-tabpanel[hidden] { display: none; }

/* Input on the left, consequence on the right. The right column is narrower
   because it is read, not typed into. */
html[data-ui='v2'][data-v2] .jr-two {
  display: grid;
  gap: var(--v2-s5);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}
html[data-ui='v2'][data-v2] .jr-form { display: flex; flex-direction: column; gap: var(--v2-s4); }
html[data-ui='v2'][data-v2] .jr-textarea { min-height: 120px; }
html[data-ui='v2'][data-v2] .jr-examples { margin-top: var(--v2-s3); }

html[data-ui='v2'][data-v2] .jr-addstrat { display: flex; gap: var(--v2-s2); margin-top: var(--v2-s2); }
html[data-ui='v2'][data-v2] .jr-addstrat .mit-input { flex: 1 1 auto; }
/* The picker is tall enough to show roughly four rows and then scrolls, so 21
   playbooks plus the user's own do not push the save button off screen. */
html[data-ui='v2'][data-v2] .jr-strat-picker {
  max-height: 148px;
  overflow-y: auto;
  padding: var(--v2-s2);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
}

/* ---- detected fields (paste-text tab) ----------------------------------- */
html[data-ui='v2'][data-v2] .jr-detected {
  padding: var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
}
html[data-ui='v2'][data-v2] .jr-detected-head {
  display: block;
  margin-bottom: var(--v2-s3);
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-det {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--v2-s3);
  padding: var(--v2-s2) 0;
}
html[data-ui='v2'][data-v2] .jr-det + .jr-det { border-top: 1px solid var(--v2-line); }
html[data-ui='v2'][data-v2] .jr-det-key {
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-det-val {
  font: 550 var(--v2-t-sm)/1.4 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  text-align: right;
  word-break: break-word;
}
html[data-ui='v2'][data-v2] .jr-det-from {
  grid-column: 1 / -1;
  margin-top: 2px;
  font: 400 var(--v2-t-xs)/1.45 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .jr-det-from code {
  font-family: var(--v2-mono);
  color: var(--v2-ink-2);
}
/* Confidence: three tiers, not a percentage bar. A trader needs to know whether
   to check the number, not what the parser's score was to two decimals. */
html[data-ui='v2'][data-v2] .jr-conf {
  padding: 1px var(--v2-s2);
  border-radius: var(--v2-r-xs);
  font: 600 var(--v2-t-xs)/1.5 var(--v2-sans);
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .jr-conf--high { background: var(--v2-bull-soft); color: var(--v2-bull); }
html[data-ui='v2'][data-v2] .jr-conf--med { background: var(--v2-info-soft); color: var(--v2-info); }
html[data-ui='v2'][data-v2] .jr-conf--low { background: var(--v2-warn-soft); color: var(--v2-warn); }

/* ---- live sizing panel --------------------------------------------------- */
html[data-ui='v2'][data-v2] .jr-live {
  position: sticky;
  top: 0;
  padding: var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
}
html[data-ui='v2'][data-v2] .jr-live-head {
  display: block;
  margin-bottom: var(--v2-s2);
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-live-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v2-s3);
  padding: var(--v2-s2) 0;
}
html[data-ui='v2'][data-v2] .jr-live-row + .jr-live-row { border-top: 1px solid var(--v2-line); }
html[data-ui='v2'][data-v2] .jr-live-key { font: 400 var(--v2-t-sm)/1.4 var(--v2-sans); color: var(--v2-ink-3); }
html[data-ui='v2'][data-v2] .jr-live-val {
  font: 550 var(--v2-t-sm)/1.4 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  text-align: right;
}
html[data-ui='v2'][data-v2] .jr-live-warns { display: flex; flex-direction: column; gap: var(--v2-s2); margin-top: var(--v2-s3); }
html[data-ui='v2'][data-v2] .jr-live-warns:empty { display: none; }

/* =============================================================================
   9. SCREENSHOT TAB
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-shot-head { display: flex; flex-direction: column; gap: var(--v2-s2); margin-bottom: var(--v2-s4); }
html[data-ui='v2'][data-v2] .jr-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v2-s2);
  padding: var(--v2-s7) var(--v2-s5);
  border: 1px dashed var(--v2-line-2);
  border-radius: var(--v2-r-lg);
  background: var(--v2-sunk);
  text-align: center;
  transition: background var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .jr-drop.is-over { background: var(--v2-accent-soft); border-color: var(--v2-accent-line); }
html[data-ui='v2'][data-v2] .jr-drop-title { margin: 0; font: 550 var(--v2-t-md)/1.4 var(--v2-sans); color: var(--v2-ink-2); }
html[data-ui='v2'][data-v2] .jr-drop .mit-help { text-align: center; }

html[data-ui='v2'][data-v2] .jr-shot-grid {
  display: grid;
  gap: var(--v2-s4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--v2-s4);
  align-items: start;
}
html[data-ui='v2'][data-v2] .jr-shot-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk-2);
  cursor: zoom-in;
}
html[data-ui='v2'][data-v2] .jr-stages { display: flex; flex-direction: column; gap: var(--v2-s2); margin: 0; padding: 0; list-style: none; }
html[data-ui='v2'][data-v2] .jr-stage {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s2);
  font: 400 var(--v2-t-sm)/1.5 var(--v2-sans);
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-stage::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-stage.is-running { color: var(--v2-ink-2); }
html[data-ui='v2'][data-v2] .jr-stage.is-running::before { background: var(--v2-accent); }
html[data-ui='v2'][data-v2] .jr-stage.is-done { color: var(--v2-ink-3); }
html[data-ui='v2'][data-v2] .jr-stage.is-done::before { background: var(--v2-bull); }

html[data-ui='v2'][data-v2] .jr-review {
  margin-top: var(--v2-s4);
  padding: var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  box-shadow: var(--v2-hairline);
}
html[data-ui='v2'][data-v2] .jr-review-grid {
  display: grid;
  gap: var(--v2-s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--v2-s3) 0;
}
html[data-ui='v2'][data-v2] .jr-needs {
  font: 500 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-warn);
}

/* =============================================================================
   10. CSV IMPORT
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-csv-input { display: flex; gap: var(--v2-s2); flex-wrap: wrap; margin-bottom: var(--v2-s4); }
html[data-ui='v2'][data-v2] .jr-csv-out { margin-top: var(--v2-s4); }
html[data-ui='v2'][data-v2] .jr-map-grid {
  display: grid;
  gap: var(--v2-s3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: var(--v2-s3) 0 var(--v2-s5);
}
html[data-ui='v2'][data-v2] .jr-errors { display: flex; flex-direction: column; gap: var(--v2-s1); margin: var(--v2-s3) 0 0; padding: 0; list-style: none; }
html[data-ui='v2'][data-v2] .jr-errors li {
  font: 400 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .jr-errors li strong { color: var(--v2-warn); font-weight: 600; }

/* =============================================================================
   11. DRAWER CONTENT · RESULT MODAL · ZOOM
   ========================================================================== */
html[data-ui='v2'][data-v2] .jr-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--v2-s3);
  margin: 0 0 var(--v2-s4);
}
html[data-ui='v2'][data-v2] .jr-dl-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--v2-s3);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .jr-dl-key {
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-dl-val {
  font: 550 var(--v2-t-md)/1.3 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  word-break: break-word;
}
html[data-ui='v2'][data-v2] .jr-drawer-sec { margin-bottom: var(--v2-s5); }
html[data-ui='v2'][data-v2] .jr-drawer-sec:last-child { margin-bottom: 0; }
html[data-ui='v2'][data-v2] .jr-drawer-h {
  display: block;
  margin-bottom: var(--v2-s2);
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .jr-prose {
  margin: 0;
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
  white-space: pre-wrap;
}
html[data-ui='v2'][data-v2] .jr-quickfill { display: flex; gap: var(--v2-s2); flex-wrap: wrap; margin: var(--v2-s3) 0; }
html[data-ui='v2'][data-v2] .jr-result-preview {
  margin-top: var(--v2-s4);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
}
/* The kit only gives .mit-foot-end its push in a modal foot; the drawer's foot
   needs the same behaviour for its delete button. */
html[data-ui='v2'][data-v2] .mit-drawer-foot .mit-foot-end { margin-left: auto; display: flex; gap: var(--v2-s2); }
html[data-ui='v2'][data-v2] .jr-zoom-body { text-align: center; }
html[data-ui='v2'][data-v2] .jr-zoom-body img { max-width: 100%; height: auto; border-radius: var(--v2-r-md); }

/* =============================================================================
   12. NARROW SCREENS
   ========================================================================== */
@media (max-width: 900px) {
  html[data-ui='v2'][data-v2] .jr-two,
  html[data-ui='v2'][data-v2] .jr-shot-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-ui='v2'][data-v2] .jr-live { position: static; }
}
@media (max-width: 720px) {
  html[data-ui='v2'][data-v2] .jr-search,
  html[data-ui='v2'][data-v2] .jr-mini,
  html[data-ui='v2'][data-v2] .jr-date { width: 100%; }
  html[data-ui='v2'][data-v2] .jr-dash { display: none; }
  html[data-ui='v2'][data-v2] .jr-strat-row { flex-direction: column; }
  html[data-ui='v2'][data-v2] .jr-kpi-note { min-height: 0; }
}

/* =============================================================================
   13. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-ui='v2'][data-v2] .jr-drop { transition: none; }
}