/* v43.62.14 — trailing trend arrows and matte Gold surfaces. */
#trades .journal-risk .journal-direction-metric b {
  display:inline-flex!important; align-items:center; gap:7px; white-space:nowrap;
}
#trades .journal-risk .journal-direction-metric .journal-trend-arrow {
  display:block; flex:0 0 18px; width:18px; height:18px;
  color:inherit!important; stroke:currentColor!important; fill:none!important;
}
/* v43.62.17 — Silver-matched neutral graphite for Gold surfaces, gold controls retained. */
@layer tmtGoldMatte {
html[data-tmt-preset="gold"] {
  /* Surface RGB matches the Silver screenshot exactly: gold is an accent,
     never an ambient tint. Important tokens defeat legacy unlayered defaults. */
  --fx-bg:#020304!important; --fx-side:#050607!important; --fx-top:#050607!important;
  --fx-surface:#090b0d!important; --fx-surface2:#0e1114!important; --fx-surface3:#12161a!important;
  --fx-border:#302b20; --fx-border-strong:#7b6536;
  --tp-bg:var(--fx-bg)!important; --tp-side:var(--fx-side)!important; --tp-top:var(--fx-top)!important;
  --tp-surface:var(--fx-surface)!important; --tp-surface2:var(--fx-surface2)!important;
  --tp-border:var(--fx-border); --tp-border2:var(--fx-border-strong);
}
/* Shell: remove ambient gold haze. */
html[data-tmt-preset="gold"] :is(
  body,.app,.main,.content,#dashboard,#accounts,#trades,#calendar,#strategy,#admin
){
  background:var(--fx-bg)!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}
html[data-tmt-preset="gold"] :is(.topbar,.sidebar){
  background:var(--fx-top)!important;
  background-image:none!important;
  border-color:var(--fx-border)!important;
  box-shadow:none!important;
  filter:none!important;
}
html[data-tmt-preset="gold"] .sidebar{
  background:var(--fx-side)!important;
}

/* Main cards/panels: neutral graphite-black with gold borders only. */
html[data-tmt-preset="gold"] :is(
  .card,.panel,.kpi,.equity-card,.winloss,.trades-card,
  .account-card,.accounts-card,.journal-card,.journal-trade,.journal-period-group,
  .journal-period-control,.journal-column,.journal-stat,
  .strategy-list-panel,.strategy-editor,.note-list-panel,.board-toolbar,.board,
  .calendar-card,.calendar-toolbar,.calendar-day-group,
  .dashboard-results-calendar-board,.dashboard-results-calendar-detail,
  .modal-box,.trade-modal-box,.detail-modal-box,.account-modal-box,
  .cloud-auth-modal-box,.calendar-analysis-modal-box,.share-card-modal-box,
  .share-card-preview-shell,.mt-detail-sidebar,.mt-trade-chart-section,
  .theme-preset-menu,.streak-card,.streak-win,.streak-loss,
  .side-stats .side:first-child,.side-stats .side:last-child
){
  background:var(--fx-surface)!important;
  background-image:none!important;
  border-color:var(--fx-border)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
}

/* Secondary surfaces stay dark, clean and low-glow. */
html[data-tmt-preset="gold"] :is(
  .detail-metrics>div,.account-metrics>div,.mt-detail-side-metrics>div,
  .risk-preview,.trade-preview-box,.journal-risk span,.journal-thumb,
  .upload-zone,.image-card,.calendar-meta-row,.calendar-day-head,
  .calendar-table-head,.calendar-event-row,.calendar-empty,.calendar-loading,
  .calendar-error,.journal-period-options,.journal-filter-date-display,
  .mt-trade-chart-toolbar,.mt-trade-chart-wrap,.mt-trade-chart-legend
){
  background-color:var(--fx-surface2)!important;
  background-image:none!important;
  border-color:var(--fx-border)!important;
  box-shadow:none!important;
  filter:none!important;
}


html[data-tmt-preset="gold"] :is(.kpi,.streak-kpi,.win-streak-kpi,.loss-streak-kpi,.equity-card,.card,.panel,.winloss,.journal-stat,.account-card,.journal-trade)::before,
html[data-tmt-preset="gold"] :is(.kpi,.streak-kpi,.win-streak-kpi,.loss-streak-kpi,.equity-card,.card,.panel,.winloss,.journal-stat,.account-card,.journal-trade)::after {
  background:none!important; box-shadow:none!important; filter:none!important;
}
html[data-tmt-preset="gold"] :is(.dot.win,.dot.loss,.dot.be,.donut,.positive,.negative,.nav-icon,.mobile-nav-icon) {
  box-shadow:none!important; text-shadow:none!important; filter:none!important;
}
html[data-tmt-preset="gold"] :is(button,input,select,textarea,a):focus-visible {
  outline:2px solid var(--fx-selected-border,#6d592f)!important;
  outline-offset:2px;
}
}

/* Preview v43.62.17 — Gold only: finish the Silver-style matte treatment.
   Do not alter GOLD's metallic button gradients, active navigation, text
   gradients, status colors, or the other presets. */
@layer tmtGoldMatte {
  /* The remaining background containers must not paint tinted light. */
  html[data-tmt-preset="gold"] :is(
    .view,.workspace,.dashboard-workspace,.dashboard-grid,.dashboard-main,
    .dashboard-section,.dashboard-summary,.accounts-workspace,
    .journal-workspace,.journal-dashboard,.journal-dashboard-grid,
    .calendar-workspace,.strategy-workspace
  ){
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /* Smaller nested surfaces were not included in the previous matte pass.
     Silver's visual clarity comes from keeping these uniformly graphite. */
  html[data-tmt-preset="gold"] :is(
    .dashboard-day-cell,.dashboard-calendar-trade-item,
    .dashboard-calendar-month-summary,.dashboard-calendar-day-detail,
    .calendar-analysis-bias-card,.calendar-analysis-context-card,
    .calendar-analysis-scenario,.calendar-analysis-confidence,
    .calendar-analysis-snapshot-main,.calendar-analysis-snapshot-values,
    .side,.avg-results,.side-stats .side,
    .account-metrics>div,.detail-metrics>div,.mt-detail-side-metrics>div,
    .risk-preview,.trade-preview-box,
    .streak-kpi,.win-streak-kpi,.loss-streak-kpi
  ){
    background-color:var(--fx-surface)!important;
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /* Calendar P&L and analysis state stays legible through text, borders,
     icons and accent meters, without a golden ambient fill. */
  html[data-tmt-preset="gold"] :is(
    .dashboard-day-cell.positive,.dashboard-day-cell.negative,
    .streak-win,.streak-loss,
    .calendar-analysis-bias-card.long,.calendar-analysis-bias-card.short,
    .calendar-event-row.is-next
  ){
    background:var(--fx-surface)!important;
    background-image:none!important;
    box-shadow:none!important;
  }

  /* Inset filter panels and form surfaces: no warm highlights or halos.
     Deliberately NOT targeting buttons, .selected, .active, or nav plates. */
  html[data-tmt-preset="gold"] :is(
    input,select,textarea,.account-filter,
    .dashboard-range-select select,.dashboard-picker-select select,
    .journal-period-trigger,.journal-period-popover,.journal-period-options,
    .journal-filter-date-display,.range-tabs,.chart-tabs,
    .avg-unit-toggle,.pnl-unit-toggle,.ev-unit-toggle,
    .pnl-toggle,.journal-pnl-toggle,.journal-filter-tabs,
    .journal-group-tabs,.journal-group-tabs-main,.tmt-language-switch,
    .calendar-range-tabs,.calendar-impact-tabs,.calendar-currency-row,
    .calendar-analysis-instrument-tabs,.mt-trade-chart-toolbar,
    .mt-trade-chart-wrap,.mt-trade-chart-legend
  ){
    background-color:var(--fx-surface2)!important;
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /* Decorative bloom only; preserve metallic data visuals and indicators. */
  html[data-tmt-preset="gold"] :is(
    .kpi,.streak-kpi,.win-streak-kpi,.loss-streak-kpi,.equity-card
  )::before,
  html[data-tmt-preset="gold"] :is(
    .kpi,.streak-kpi,.win-streak-kpi,.loss-streak-kpi,.equity-card
  )::after{
    background:none!important;
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
    opacity:0!important;
  }
  html[data-tmt-preset="gold"] :is(
    .calendar-impact-dot,.cloud-status-dot,.dashboard-day-cell
  ){
    box-shadow:none!important;
    filter:none!important;
  }
}

/* v43.62.18 — the navigation rail uses the SAME neutral brushed graphite as
   Silver. Gold stays gold on selected actions, labels and status indicators. */
@layer tmtGoldMatte {
  html[data-tmt-preset="gold"] .sidebar :is(nav,.sidebar-note,.brand) {
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /* Previously the generic GOLD button sheen applied to every sidebar item,
     leaving a sepia highlight even after the dashboard switched to graphite. */
  html[data-tmt-preset="gold"] .sidebar .nav-item:not(.active),
  html[data-tmt-preset="gold"] .mobile-nav-item:not(.active) {
    background:
      linear-gradient(180deg,#191d20 0%,#121619 23%,#0b0e11 100%)!important;
    background-image:
      linear-gradient(180deg,#191d20 0%,#121619 23%,#0b0e11 100%)!important;
    border-color:rgba(174,185,193,.09)!important;
    color:#89929a!important;
    box-shadow:none!important;
    text-shadow:none!important;
    filter:none!important;
  }

  html[data-tmt-preset="gold"] .sidebar .nav-item:not(.active):hover,
  html[data-tmt-preset="gold"] .mobile-nav-item:not(.active):hover {
    background:linear-gradient(180deg,#22282d 0%,#161b1f 100%)!important;
    background-image:linear-gradient(180deg,#22282d 0%,#161b1f 100%)!important;
    border-color:rgba(183,194,202,.16)!important;
    color:#e8edf0!important;
    box-shadow:none!important;
  }

  /* Active navigation preserves its original metallic GOLD plate, never glow. */
  html[data-tmt-preset="gold"] .sidebar .nav-item.active,
  html[data-tmt-preset="gold"] .mobile-nav-item.active {
    box-shadow:none!important;
    filter:none!important;
    text-shadow:none!important;
  }

  html[data-tmt-preset="gold"] .sidebar .nav-item:not(.active) :is(.nav-icon,svg,svg *),
  html[data-tmt-preset="gold"] .mobile-nav-item:not(.active) :is(.mobile-nav-icon,svg,svg *) {
    color:#858e95!important;
    stroke:currentColor!important;
    filter:none!important;
  }

  html[data-tmt-preset="gold"] .sidebar .sidebar-note {
    border-color:rgba(174,185,193,.13)!important;
    background:transparent!important;
    text-shadow:none!important;
  }
  html[data-tmt-preset="gold"] .sidebar :is(.brand-copy span,.sidebar-note small) {
    color:#858d94!important;
    text-shadow:none!important;
  }
}

/* Responsive popovers anchor to the full toolbar, not its narrow calendar button. */
@media (max-width:1260px) {
  #dashboard .dashboard-controls {
    position:relative!important;
  }
  #dashboard #dashboardDatePickerWrap,
  #trades #journalRangePickerWrap {
    position:static!important;
  }
  #dashboard #dashboardDatePicker,
  #trades #journalRangeDatePicker {
    left:auto!important;
    right:0!important;
    max-width:100%!important;
    max-height:calc(100dvh - 120px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* A child z-index cannot escape the journal card's lower stacking context. */
#trades .journal-card:has(#journalAdvancedFilterPopover:not(.hidden)) {
  z-index:100!important;
}

/* The tablet gutters start at 820px; use viewport positioning over the same range. */
@media (max-width:820px) {
  #trades #journalAdvancedFilterPopover {
    position:fixed!important;
    top:74px!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(680px,calc(100dvh - 158px - env(safe-area-inset-bottom)))!important;
  }
}

/* Issue #18: dialogs use the visible viewport (including Safari's keyboard).
   Profile keeps its header outside the independently scrolling form body. */
body.tmt-modal-open { overflow:hidden!important; }
/* Replacing the range summary can put the pointer on a cell edge. Hover must
   not move that cell back and forth across the pointer (also a sticky iOS hover). */
.trade-date-picker .trade-date-cell { translate:none!important; }
/* Touch browsers retain :hover after taps/viewport changes. A moving hover
   target can then oscillate by 1px at the pointer edge. Keep tap scale feedback. */
@media(hover:none) {
  html body button:hover,html body [role="button"]:hover { translate:none!important; }
}
html body :is(#modal,#profileModal,#profilePasswordModal,#avatarCropModal,#accountModal,#tradeDetailModal,#calendarAnalysisModal,#shareCardModal,#pfEvInfoModal,#cloudAuthModal,#adminAccessModal).modal:not(.hidden) {
  top:var(--tmt-viewport-top,0px)!important;
  bottom:auto!important;
  height:var(--tmt-viewport-height,100dvh)!important;
  box-sizing:border-box;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  align-items:center!important;
  overflow:hidden!important;
}
html body :is(#modal,#profileModal,#profilePasswordModal,#avatarCropModal,#accountModal,#tradeDetailModal,#calendarAnalysisModal,#shareCardModal,#pfEvInfoModal,#cloudAuthModal,#adminAccessModal).modal:not(.hidden) > .modal-box {
  min-height:0!important;
  max-height:100%!important;
  max-width:100%!important;
  box-sizing:border-box;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
html body :is(#modal,#profileModal,#profilePasswordModal,#avatarCropModal,#accountModal,#tradeDetailModal,#calendarAnalysisModal,#shareCardModal,#pfEvInfoModal,#cloudAuthModal,#adminAccessModal).modal .modal-head {
  position:sticky;
  z-index:5;
  flex-shrink:0;
  background:inherit;
  margin-top:0!important;
  margin-left:0!important;
  margin-right:0!important;
  top:0!important;
}
html body #profileModal #profileForm {
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#profileModal #profileForm .profile-modal-head { position:relative;top:auto; }
#profileModal #removeProfileAvatarBtn.hidden { display:none!important; }
#profileModal #profileForm .profile-modal-layout {
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:4px;
}
.dashboard-filter-summary {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 12px;padding:10px 12px;border:1px solid var(--fx-border,#555);
  border-radius:10px;font-size:12px;line-height:1.5;
}
.dashboard-filter-summary button { flex-shrink:0; }
#dashboard #dashboardAdvancedFilterPopover {
  position:fixed!important;top:74px!important;right:24px!important;left:auto!important;
  width:min(650px,calc(100vw - 48px))!important;
  max-height:calc(var(--tmt-viewport-height,100dvh) - 130px)!important;
}
/* Animated/scrolled cards otherwise become containing blocks for fixed children. */
#dashboard .trades-card:has(#dashboardAdvancedFilterPopover:not(.hidden)) {
  position:relative!important;z-index:100!important;
  transform:none!important;filter:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;will-change:auto!important;animation:none!important;
  transition:none!important;opacity:1!important;
}
@media(max-width:820px) {
  html { --tmt-safe-gutter:12px; }
  html[data-tmt-preset] body .topbar {
    height:calc(58px + env(safe-area-inset-top))!important;
    min-height:calc(58px + env(safe-area-inset-top))!important;
    padding-top:env(safe-area-inset-top)!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  html[data-tmt-preset] body :is(#dashboard,#trades,#accounts,#calendar,#strategy).content {
    padding-left:max(var(--tmt-safe-gutter),env(safe-area-inset-left))!important;
    padding-right:max(var(--tmt-safe-gutter),env(safe-area-inset-right))!important;
  }
  html[data-tmt-preset] body .sidebar {
    padding-top:calc(18px + env(safe-area-inset-top))!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
  html[data-tmt-preset] body .sidebar-toggle-close { top:calc(18px + env(safe-area-inset-top))!important; }
  html[data-tmt-preset] body .mobile-bottom-nav {
    padding-left:max(6px,env(safe-area-inset-left))!important;
    padding-right:max(6px,env(safe-area-inset-right))!important;
  }
  #dashboard #dashboardDatePicker,#trades #journalRangeDatePicker {
    position:fixed!important;top:74px!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    width:auto!important;max-width:none!important;
    max-height:calc(var(--tmt-viewport-height,100dvh) - 158px - env(safe-area-inset-bottom))!important;
  }
  #dashboard .dashboard-title-row:has(#dashboardDatePicker:not(.hidden)),
  #dashboard .dashboard-controls:has(#dashboardDatePicker:not(.hidden)),
  #trades .trades-workspace-head:has(#journalRangeDatePicker:not(.hidden)),
  #trades #journalPeriodControl:has(#journalRangeDatePicker:not(.hidden)) {
    transform:none!important;filter:none!important;backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;will-change:auto!important;animation:none!important;
    transition:none!important;opacity:1!important;
  }
  #dashboard #dashboardAdvancedFilterPopover {
    position:fixed!important;top:74px!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    width:auto!important;max-width:none!important;
    max-height:calc(var(--tmt-viewport-height,100dvh) - 158px - env(safe-area-inset-bottom))!important;
  }
  /* Explicit placement prevents old one-column rules creating implicit tracks. */
  #trades .journal-trade {
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    gap:8px 10px!important;
    padding:10px!important;
  }
  #trades .journal-main { display:contents!important; }
  #trades .journal-thumb {
    grid-column:1!important;grid-row:1 / 3!important;
    width:72px!important;min-width:0!important;height:72px!important;
    align-self:start!important;
  }
  #trades .journal-title {
    grid-column:2!important;grid-row:1!important;
    flex-wrap:wrap!important;gap:5px!important;align-self:end;
  }
  #trades .journal-title strong {
    white-space:normal!important;overflow:visible!important;
    text-overflow:clip!important;overflow-wrap:anywhere;font-size:14px!important;
  }
  #trades .journal-title .badge { flex-shrink:0; }
  #trades .journal-meta {
    grid-column:2!important;grid-row:2!important;
    display:flex!important;flex-wrap:wrap!important;gap:4px 8px!important;
    font-size:10px!important;line-height:1.4!important;align-self:start;
  }
  #trades .journal-meta span { overflow-wrap:anywhere; }
  #trades .journal-risk {
    grid-column:1 / -1!important;grid-row:auto!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #trades .journal-risk > span {
    min-width:0!important;display:flex!important;flex-wrap:wrap!important;
    align-items:center!important;justify-content:center!important;gap:3px!important;
    padding:6px 3px!important;font-size:10px!important;overflow-wrap:anywhere;
  }
  #trades .journal-risk b { font-size:11px!important; }
  #trades .journal-risk .journal-trend-arrow { width:13px!important;height:13px!important; }
  #trades .journal-open {
    grid-column:1 / -1!important;grid-row:auto!important;
    justify-self:end!important;min-height:30px;
  }
  .dashboard-filter-summary { flex-wrap:wrap; }
}
@media(max-width:760px) {
  html[data-tmt-preset] body #dashboard .dashboard-controls.dashboard-controls-compact {
    display:grid!important;flex:none!important;width:100%!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    grid-template-rows:auto auto auto!important;gap:8px!important;align-items:center!important;
  }
  #dashboard .dashboard-controls > .range-tabs {
    grid-column:1 / -1!important;grid-row:1!important;
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
    width:100%!important;min-width:0!important;height:42px!important;padding:3px!important;
    box-sizing:border-box;overflow:hidden!important;
  }
  #dashboard .dashboard-controls > .range-tabs button {
    width:100%!important;min-width:0!important;padding:0 2px!important;min-height:34px!important;
    height:34px!important;font-size:11px!important;
  }
  #dashboard #dashboardAccountFilter { grid-column:1!important;grid-row:2!important;min-width:0!important;width:100%!important; }
  #dashboard #dashboardShareCardBtn { grid-column:2!important;grid-row:2!important;margin:0!important; }
  html[data-tmt-preset] body #dashboard .dashboard-controls.dashboard-controls-compact .dashboard-range-selects-inline {
    grid-column:1!important;grid-row:3!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(70px,.6fr)!important;
    width:100%!important;min-width:0!important;gap:8px!important;box-sizing:border-box;
  }
  #dashboard .dashboard-controls.dashboard-controls-compact .dashboard-range-selects-inline .dashboard-range-select {
    width:100%!important;min-width:0!important;max-width:100%!important;
  }
  #dashboard #dashboardMonthSelect,#dashboard #dashboardYearSelect { width:100%!important;min-width:0!important;font-size:16px!important; }
  #dashboard #dashboardDatePickerWrap { grid-column:2!important;grid-row:3!important;display:block!important; }
  #profileModal #profileForm { padding:12px!important; }
  #profileModal #profileForm .profile-modal-head { gap:10px; }
  #profileModal #profileForm .profile-modal-head h2 { font-size:19px!important; }
  html body .modal[id] input:not([type=range]):not([type=checkbox]):not([type=radio]),
  html body .modal[id] select,html body .modal[id] textarea { font-size:16px!important; }
}
@media(max-width:520px) { #trades { --tmt-safe-gutter:10px; } }
@media(max-width:480px) { html { --tmt-safe-gutter:10px; } }

/* PF/EV must grow with its two metrics. The legacy absolute 60px/43px
   split cannot contain the mobile KPI typography and its margins.
   Match the legacy mobile typography breakpoint, including tablets. */
@media(max-width:820px) {
  #dashboard .kpi.split-kpi,
  #dashboard .kpi.split-kpi + .kpi {
    height:auto!important;
    min-height:103px!important;
  }
  #dashboard .kpi.split-kpi {
    /* Keep rounded clipping without a nested scrollport when a unit button
       receives focus. Older engines retain the existing hidden fallback. */
    overflow:hidden;
    overflow:clip;
  }
  #dashboard .split-kpi .split-kpi-top,
  #dashboard .split-kpi .split-kpi-bottom {
    position:static;
    height:auto;
  }
  #dashboard .split-kpi .split-kpi-top { gap:3px; }
  #dashboard .split-kpi .split-kpi-bottom-main { gap:3px; }
  #dashboard .split-kpi .split-kpi-top > strong,
  #dashboard .split-kpi .split-kpi-bottom-main > strong {
    margin:0!important;
    flex-shrink:0;
  }
  #dashboard .split-kpi .split-kpi-bottom-main > span {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}

/* v43.63 — mobile trade cards with chart-first layout.
   This stylesheet loads after styles.css and therefore owns the final mobile grid. */
@media (max-width:520px){
  #trades .journal-trade{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto auto!important;
    gap:8px!important;
    padding:10px!important;
  }
  #trades .journal-title{grid-column:1!important;grid-row:1!important;align-self:auto!important}
  #trades .journal-meta{grid-column:1!important;grid-row:2!important;align-self:auto!important}
  #trades .journal-thumb{
    grid-column:1!important;grid-row:3!important;
    width:100%!important;min-width:0!important;height:auto!important;
    aspect-ratio:4 / 3;position:relative;align-self:auto!important;
  }
  #trades .journal-thumb > :is(img,canvas){position:absolute;inset:0;width:100%;height:100%}
  #trades .journal-risk{
    grid-column:1!important;grid-row:4!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #trades .journal-open{grid-column:1!important;grid-row:5!important;justify-self:end!important}
}