/* Journal-specific refinements */

.data-table td strong {
  font-weight: var(--fw-semibold);
}

/* Trade rows open the read-only detail drawer. Scoped to [data-row-id],
   which only trade rows carry - cash flow rows stay non-interactive. */
.data-table tbody tr[data-row-id] {
  cursor: pointer;
}

/* ---- Calendar tab ---- */

.calendar-toolbar {
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* The period selects and the ‹ Today › group are one control, so they must
   wrap as one. Left to plain flex-wrap they break mid-group, stranding a
   lone arrow on the row above "Today" - which is what happens on a phone. */
.calendar-toolbar__nav {
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}

/* The selects and the ‹ Today › arrows: one row that never breaks (audit 2026-10-20 C-20). */
.calendar-toolbar__ctl {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* The ‹ Today › arrows: a group of their own that never breaks, so when the
   row has to wrap (under 360px) they go under the selects together. */
.calendar-toolbar__step {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

/* Root cause of the page reflowing on every Week<->Month switch: Month
   renders two <select> elements here and Week renders none. Every
   <select class="select"> in the app is auto-enhanced into a themed
   `.cselect` trigger by TJ.Components.Select (js/components/select.js) - the
   NATIVE select stays in the DOM but visually hidden, so the box the user
   actually sees is `.cselect__trigger`, not `.select` itself (a rule
   targeting `.select`'s own height, tried first, silently did nothing). The
   trigger's intrinsic height (padding: space-3 space-4 + body line-height,
   ~44px) is taller than the ‹/Today/› buttons (36px, .btn--icon), so with
   align-items:center the ROW ITSELF was 46px tall in Month and 36px in Week
   - two height systems sharing one row, same class of bug as the
   calendar-cell sizing fix. Pinning the trigger to the button height means
   the row's height no longer depends on which controls happen to be present
   in a given mode, so the summary card and grid below it never shift
   vertically on switch.

   Both the native <select> and the enhanced trigger are pinned, and that
   pairing is load-bearing rather than belt-and-braces: there is a window
   between the markup being written and TJ.Components.Select enhancing it
   where the RAW select is what the user sees. Pinning only the trigger
   makes those two states different heights, which is precisely the ~10px
   one-frame jump ("shake") that switching calendar views used to produce.
   js/views/journal.view.js closes that window by enhancing synchronously;
   this keeps the two heights equal regardless, so no future re-render path
   can reopen it. */
.calendar-toolbar__nav .cselect__trigger,
.calendar-toolbar__nav .select {
  height: 32px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 999px;
  background-color: var(--tile);
  font-size: 13px;
  font-weight: 500;
}

.calendar-period {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

@media (max-width: 560px) {
  .calendar-period {
    font-size: 17px;
    margin-bottom: var(--space-2);
  }
}

/* The period summary card and the goal bar sit between the toolbar and the
   grid; the grid itself keeps its own top margin off this. */
.calendar-goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.calendar-goal__head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
}

.calendar-goal__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-hover);
  overflow: hidden;
}

.calendar-goal__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--lead);
  transition: width var(--dur-base) var(--ease-standard);
}

.calendar-goal__hint {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.calendar-weekdays span {
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Cell height is driven by ONE property, --cal-cell-h, which each grid
   variant sets for itself. Month cells used to use `aspect-ratio` (height
   tied to column width, so a 1440px desktop produced ~170px of mostly empty
   box) while week cells used a fixed `min-height: 150px` - two different
   sizing systems, which is exactly why proportions jumped when switching
   period. One clamped system now covers both: it still scales with the
   viewport, but between a readable floor and a sane ceiling. */
.calendar-grid {
  --cal-cell-h: clamp(76px, 7.2vw, 108px);
}

.calendar-grid--week {
  --cal-cell-h: clamp(132px, 12vw, 176px);
}

.calendar-cell {
  position: relative;
  min-height: var(--cal-cell-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}

/* Hover picks up the accent rather than a neutral edge, so pointing at a day
   uses the same blue the charts draw with. Border only - no fill - because
   the fill channel already carries profit/loss. */
.calendar-cell:hover {
  border-color: var(--color-border-strong);
}

/* A day of the next or previous month: no profit or loss tint, its number in
   the quiet text tone. Opacity is gone from it: the number fell to 2.4:1 and a
   green result to 1.7:1 in light. The ancestor `:root` outranks the look's
   own tint rules (`:root[data-look] .calendar-cell--profit`). */
:root .calendar-grid .calendar-cell.is-outside:not(:hover) {
  background-color: transparent;
  background-image: none;
}

.calendar-cell.is-outside .calendar-cell__num {
  color: var(--text-3);
}

/* Today was a hard double ring - the accent at full strength twice over,
   which read as a selected state rather than a marker. Same accent, spread
   across three softer steps instead: a tinted edge, a faint ring and a low
   glow, matching the treatment the charts give their leading point.
   rgba(--color-accent-rgb) rather than --color-accent so the minimal palette
   neutralises it along with everything else. */
.calendar-cell.is-today {
  border-color: var(--lead);
  box-shadow: none;
}

/* A day with no trades keeps no fill (see the month-cell rule above), which
   left today's marker as an outline around nothing. A wash at 7% is enough
   to seat the ring without competing with any profit/loss tint - and it is
   only applied where there is no such tint to compete with. */
.calendar-cell--empty.is-today,
.calendar-cell--open.is-today {
  background: rgba(var(--color-accent-rgb), 0.07);
}

.calendar-cell__num {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.calendar-cell__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.calendar-cell__pnl {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.calendar-cell--profit .calendar-cell__pnl {
  color: var(--color-profit);
}

.calendar-cell--loss .calendar-cell__pnl {
  color: var(--color-loss);
}

.calendar-cell--profit {
  background: var(--color-profit-soft);
}

.calendar-cell--loss {
  background: var(--color-loss-soft);
}

/* Month view: a day with no trades draws no box. Thirty-one identical
   bordered tiles make the grid read as a table of days, which is the
   opposite of what it is for - the days that traded are supposed to be the
   figure and the rest the ground. Only the chrome goes; the cell keeps its
   size, its number and its click target, so the grid geometry is unchanged.
   Today keeps its accent outline (:not(.is-today)), and the hover state
   still draws the box so the target stays discoverable.
   Scoped away from Week, whose cells list trades and need the surface. */
.calendar-grid:not(.calendar-grid--week) .calendar-cell--empty:not(.is-today) {
  background: transparent;
  border-color: transparent;
}

.calendar-grid:not(.calendar-grid--week) .calendar-cell--empty:not(.is-today):hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

/* ---- Month cell: one centred stack ----------------------------------
   The date and the day's figure are the same fact read twice, so they are
   stacked and centred as a pair. Before this they sat at opposite corners
   of the cell - number top-left, figure bottom-left - which made the eye
   travel a diagonal per day and put the largest gap in the cell between the
   two things that belong together.

   Hierarchy inside the pair: the date is the label (semibold, --fs-body,
   primary text) and the figure is the reading (smaller, profit/loss
   colour). Both markers - the journaled dot and the count badge - are
   pinned to opposite corners rather than living in the flow, so neither can
   push the pair off centre.

   Scoped away from --week, whose cells are a left-aligned head plus a list
   of trades and are a different component in everything but class name. */
.calendar-grid:not(.calendar-grid--week) .calendar-cell {
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.calendar-grid:not(.calendar-grid--week) .calendar-cell__num {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
}

.calendar-grid:not(.calendar-grid--week) .calendar-cell__meta {
  align-items: center;
  width: 100%;
}

.calendar-grid:not(.calendar-grid--week) .calendar-cell__journal {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  margin-left: 0;
}

/* Trade-count badge, top-right of a month cell. Counts every trade on the
   day (open ones included), unlike the P/L line, which can only speak for
   closed ones. Rendered only past one trade - see dayCellHtml(). */
.calendar-cell__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--tile-2);
  font-size: 12px;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* ---- Week view ----
   Same day model as the month grid, only tall enough to name the trades. */
.calendar-grid--week .calendar-cell {
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
}

/* Stacked, not a baseline row: a seven-column week gives each cell ~100px,
   and "Tue 21" next to "-$118.61" wraps at that width. Stacking also hands
   the full cell width back to the trade lines below. */
.calendar-cell__weekhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-width: 0;
}

.calendar-cell__weekhead .calendar-cell__num {
  white-space: nowrap;
}

.calendar-cell__trades {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.calendar-trade {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  min-width: 0;
}

.calendar-trade__sym {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendar-trade__r {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.calendar-trade__more {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

/* ---- Year view: 12 mini heatmaps ---- */

/* Column counts are all divisors of 12, so the year never ends in a ragged
   last row. Wide screens get 6x2; the tile width is what keeps the day cells
   small enough to still read as a heatmap rather than a second calendar. */
.calendar-year {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* The column grows to 2560px (variables.css): from 1800px the year is one
   row of twelve, so the tiles keep about the width they had at 1440px. */
@media (min-width: 1800px) {
  .calendar-year {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (max-width: 1140px) {
  .calendar-year {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.calendar-mini {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-standard);
}

.calendar-mini:hover {
  border-color: var(--color-border-strong);
}

.calendar-mini__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
}

.calendar-mini__count {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.calendar-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar-mini__cell {
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--color-surface-hover);
}

.calendar-mini__cell.is-blank {
  background: transparent;
}

/* Sign only - no magnitude scaling, which would mean ranking days by summed
   money and would break across currencies. */
.calendar-mini__cell--profit { background: var(--color-profit); }
.calendar-mini__cell--loss { background: var(--color-loss); }
.calendar-mini__cell--breakeven { background: var(--color-text-tertiary); }
.calendar-mini__cell--open,
.calendar-mini__cell--mixed { background: var(--color-border-strong); }

.calendar-mini__cell.is-today {
  box-shadow: 0 0 0 1px var(--lead);
}

@media (max-width: 560px) {
  /* Numbers (trade count + P/L) stay visible per product requirement.
     The grid keeps the page's 16px side gutter like every other block (the
     operator 21.10: bleeding to the screen's edges read as too wide and cut
     the Sunday column); the gap is trimmed instead, so a cell is ~46px. */
  .calendar-weekdays,
  .calendar-grid {
    gap: 4px;
  }

  /* Square cells, and --cal-cell-h is zeroed rather than left at 66px so
     that exactly ONE property decides the height (see the sizing note above
     the .calendar-grid variants). aspect-ratio owns it here; a leftover
     min-height would be a second system fighting the first, which is what
     made the grid's proportions jump between period views in the first
     place. Same technique the <=1140px week rule already uses.

     A phone cell is ~48px across, so square is also the tallest the row can
     be without the month spilling past a screen: 6 rows come to ~320px
     against the ~410px the 66px cells took, while each cell gains the
     horizontal breathing room a centred stack needs. */
  .calendar-grid {
    --cal-cell-h: 0px;
  }

  .calendar-grid:not(.calendar-grid--week) .calendar-cell {
    aspect-ratio: 1;
  }

  /* Two compact rows: the view pills with "Review this month" beside them,
     then the period controls (month/year selects + ‹ Today ›) using the
     whole width. The link had a row of its own until the operator's 21.10
     note (more on one screen). The controls keep the smaller scale shared
     with the List toolbar (32px triggers/buttons, 28px pills, 13px select
     font). */
  .calendar-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .calendar-toolbar > .pill-toggle {
    align-self: flex-start;
  }

  .calendar-toolbar .pill-toggle__opt {
    height: 28px;
    min-width: 30px;
    padding: 0 var(--space-2);
  }

  /* The link and the control row become the toolbar's own items: the link
     beside the pills, the controls on the next line. */
  .calendar-toolbar__nav {
    display: contents;
  }

  .calendar-toolbar__nav [data-cal-review] {
    flex: none;
    font-size: 13px;
  }

  /* The whole control row takes the line under the link; the selects give way before the arrows do. */
  .calendar-toolbar__ctl {
    flex: 1 1 100%;
  }

  /* Targets .cselect, not .select: every <select class="select"> in the app
     is auto-enhanced into a themed `.cselect` trigger (js/components/
     select.js), and the visible box on screen is that wrapper, not the now
     hidden native element - a rule written against `.select` compiles fine
     but silently never applies to anything on screen. This one additionally
     has to fight an inline width the enhancer copies from the native
     select's own inline style (`style="width:140px"` in the view markup),
     which is exactly what the !important here is for. */
  .calendar-toolbar__nav .cselect,
  .calendar-toolbar__nav .select {
    flex: 1 1 0;
    width: auto !important;
    /* Room for "2026" and the chevron: with the link off the row they were squeezed to "20...". Narrow enough
       that Today and both arrows fit beside the two selects at 375px (audit 2026-10-20 C-20). */
    min-width: 72px;
  }

  .calendar-toolbar__nav .cselect__trigger,
  .calendar-toolbar__nav .select {
    height: 32px;
    /* Tighter at the sides too: with the base 16px each the month had 43px
       for "October" and read "Octo...". */
    padding: 0 var(--space-2) 0 var(--space-3);
    gap: var(--space-1);
    font-size: var(--fs-footnote);
  }

  /* The month needs more of the row than the year. */
  .calendar-toolbar__nav .cselect:first-of-type {
    flex-grow: 1.5;
  }

  .calendar-toolbar__nav .btn--icon,
  .calendar-toolbar__nav [data-cal-today] {
    flex-shrink: 0;
    height: 32px;
  }

  .calendar-toolbar__nav .btn--icon {
    width: 32px;
  }

  .calendar-toolbar__nav [data-cal-today] {
    padding-top: 0;
    padding-bottom: 0;
  }

  .calendar-cell {
    padding: 3px 2px;
    min-width: 0;
  }

  /* Week cells only - the month cell keeps the larger date set above, which
     is the point of the centred stack. */
  .calendar-cell__num {
    font-size: var(--fs-caption);
  }

  /* The corner inset follows the cell padding, not --space-2: on a ~48px
     square an 8px inset puts the dot almost in the middle of the date. */
  .calendar-grid:not(.calendar-grid--week) .calendar-cell__journal {
    top: 3px;
    left: 3px;
  }

  .calendar-cell__meta {
    width: 100%;
    min-width: 0;
  }

  /* Cell figures are rendered without cents (calendarMoney) and with one
     decimal past 10R (calendarR), which is what lets them fit here at a
     legible size instead of being ellipsed to "+$212...." / "+20.0…". Kept
     nowrap with ellipsis as a backstop for five-figure days.

     10px, not 11: the date above it is --fs-body now, and the figure is the
     second line of a pair rather than a lone label - the size difference is
     what makes the pair read as date-then-result. It also buys the margin
     that stops a six-character "+1.84R" from touching both cell edges. */
  /* No room for " R" in a 48px cell; the R / $ switch above names the unit. */
  .calendar-cell__u {
    display: none;
  }

  .calendar-cell__pnl {
    font-size: 12px;
    font-weight: var(--fw-medium);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .calendar-cell__badge {
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 12px;
    /* The count is secondary to the money figure on a 100px-wide cell. */
    background: transparent;
    border-color: transparent;
    color: var(--color-text-tertiary);
  }

  /* The dot has to stay clear of the count badge in the opposite corner. */
  .calendar-cell__journal {
    width: 4px;
    height: 4px;
    margin-left: 4px;
  }

  .calendar-year {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .calendar-mini {
    padding: var(--space-2);
  }
}
/* The narrowest phones (320px): the two selects and ‹ Today › need ~300px and
   the row has ~280px, so the arrows drop under the selects as one group
   rather than overflow (audit 2026-10-20 C-20). From 360px they share one row. */
@media (max-width: 359px) {
  .calendar-toolbar__ctl {
    flex-wrap: wrap;
  }
}

/* Seven tall columns stop being readable long before phone width, and the
   trigger is content width, not viewport width: a cell has to hold a date,
   a P/L figure and symbol+R lines, which needs ~112px, so 7 of them plus
   gaps need ~832px of content. With the 248px sidebar and the container's
   own padding that lands at ~1140px of viewport - below it the symbols
   start truncating, so the week becomes a stacked list instead: same markup,
   same one-cell-per-day model, laid out vertically where horizontal room ran
   out. Placed after the 560px block on purpose - it has to win the margin
   reset declared there too. */
@media (max-width: 1140px) {
  .calendar-grid--week {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-left: 0;
    margin-right: 0;
  }

  /* Stacked week rows are content-sized: a fixed cell height that made sense
     as one of seven columns would leave a mostly empty band per day here. */
  .calendar-grid--week {
    --cal-cell-h: 0px;
  }

  .calendar-grid--week .calendar-cell {
    padding: var(--space-3);
  }

  .calendar-cell__weekhead {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
}

/* Journaled-day marker. A small accent dot beside the date number - it sits
   in the flow of .calendar-cell__num rather than being absolutely placed,
   so it can never collide with the trade-count badge in the corner. */
.calendar-cell__journal {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

/* Read-only journal entry inside the day panel. Same visual language as the
   Dashboard check-in that captured it: ticked items stay ticked items, the
   mood keeps its glyph, and an accent rail marks which half was written
   before the day and which after it. */
.day-journal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.day-journal__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  padding-left: var(--space-5);
  border-radius: 12px;
  background: var(--color-surface-hover);
  border-left: 2px solid var(--color-border-strong);
}

.day-journal__block--pre {
  border-left-color: var(--color-accent);
}

.day-journal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.day-journal__kind {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.day-journal__caption {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.day-journal__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.day-journal__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.day-journal__checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

.day-journal__checks svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
}

.day-journal__note {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ---- Challenge window marker (Month + Week; never the year heatmaps) ----
   A 2px top edge, deliberately not a dot and not a background tint: the
   cell background already encodes profit/loss and the accent dot already
   means "journaled", so those two channels were taken. Inset by the corner
   radius so it reads as an edge rather than a stray bar. */
.calendar-cell--chal::after,
.calendar-cell--chal-breach::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent);
  pointer-events: none;
}

.calendar-cell--chal-breach::after {
  background: var(--color-loss);
}

/* ---- Review tab: end-of-day surface --------------------------------- */

.review-head {
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.review-head__date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-head__weekday {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-footnote);
  color: var(--color-text-tertiary);
}

/* The monthly report's origin line exists only on paper (css/print.css). */
.month-report__print-meta {
  display: none;
}

/* Four tabs beside the unit toggle on one phone row.
   The bar previously wrapped, dropping R/$ onto a second row: at the shared
   .segmented__option padding (space-3 space-5 on touch) the four labels came
   to 351px on their own against 343px of content width, so nothing else could
   share the line.

   What actually buys the room is the horizontal padding, not the labels: the
   four strings measure 177px of text in total, and space-5 either side was
   spending 160px on padding for them. Dropped to space-1 with `flex-grow` on
   each option, the free space is handed back to the options anyway - so they
   still fill the bar and each label keeps more slack around it than the
   nominal 4px (measured at 375px: 82px of box for 64px of "Daily Review").
   No label renamed, no tab hidden, no horizontal scroll; verified down to
   320px, where it is tight but still one unwrapped line.

   `width: auto !important` beats the inline `style="width: fit-content"` the
   tab switcher writes in journal.view.js - the same reason the calendar
   toolbar's select rule below needs one. Desktop is untouched
   (.view-toolbar stays nowrap everywhere else). */
@media (max-width: 700px) {
  .view-toolbar--wrap {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .view-toolbar--wrap [data-journal-tab-segmented] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
  }

  .view-toolbar--wrap [data-journal-tab] {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    text-align: center;
    white-space: nowrap;
  }

  .view-toolbar--wrap [data-journal-unit] {
    flex: 0 0 auto;
  }
}

/* Discipline section inside Review. Deliberately quiet: it reports a day
   that already happened, so only a real breach earns the loss colour. */
.review-limit + .review-limit {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.review-limit__name {
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

.review-limit__pct {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
}

.review-limit__detail {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Reflection fields in Review. Flat and quiet on purpose - the check-in's
   numbered stepper exists to coax someone into starting; this is a form for
   someone who has already sat down to close the day. */
.review-field + .review-field {
  margin-top: var(--space-5);
}

.review-field__label {
  margin-bottom: var(--space-3);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.review-field__opt {
  margin-left: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary);
}

/* Review sections need more air than the default card gap: the tab is read
   top to bottom as three distinct moments (what happened -> did I keep the
   rules -> what I take from it), not as a stack of equal cards. */
/* A flex column with a gap, NOT `.card + .card`. The discipline card sits
   inside a display:contents shell (it has to appear and disappear with the
   day), which breaks both the `>` child relationship and `+` adjacency - so
   the sibling rule silently matched nothing and the cards ended up touching.
   Gap survives that: a display:contents wrapper's child becomes a flex item
   of this container, and an empty shell contributes no item at all.
   --section-gap is the same spacing .view-container uses, so Daily Review
   now matches every other view. */
[data-review-body] {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* Persistent shell for the discipline card: it is empty on a day with no
   trades, so the wrapper must generate no box and add no gap. */
[data-review-discipline-shell],
[data-review-riskdeck-shell] {
  display: contents;
}

/* RiskDeck card (Daily Review) - same rhythm as .review-limit. */
.review-rd__group + .review-rd__group {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.review-rd__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-footnote);
  min-width: 0;
}

.review-rd__time {
  color: var(--color-text-tertiary);
  min-width: 3ch;
}

.review-rd__symbol {
  font-weight: var(--fw-semibold);
}

.review-rd__what {
  margin-left: auto;
  color: var(--color-text-secondary);
  text-align: right;
}

/* The one refusal kind that is an actual breach keeps the loss colour; the
   rule above would otherwise win over the .text-loss utility on source order. */
.review-rd__what.text-loss {
  color: var(--color-loss);
}

.review-rd__detail {
  flex-basis: 100%;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  overflow-wrap: anywhere;
}

/* Below 560px .view-container's gap drops (to 12px since 21.10); Daily Review follows it
   so the tab keeps the same rhythm as every other view at that width. */
@media (max-width: 560px) {
  [data-review-body] {
    gap: var(--stack-gap);
  }
}

/* =====================================================================
   Etap 8: the Tapebook composition of the Journal tabs
   (Compose summaries and heads, the trade list, diverging rows)
   ================================================================== */

/* ---- Calendar: the period summary above the grid ---- */
.calendar-summary {
  margin-bottom: var(--space-6);
}

@media (max-width: 560px) {
  .calendar-summary {
    margin-bottom: var(--space-3);
  }
}

.day-trades {
  margin-top: var(--space-5);
}

/* The Review day card is wide enough for the lead and its two companions
   on one line; the day panel (a modal) stacks them. */
.modal .day-summary .tb-summary {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Review: limit bars, reflection, best / worst side by side ---- */
.review-limit .tb-bar {
  margin-top: var(--space-2);
}

.review-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-8);
  margin-top: var(--space-5);
}

.review-pair .review-field + .review-field {
  margin-top: 0;
}

.review-trades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}

.review-trades__col {
  min-width: 0;
}

.review-shots {
  margin-top: var(--space-3);
}

/* The Planner's three review answers, read-only above the week's notes. */
.review-answers {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.review-answer {
  margin: 0;
  font-size: var(--fs-footnote);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-answers__edit {
  margin: var(--space-4) 0 0;
}

.review-answers__edit .ac-link {
  padding: 0;
}

.review-takeaway {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-footnote);
}

.review-takeaway__date {
  padding-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-2);
}

@media (max-width: 1080px) {
  .review-trades {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .review-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Review week / month: the cards are siblings in the mode slot (and in the
   printable report), which gives them no gap of its own. */
[data-review-mode] > .card + .card,
[data-month-report] > .card + .card {
  margin-top: var(--stack-gap);
}


/* ---- Cash Flow: balances per account, then the entries ---- */
.cashflow-entries {
  margin-top: var(--stack-gap);
}

.cashflow-accounts {
  margin-top: var(--space-6);
}

.cashflow-summary .tb-head + .cashflow-accounts {
  margin-top: 0;
}

.cashflow-accounts__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
}

.cashflow-accounts__row > span:not(:first-child) {
  text-align: right;
}

.cashflow-accounts__row--head {
  border-top: 0;
  padding-top: 0;
}

.cashflow-accounts__row--head > span:not(:first-child) {
  justify-content: flex-end;
}

@media (max-width: 700px) {
  .cashflow-accounts__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }

  .cashflow-accounts__row--head {
    display: none;
  }

  .cashflow-accounts__row > span:not(:first-child) {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
  }

  .cashflow-accounts__row > span:not(:first-child)::before {
    content: attr(data-label);
    color: var(--color-text-tertiary);
  }
}


.review-pair + .review-field {
  margin-top: var(--space-5);
}

/* =====================================================================
   Journal, new look (stage 2). A plain bar, no desk: one segmented control
   for the kinds of view, the filters as capsule chips, the trades listed by
   day with the day's R, the chosen trade beside the list on a wide screen
   (the part the operator likes most - structure kept, refined). Windows are
   22px, recessed, hairline edge, no shadow; items inside are 12px.
   ================================================================== */

/* A quiet item, one step up from the recessed window it sits in. */
:root {
  --jv-item: rgba(255, 255, 255, 0.045);
}

:root[data-theme="light"] {
  --jv-item: rgba(255, 255, 255, 0.7);
}

:root[data-look] .view-container--journal .card {
  border: 0;
  border-radius: var(--r-window);
  background: var(--window);
  box-shadow: var(--window-edge);
}

.view-container--journal {
  gap: 14px;
}

@media (max-width: 560px) {
  .view-container--journal {
    gap: var(--space-3);
  }
}

/* The next arrow is the icon set's left chevron, mirrored. */
.jv-flip {
  display: inline-flex;
  transform: scaleX(-1);
}

.jv-gain {
  color: var(--gain);
}

.jv-loss {
  color: var(--loss);
}

.jv-open {
  color: var(--open);
}

/* ---- The fold: a phone's small button at the end of the tabs' row, over the chips, the unit and the tab's toolbar ---- */
.jv-fold {
  display: none;
}

@media (max-width: 880px) {
  .jv-fold {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 3px;
    min-height: 44px;
    margin-block: -4px; /* the 44px touch area adds nothing to the row's height */
    margin-left: auto;
    padding: 0 2px;
    background: none;
    border: 0;
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
  }

  .jv-fold[hidden] {
    display: none;
  }

  /* In the gap before the word: it must not push the button off the tabs' row. */
  .jv-fold__dot {
    position: absolute;
    top: 50%;
    left: -7px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--lead);
  }

  .jv-fold__dot[hidden] {
    display: none;
  }

  .jv-fold__caret {
    display: inline-flex;
    transition: transform var(--dur-base) var(--ease-standard);
  }

  .jv-fold[aria-expanded="true"] .jv-fold__caret {
    transform: rotate(180deg);
  }

  .jv-bar__sp {
    display: none;
  }

  [data-journal-root][data-folded] .jv-chips,
  [data-journal-root][data-folded] .jv-unit,
  [data-journal-root][data-folded] .calendar-toolbar,
  [data-journal-root][data-folded] [data-review-period] {
    display: none;
  }

  [data-journal-root]:not([data-folded]) .jv-chips,
  [data-journal-root]:not([data-folded]) .jv-unit,
  [data-journal-root]:not([data-folded]) .calendar-toolbar,
  [data-journal-root]:not([data-folded]) [data-review-period] {
    animation: jv-unfold var(--dur-base) var(--ease-standard);
  }
}

/* A tablet's bar holds the chips on the tabs' row: the button keeps the right edge, folded or open. */
@media (min-width: 701px) and (max-width: 880px) {
  .jv-fold {
    order: 1;
  }
}

@keyframes jv-unfold {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .jv-fold__caret {
    transition: none;
  }

  [data-journal-root]:not([data-folded]) .jv-chips,
  [data-journal-root]:not([data-folded]) .jv-unit,
  [data-journal-root]:not([data-folded]) .calendar-toolbar,
  [data-journal-root]:not([data-folded]) [data-review-period] {
    animation: none;
  }
}

/* ---- The bar ---- */
.jv-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.jv-bar__sp {
  flex: 1 1 0;
  min-width: 0;
}

/* Segmented control, Apple style: a capsule track, a raised thumb on the one
   selected segment. */
.jv-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--seg-track);
  max-width: 100%;
}

.jv-seg__opt {
  position: relative;
  min-height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
}

.jv-seg__opt:hover {
  color: var(--text-1);
}

.jv-seg__opt.is-active {
  background: var(--seg-thumb);
  color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* The Review's own Day / Week / Month sits above its panels. */
.jv-seg--period {
  align-self: flex-start;
  margin-bottom: 14px;
}

.jv-seg__opt:focus-visible,
.jv-chip:focus-visible,
.jv-iconbtn:focus-visible,
.jv-opt:focus-visible,
.jv-textbtn:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
}

.jv-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.jv-chipwrap {
  position: relative;
  display: inline-flex;
}

/* The text filter above the list: a capsule with a round button that removes it. */
.jv-active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.jv-active:empty {
  display: none;
}

.jv-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  background: var(--tile-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

.jv-tag__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jv-tag__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.jv-tag__x:hover {
  background: var(--tile);
  color: var(--text-1);
}

.jv-tag__x:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 1px;
}

/* A filter chip: a capsule; a chosen filter is a step lighter, an open menu too. */
.jv-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--tile);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  cursor: pointer;
}

.jv-chip:hover,
.jv-chip.is-on,
.jv-chip.is-open {
  background: var(--tile-2);
}

/* Light's --tile-2 is the page's own tone: an open chip lost its ground there. */
:root[data-theme="light"] .jv-chip:hover,
:root[data-theme="light"] .jv-chip.is-on,
:root[data-theme="light"] .jv-chip.is-open {
  background: color-mix(in srgb, var(--text-1) 8%, transparent);
}

.jv-chip__label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jv-chip__caret {
  display: inline-flex;
  color: var(--text-2);
}

/* Icon only: a circle. */
.jv-iconbtn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--tile);
  color: var(--text-2);
  cursor: pointer;
}

.jv-iconbtn:hover,
.jv-iconbtn.is-on {
  color: var(--text-1);
}

.jv-iconbtn.is-on {
  background: var(--tile-2);
}

.jv-unit {
  display: inline-flex;
}

/* ---- The menu under a chip ---- */
.jv-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-dropdown);
  width: 300px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 22px;
  background: var(--desk-hi);
  box-shadow: 0 0 0 1px var(--line), 0 28px 60px -20px rgba(0, 0, 0, 0.65);
}

.jv-pop--end {
  left: auto;
  right: 0;
}

.jv-pop--fit {
  left: 0;
  right: auto;
}

.jv-pop__title {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.jv-pop__title--sub {
  margin-top: 6px;
}

.jv-opts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jv-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}

.jv-opt:hover {
  background: var(--tile);
}

.jv-opt.is-on {
  background: var(--tile-2);
  font-weight: 500;
}

.jv-opt__n {
  font-size: 13px;
  color: var(--text-2);
}

.jv-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--tile);
}

.jv-field > span {
  font-size: 13px;
  color: var(--text-2);
}

/* The filters: one quiet row each, the name left, the value right, its list
   the app's own (TJ.Components.Select), never the browser's. */
.jv-rows {
  display: flex;
  flex-direction: column;
}

.jv-field--row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px;
  border-radius: 0;
  background: none;
  box-shadow: 0 1px 0 var(--line);
}

.jv-field--row:last-child {
  box-shadow: none;
}

.jv-field--row .cselect__trigger {
  justify-content: flex-end;
  gap: 6px;
  min-height: 32px;
  padding: 0 0 0 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13.5px;
  font-weight: 500;
}

.jv-field--row .cselect.is-open .cselect__trigger {
  box-shadow: none;
  color: var(--lead);
}

.jv-field--row .cselect__trigger:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--lead);
  outline-offset: 1px;
}

.jv-select,
.jv-input {
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  color-scheme: inherit;
}

.jv-select option {
  background: var(--desk-hi);
  color: var(--text-1);
}

.jv-select:focus-visible,
.jv-input:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 4px;
  border-radius: 10px;
}

.jv-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jv-range[hidden] {
  display: none;
}

.jv-textbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lead);
  cursor: pointer;
}

.jv-textbtn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* What the shown trades add up to, inside the Result menu. */
.jv-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 0 4px;
}

.jv-sum__k {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

.jv-sum__v {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.jv-sum__strip .form-strip {
  height: 44px;
}

.jv-sum__cap {
  display: block;
  padding: 0 4px;
  font-size: 13px;
  color: var(--text-2);
}

/* ---- The list and the panel beside it ---- */
.jv-split {
  display: block;
}

.jv-detail[hidden] {
  display: none;
}

@media (min-width: 1200px) {
  .jv-split.has-detail {
    display: grid;
    grid-template-columns: minmax(420px, 540px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  /* The panel stays in view while the list scrolls past it. */
  .jv-detail {
    position: sticky;
    top: var(--space-4);
  }
}

@media (max-width: 1199px) {
  .jv-detail {
    display: none;
  }
}

.jv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r-window);
  background: var(--window);
  box-shadow: var(--window-edge);
  min-width: 0;
}

.jv-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jv-group + .jv-group {
  margin-top: 8px;
}

.jv-day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 2px;
}

.jv-day__what {
  flex: 1;
  min-width: 0;
}

.jv-day__what b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}

.jv-day__what small {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

.jv-day__r {
  font-size: 15px;
  font-weight: 600;
}

.jv-short,
.jv-sub.jv-sub--narrow {
  display: none;
}

/* A list inside one window: rows are not tiles. A hairline between them; the
   fill only on hover and on the chosen trade. */
.jv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  min-width: 0;
}

.jv-row + .jv-row {
  box-shadow: inset 0 1px 0 var(--line);
}

.jv-row:hover {
  background: var(--win-tile);
}

/* The chosen trade: a step lighter and the lead colour's edge (the selected state). */
.jv-row.is-selected,
.jv-row.is-selected:hover {
  background: var(--win-tile);
  box-shadow: inset 0 0 0 1.5px var(--lead);
}


.jv-row:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
}

/* The direction square (Portfolio's Recent trades): 30px, radius 9. */
.jv-ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--win-tile);
  color: var(--text-2);
}

.jv-row:hover .jv-ico,
.jv-row.is-selected .jv-ico {
  background: var(--tile-2);
}

.jv-row__main {
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 60%;
  display: flex;
  flex-direction: column;
}

.jv-row__main b,
.jv-row__end b {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.jv-row__main b {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-1);
}

.jv-sub {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jv-row__time {
  flex: none;
  font-size: 13px;
  color: var(--text-2);
}

.jv-row__end {
  flex: none;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 70px;
}

.jv-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.jv-foot__sp {
  flex: 1;
}

.jv-foot__count {
  font-size: 13px;
  color: var(--text-2);
}

/* ---- Phone: one scrolling row for the bar, a lean list ---- */
@media (max-width: 700px) {
  /* The bar wraps instead of scrolling: the R / $ switch at its end was cut off at the edge of a scrolling row
     (audit 2026-10-20 C-20). The menus under the chips are fixed panels on a phone, so nothing needs the clip. */
  .jv-bar {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
  }

  .jv-bar__sp {
    display: none;
  }

  .jv-seg {
    flex: none;
  }

  .jv-seg__opt {
    min-height: 32px;
  }

  .jv-chips {
    flex: 0 1 auto;
    flex-wrap: wrap;
  }

  .jv-chip {
    min-height: 36px;
  }

  .jv-unit {
    flex: none;
  }

  /* A menu under a chip that scrolls with the bar cannot be anchored to
     the chip: it is a panel above the tab bar. */
  .jv-chipwrap {
    position: static;
  }

  .jv-pop {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 60vh;
    overflow-y: auto;
  }

  .jv-pop--end,
  .jv-pop--fit {
    left: 12px;
    right: 12px;
  }

  .jv-long,
  .jv-sub--wide,
  .jv-row__time,
  .jv-row__money {
    display: none;
  }

  .jv-short {
    display: inline;
  }

  .jv-sub.jv-sub--narrow {
    display: block;
  }

  .jv-list {
    padding: 12px;
  }

  .jv-row {
    min-height: 60px;
  }

  .jv-row__main {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  .jv-row__end {
    min-width: 0;
  }
}

/* A phone: the tabs and the R / $ switch on one row (each option 10px at the
   sides, not 14), then a lean list (the operator 21.10, "more on one screen"). The day
   is one line - its date, then how many trades - and a trade row 48px
   (44px stays the target), so a screen holds about twice the days. */
@media (max-width: 560px) {
  .jv-seg__opt {
    padding: 0 10px;
  }

  :root[data-look] .view-container--journal .jv-unit .pill-toggle__opt {
    min-width: 34px;
    padding: 0 10px;
  }

  /* A tab without chips (Calendar or Cash flow with one account): the empty row must not take a gap. */
  .jv-chips:not(:has(*)) {
    display: none;
  }

  .jv-list {
    gap: 4px;
    padding: 6px 8px;
  }

  .jv-group + .jv-group {
    margin-top: 6px;
  }

  .jv-day {
    padding: 8px 8px 2px;
  }

  .jv-day__what {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }

  .jv-day__what b {
    font-size: 13px;
    color: var(--text-2);
  }

  .jv-day__what small {
    font-size: 12px;
    color: var(--text-3);
  }

  .jv-day__r {
    font-size: 13px;
  }

  .jv-row {
    min-height: 48px;
    gap: 10px;
    padding: 6px 8px;
  }

  .jv-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .jv-row__main b,
  .jv-row__end b {
    font-size: 14px;
  }

  .jv-sub {
    font-size: 12px;
  }
}

@media (max-width: 880px), (pointer: coarse) {
  /* Touch: a 44px target around the chips and the segment, without
     growing what is drawn. */
  .jv-chip::after,
  .jv-seg__opt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  .jv-iconbtn {
    width: 44px;
    height: 44px;
  }
}

/* Calendar tiles: groups inside a window are 12px, a day's tint is flat (no
   gradient edge), today is outlined in the lead colour. This file wins over
   look-tapebook.css by one more class. */
:root[data-look] .view-container--journal .calendar-cell {
  border-radius: 12px;
}

:root[data-look] .view-container--journal .calendar-cell--profit,
:root[data-look] .view-container--journal .calendar-cell--loss {
  background-image: none;
}

:root[data-look] .view-container--journal .calendar-cell.is-today {
  border-color: var(--lead);
}

:root[data-look] .view-container--journal .calendar-cell:hover {
  border-color: var(--color-border-strong);
}

/* Weekday names: 13px, plain (look-tapebook.css sets 12.5px). */
:root[data-look] .view-container--journal .calendar-weekdays span {
  font-size: 13px;
}

/* The calendar's own switch and the review link above the grid. */
.calendar-toolbar__nav .jv-textbtn {
  white-space: nowrap;
}

/* The cards of the review: the window's title first, the quiet line (what the
   figures are, the period) under it, 13px in the secondary tone. The shared
   head (Compose.head) writes the caption first; here it reads second. */
.view-container--journal .tb-head__text {
  flex-direction: column;
}

.view-container--journal .tb-head h2 {
  order: 1;
}

.view-container--journal .tb-head .tb-eyebrow {
  order: 2;
}

.view-container--journal .tb-head .tb-head__sub {
  order: 3;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-2);
}

:root[data-look] .view-container--journal .tb-head .tb-eyebrow {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}

.view-container--journal .tb-head h2 {
  margin-top: 0;
  font-size: 17px;
  font-weight: 600;
}

.view-container--journal .tb-head {
  margin-bottom: var(--space-4);
}

/* The top bar search's "Show all N in Journal" row (the popover is top-menus.css's; this one row is the Journal's door, so it is styled here): the footer link's look. */
.top-pop__all {
  justify-content: flex-start;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lead);
  cursor: pointer;
}

.top-pop__all:hover {
  text-decoration: underline;
}

/* Journal -> Not taken (js/views/journal/not-taken-tab.js). Neutral on purpose:
   text colours only, never the gain or loss colour - the tab states what
   happened and nothing else. */
.not-taken__empty {
  margin: 0;
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

.not-taken__day {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.not-taken__date {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.not-taken__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-footnote);
  min-width: 0;
}

.not-taken__time {
  min-width: 5ch;
  color: var(--color-text-tertiary);
}

.not-taken__symbol {
  font-weight: var(--fw-semibold);
}

.not-taken__dir {
  color: var(--color-text-tertiary);
}

.not-taken__acct {
  min-width: 0;
}

.not-taken__what {
  margin-left: auto;
  min-width: 0;
  color: var(--color-text-secondary);
  text-align: right;
  overflow-wrap: anywhere;
}

.not-taken__held {
  color: var(--color-text-tertiary);
}

/* A phone: five entries in the bar (Not taken is the fifth) need the tighter padding, and the
   reason takes its own line under the time, symbol and side. */
@media (max-width: 560px) {
  .jv-seg[data-entries*="not-taken"] .jv-seg__opt {
    padding: 0 8px;
  }

  .not-taken__what {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
}