/* ==========================================================================
   Trade Detail drawer

   Sibling of .modal, not a variant of it: right-edge panel on desktop,
   full-screen sheet on mobile, and it stays open while a modal (Edit /
   Delete confirm) sits on top - hence the lower z-index pair and its own
   `drawer-open` scroll-lock class.
   ========================================================================== */

.detail-drawer-backdrop {
  position: fixed;
  inset: 0;
  /* Dimmed only: glass belongs to the navigation layer. */
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-drawer-backdrop);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  touch-action: none;
}

.detail-drawer-backdrop.is-open {
  opacity: 1;
}

.detail-drawer {
  position: relative;
  z-index: var(--z-drawer);
  width: 100%;
  max-width: 460px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-decel);
  touch-action: auto;
}

.detail-drawer-backdrop.is-open .detail-drawer {
  transform: translateX(0);
}

.detail-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.detail-drawer__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.detail-drawer__body {
  flex: 1;
  min-height: 0;
  padding: var(--space-5);
  overflow-x: hidden;
  overflow-y: auto;
  /* Screenshots load in asynchronously and change the panel's height; the
     gutter is reserved so that arrival doesn't nudge the whole panel. */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.detail-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ---- Header block ---- */

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

.detail-head__symbol {
  font-size: var(--fs-title3);
  font-weight: var(--fw-semibold);
}

.detail-head__pnl {
  font-size: var(--fs-title1);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  margin-top: var(--space-2);
  overflow-wrap: anywhere;
}

.detail-head__meta {
  margin-top: 2px;
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

/* ---- Sections ---- */

.detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.detail-section__title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}

.detail-rows {
  display: flex;
  flex-direction: column;
}

.detail-rows__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
}

.detail-rows__row:last-child {
  border-bottom: none;
}

.detail-rows__row dt {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.detail-rows__row dd {
  text-align: right;
  font-weight: var(--fw-medium);
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-partials {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  border-radius: 12px;
  background: var(--color-surface-hover);
  font-size: var(--fs-caption);
}

.detail-partials__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.detail-partials__row--rest {
  color: var(--color-text-tertiary);
}

.detail-notes {
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  background: var(--color-surface-hover);
  font-size: var(--fs-footnote);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Planned vs realized bar ----
   A price axis, so left-to-right is price order rather than profit order.
   Labels alternate above/below the track so two close markers can't
   overprint each other. */

.level-bar {
  /* Top padding clears the Stop/TP label row (labels are absolutely
     positioned inside the track). The two lower rows are cleared by the
     caption's margin-top instead, so the block ends right under the text. */
  padding: 32px 6px 4px;
}

.level-bar__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-hover);
}

.level-bar__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.level-bar__zone--risk {
  background: var(--color-loss);
  opacity: 0.35;
}

.level-bar__zone--reward {
  background: var(--color-profit);
  opacity: 0.35;
}

.level-bar__partial {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

.level-bar__marker {
  position: absolute;
  top: 50%;
  width: 0;
}

.level-bar__tick {
  position: absolute;
  left: -1px;
  top: -8px;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-text-tertiary);
}

.level-bar__label {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.level-bar__marker--above .level-bar__label {
  bottom: 13px;
}

.level-bar__marker--below .level-bar__label {
  top: 13px;
}

/* Second lower row - Exit only, so it can never overprint Entry. The 18px
   step is one label line-box, so the two rows clear each other exactly. */
.level-bar__marker--below-far .level-bar__label {
  top: 31px;
}

.level-bar__marker--stop .level-bar__tick {
  background: var(--color-loss);
}

.level-bar__marker--tp .level-bar__tick {
  background: var(--color-profit);
}

.level-bar__marker--entry .level-bar__tick {
  background: var(--color-text-primary);
}

/* The one marker that is fact rather than plan - drawn as a filled dot so
   it reads differently from the three planned ticks. */
.level-bar__marker--exit .level-bar__tick {
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-surface-raised);
}

.level-bar__marker--exit .level-bar__label {
  color: var(--color-accent);
  font-weight: var(--fw-medium);
}

.level-bar__caption {
  margin-top: 48px;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

/* ---- Screenshots ---- */

.shot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.shot-tile {
  position: relative;
  width: 84px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-hover);
}

.shot-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}

.shot-tile__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}

.shot-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.shot-actions .btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.shot-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(0, 0, 0, 0.82);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  cursor: zoom-out;
}

.shot-lightbox.is-open {
  opacity: 1;
}

.shot-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}

/* ---- Mobile: full-screen sheet ----
   Same breakpoint as the rest of the mobile shell (880px, see layout.css). */
@media (max-width: 880px) {
  .detail-drawer {
    max-width: 100%;
    border-left: none;
  }

  .detail-drawer__footer {
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }

  .shot-tile {
    width: 76px;
    height: 56px;
  }
}


/* ---- Inline: the same panel beside the Journal list (redesign R5) ----
   v12 "the list with the detail beside it instead of a drawer": a window
   in the page on a wide screen, as tall as the screen allows and scrolling
   inside itself; no backdrop, no slide. :root[data-look] outranks
   look-tapebook.css's drawer rule. */
.detail-inline {
  height: 100%;
}

:root[data-look] .detail-drawer.detail-drawer--inline {
  max-width: none;
  /* As tall as its content, up to the screen: a short trade is a short window, not a tall empty one. */
  height: auto;
  max-height: min(960px, calc(100dvh - var(--topbar-height) - 2 * var(--space-4)));
  transform: none;
  transition: none;
  border: 0;
  border-radius: 22px;
  background: var(--window);
  box-shadow: var(--window-edge);
  overflow: hidden;
}

.detail-drawer--inline:focus {
  outline: none;
}

.detail-drawer--inline:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
}

.detail-drawer--inline[data-quiet-focus]:focus-visible {
  outline: none;
}


/* ==========================================================================
   v12 trade panel (dev/mockups/redesign/v12.html, "Journal"): no title bar
   and no footer. The symbol's two letters, "EURUSD long" with the day and
   the account under it, the result as one big R with the money and the risk
   beside it, a grid of labelled values, the screenshots and the notes, and
   one quiet "More details" row for what the mockup does not draw.
   Inline (a window of the page) Edit and Delete sit in the head; as a
   drawer (a phone, or a screen too narrow for the list and the panel side
   by side) a back bar with a menu stands above it.
   ========================================================================== */

.detail-drawer__body {
  padding: 18px;
  gap: 14px;
  /* The grids inside answer to the panel's own width, not the screen's. */
  container-type: inline-size;
}

.jd-desk {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jd-n {
  display: none;
}

.jd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.jd-round {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--tile);
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.jd-round:hover {
  color: var(--text-1);
}

.jd-menuwrap {
  position: relative;
}

.jd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 22px;
  background: var(--desk-hi);
  box-shadow: 0 0 0 1px var(--line), 0 24px 50px -16px rgba(0, 0, 0, 0.6);
}

.jd-menu[hidden] {
  display: none;
}

.jd-menu .jd-btn {
  justify-content: flex-start;
  padding: 0 20px;
  color: var(--text-1);
  font-size: 15px;
  font-weight: 500;
}

.jd-menu .jd-btn:hover {
  background: var(--tile);
  text-decoration: none;
}

.jd-menu .jd-btn--danger {
  color: var(--loss);
}

.jd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.jd-head__sp {
  flex: 1;
}

/* The direction square, the size of the head's title (Portfolio's is 30px). */
.jd-ico {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--win-tile);
  color: var(--text-2);
}

.jd-title {
  min-width: 0;
}

.jd-title b {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

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

.jd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--lead);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.jd-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jd-btn--danger {
  color: var(--loss);
}

.jd-hero {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin-top: 6px;
}

/* The key figure: 56px, weight 500, -0.03em, tabular (one style with the account page). */
.jd-big {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-1);
}

.jd-big small {
  font-size: 22px;
  margin-left: 3px;
  letter-spacing: -0.02em;
  color: var(--text-2);
}

/* The arrow before a gain or a loss: smaller than the figure, same colour. */
.jd-arrow {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.4em;
  letter-spacing: 0;
  vertical-align: 0.28em;
}

.jd-mid {
  padding-bottom: 6px;
}

.jd-mid__v {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.jd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.jd-field {
  min-width: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--jv-item);
}

.jd-field label {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--text-2);
}

.jd-field b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.jd-tiles {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
}

.jd-tile {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--jv-item);
}

.jd-shots {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.jd-shots .shot-grid {
  flex: 1;
  align-content: flex-start;
}

.jd-shots .shot-tile {
  width: 104px;
  height: 78px;
  border-radius: 10px;
}

.jd-notes__text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.jd-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tile-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

.jd-chip--offlist {
  box-shadow: inset 0 0 0 1px var(--line);
}

.jd-more {
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.jd-more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  list-style: none;
}

.jd-more > summary::-webkit-details-marker {
  display: none;
}

.jd-more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.jd-more[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.jd-more > summary:hover {
  color: var(--text-1);
}

.jd-more__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: 6px;
}

.jd-more__body .detail-section:first-child {
  border-top: 0;
  padding-top: 0;
}

/* The inline panel is a recessed window beside the list (set above). */

/* Phone and drawer: the panel is a full screen of its own (mockup, phone). */
@media (max-width: 880px) {
  .detail-drawer {
    background: var(--page);
  }

  :root[data-look][data-theme] .detail-drawer {
    background: var(--page);
  }

  /* The mockup's phone: the head, the figure and the first fields sit on a
     desk of their own; the bar above and the rest below are on the page. */
  .jd-desk {
    padding: 14px;
    border-radius: 22px;
    background: var(--desk);
  }

  .jd-n {
    display: inline;
  }

  .jd-w {
    display: none;
  }

  .jd-big {
    font-size: 44px;
  }

  .jd-mid__v {
    font-size: 22px;
  }

  .jd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jd-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .jd-shots {
    min-height: 150px;
  }

  .detail-drawer__body {
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .jd-hero {
    gap: 6px 20px;
  }
}

/* Inside a narrow window (the panel beside the list at 1200 to ~1400 px). */
@container (max-width: 520px) {
  .jd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jd-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Buttons inside the panel: capsules (look-tapebook.css rounds .btn to 12px; one more class wins). */
:root[data-look] .jd-shots .btn {
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
}

.jd-shots .shot-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.jd-shots .shot-actions .text-tertiary {
  color: var(--text-2);
}