/* The trade journal. Only what /journal needs on top of terminal.css,
   pages.css and the shell bridge; every colour comes from the shell tokens so
   the dark theme and the papyrus light theme both follow without a second set
   of rules. Everything is prefixed jl- so no other page can be touched. */

.jl-top { position: sticky; top: -22px; z-index: 12; padding: 8px 0; background: var(--bg); }
.jl-save { font-size: 11.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 7px; }
.jl-save::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.jl-save.is-saving::before { background: var(--red); animation: jlPulse 1s ease-in-out infinite; }
.jl-save.is-saved::before { background: var(--up); }
.jl-save.is-stuck { color: var(--red); }
.jl-save.is-stuck::before { background: var(--red); }
@keyframes jlPulse { 50% { opacity: .25; } }

/* ── filters ───────────────────────────────────────────────────────────── */
.jl-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 14px 18px 4px; }
.jl-fgrid .t-field input, .jl-fgrid .t-field select { width: 100%; padding: 9px 11px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: 12px; font: 400 12.5px/1.4 var(--ui); }
.jl-fgrid .t-field input:focus, .jl-fgrid .t-field select:focus { border-color: var(--red); outline: none; }
.jl-f-q { grid-column: span 2; }
.jl-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.jl-chip { padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--dim); font-size: 11.5px; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.jl-chip:hover { border-color: var(--line-3); color: var(--ink); }
.jl-chip.on { border-color: var(--fill); background: var(--red-a); color: var(--ink); }
.jl-fmore { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 12px 18px 16px; }
.jl-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); cursor: pointer; }
.jl-check input { width: 15px; height: 15px; accent-color: var(--fill); }
.jl-f-rating { max-width: 170px; flex: 0 0 auto; }
.jl-f-rating select { width: 100%; padding: 9px 11px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: 12px; font: 400 12.5px/1.4 var(--ui); }
.jl-count { font-size: 12px; color: var(--faint); }

.jl-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jl-stats .hcard b { font-size: 18px; }
.jl-stats .hcard em { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); margin-top: 4px; }

/* ── panes ─────────────────────────────────────────────────────────────── */
.jl-pane { display: none; }
.jl-pane.on { display: block; }
.jl-per { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.jl-per select { padding: 5px 9px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: 999px; font: 400 12px var(--ui); }

/* ── the trade table ───────────────────────────────────────────────────── */
.jl-table th.jl-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.jl-table th.jl-sort:hover { color: var(--ink); }
.jl-table th.jl-sort i { font-style: normal; opacity: 0; margin-left: 4px; }
.jl-table th.jl-sort.is-on { color: var(--ink); }
.jl-table th.jl-sort.is-on i { opacity: 1; color: var(--red); }
.jl-table tbody tr.jl-row { cursor: pointer; }
.jl-table tbody tr.jl-row:hover td { background: var(--red-a); }
.jl-table tbody tr.jl-row.is-open td { background: var(--red-a); }
.jl-table td.jl-note-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--dim); font-family: var(--ui); }
.jl-day-row td { background: var(--card-2); font-family: var(--ui); font-size: 11.5px; color: var(--dim); text-align: left; }
.jl-day-row b { color: var(--ink); font-weight: 600; }
.jl-tagset { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.jl-t { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 10px; color: var(--dim); font-family: var(--ui); }
.jl-t.is-bad { border-color: var(--red); color: var(--red); }
.jl-stars { letter-spacing: 1px; color: var(--faint); font-family: var(--ui); font-size: 11px; }
.jl-stars b { color: var(--red); font-weight: 500; }

.jl-pager { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.jl-pager .grow { flex: 1; }
.jl-pager span { font-size: 12px; color: var(--faint); }

/* ── review tables ─────────────────────────────────────────────────────── */
.jl-grp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.jl-grp th { padding: 9px 18px; font: 400 11px var(--ui); letter-spacing: .06em; color: var(--faint); text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.jl-grp th:first-child { text-align: left; }
.jl-grp td { padding: 9px 18px; font: 400 12.5px var(--num); text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.jl-grp td:first-child { text-align: left; font-family: var(--ui); }
.jl-grp tr:last-child td { border-bottom: 0; }
.jl-thin { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 10px var(--ui); color: var(--faint); }
.jl-bar { position: relative; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 5px; }
.jl-bar i { display: block; height: 100%; background: var(--fill); }
.jl-bar i.is-up { background: var(--up); }

/* ── daily recap ───────────────────────────────────────────────────────── */
.jl-day { display: grid; grid-template-columns: 132px repeat(3, minmax(0, 1fr)) 150px; gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.jl-day:last-child { border-bottom: 0; }
.jl-day__d b { display: block; font: 500 13px var(--ui); }
.jl-day__d span { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
.jl-day__kv span { display: block; font-size: 10.5px; color: var(--faint); }
.jl-day__kv b { display: block; font: 500 14px var(--num); margin-top: 3px; }
.jl-day__note textarea, .jl-dnote textarea { width: 100%; min-height: 54px; resize: vertical; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink); font: 400 12.5px/1.55 var(--ui); }
.jl-day__note textarea:focus, .jl-dnote textarea:focus { border-color: var(--red); outline: none; }
.jl-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--faint); font-family: var(--ui); }
.jl-flag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); }
.jl-flag.is-ok { color: var(--up); }
.jl-flag.is-ok::before { background: var(--up); }

/* ── the detail drawer ─────────────────────────────────────────────────── */
.jl-drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.jl-drawer[hidden] { display: none; }
.jl-drawer__bg { position: absolute; inset: 0; background: rgba(6, 3, 3, .55); backdrop-filter: blur(2px); }
[data-theme="light"] .jl-drawer__bg { background: rgba(60, 40, 30, .38); }
.jl-drawer__panel { position: relative; width: min(560px, 100%); height: 100%; overflow-y: auto; background: linear-gradient(180deg, var(--card-2), var(--card)); border-left: 1px solid var(--line-2); box-shadow: -30px 0 90px rgba(0, 0, 0, .45); animation: jlIn .28s var(--ease) both; }
@keyframes jlIn { from { transform: translateX(34px); opacity: 0; } to { transform: none; opacity: 1; } }
.jl-dh { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.jl-dh b { display: block; font: 600 17px var(--ui); letter-spacing: -.02em; }
.jl-dh span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.jl-dh .grow { flex: 1; }
.jl-dbody { padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 20px; }
.jl-sec > h3 { font: 500 12px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.jl-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.jl-kv > div { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card); }
.jl-kv span { display: block; font-size: 10.5px; color: var(--faint); }
.jl-kv b { display: block; font: 500 14.5px var(--num); margin-top: 4px; }
.jl-kv em { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); margin-top: 3px; }

/* the price ruler: entry, exit and the stop, at their real distances. No
   invented path - the engine keeps no bar history for a closed trade. */
.jl-ruler { border: 1px solid var(--line); border-radius: 14px; padding: 26px 18px 14px; background: var(--card); position: relative; }
.jl-ruler__line { position: relative; height: 2px; background: var(--line-2); border-radius: 2px; }
.jl-ruler__span { position: absolute; top: 0; height: 2px; background: var(--fill); border-radius: 2px; }
.jl-ruler__span.is-up { background: var(--up); }
.jl-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--card); background: var(--dim); }
.jl-mark.is-entry { background: var(--ink); }
.jl-mark.is-exit { background: var(--fill); }
.jl-mark.is-stop { background: var(--red); width: 2px; height: 14px; border-radius: 1px; border: 0; }
.jl-mark.is-target { background: var(--up); width: 2px; height: 14px; border-radius: 1px; border: 0; }
.jl-rlab { position: absolute; transform: translateX(-50%); font: 400 10px var(--num); color: var(--dim); white-space: nowrap; }
.jl-rlab.top { top: 6px; }
.jl-rlab.bot { bottom: -2px; }
.jl-rlab i { font-style: normal; display: block; font-family: var(--ui); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.jl-note { display: flex; flex-direction: column; gap: 10px; }
.jl-note textarea { width: 100%; min-height: 128px; resize: vertical; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 400 13px/1.6 var(--ui); }
.jl-note textarea:focus { border-color: var(--red); outline: none; }
.jl-tagin { display: flex; gap: 8px; }
.jl-tagin input { flex: 1; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 400 12.5px var(--ui); }
.jl-tagin input:focus { border-color: var(--red); outline: none; }
.jl-rate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.jl-stars-in { display: inline-flex; gap: 3px; }
.jl-stars-in button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--line-3); transition: color .16s, background .16s; }
.jl-stars-in button:hover { background: var(--red-a); }
.jl-stars-in button.on { color: var(--fill); }
.jl-stars-in svg { width: 17px; height: 17px; fill: currentColor; }
.jl-stop { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.jl-stop input { width: 130px; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 400 12.5px var(--num); }
.jl-stop input:focus { border-color: var(--red); outline: none; }

.jl-signed-out { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 12px; max-width: 74ch; }
.jl-signed-out p { font-size: 13.5px; line-height: 1.75; color: var(--dim); }
.jl-so-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.jl-skel { padding: 26px 18px; color: var(--faint); font-size: 12.5px; }
.jl-err { padding: 14px 18px; color: var(--red); font-size: 12.5px; }

@media (max-width: 1080px) {
  .jl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jl-day { grid-template-columns: 1fr 1fr; }
  .jl-day__note { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .jl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jl-f-q { grid-column: 1 / -1; }
  .jl-kv { grid-template-columns: 1fr; }
  .jl-day { grid-template-columns: 1fr; }
  .jl-top { position: static; }
}

/* ==========================================================================
   Responsive + rendering pass, 23 Sep 2026.
   ========================================================================== */

/* filters, tag chips and the star rating are all thumb work on a tablet and
   a landscape phone, not only under 680px */
@media (max-width: 1080px), (pointer: coarse) {
  .jl-chip { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; }
  .jl-fgrid .t-field input, .jl-fgrid .t-field select,
  .jl-f-rating select, .jl-stop input, .jl-tagin input { min-height: 44px; font-size: 16px; }
  .jl-per select { min-height: 40px; font-size: 15px; }
  .jl-check { min-height: 40px; }
  .jl-check input { width: 20px; height: 20px; }
  .jl-stars-in button { width: 40px; height: 40px; }
  .jl-stars-in svg { width: 20px; height: 20px; }
  .jl-table th.jl-sort { padding-top: 12px; padding-bottom: 12px; }
  .jl-dh .mini-btn, .jl-dh .cbtn { min-height: 40px; }
}

/* the drawer takes the whole width on a phone: 560px of panel on a 360px
   screen left the close button off the edge of the thumb's reach */
@media (max-width: 620px) {
  .jl-drawer__panel { width: 100%; border-left: 0; }
  .jl-dbody { padding: 14px 14px 32px; gap: 16px; }
  .jl-dh { padding: 14px 14px 12px; }
  .jl-ruler { padding: 24px 14px 14px; }
  .jl-kv { gap: 8px; }
}
@media (max-width: 400px) {
  .jl-fgrid { grid-template-columns: 1fr; padding-left: 12px; padding-right: 12px; }
  .jl-chips, .jl-fmore { padding-left: 12px; padding-right: 12px; }
  .jl-stats { grid-template-columns: 1fr 1fr; }
}

/* landscape phones: a short drawer that still scrolls, and a wider list */
@media (max-height: 520px) and (orientation: landscape) {
  .jl-drawer__panel { width: min(440px, 72vw); }
  .jl-dbody { padding: 12px 16px 26px; gap: 14px; }
  .jl-top { position: static; }
  .jl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* wide screens: the review panes get columns, the notes stop at a measure */
@media (min-width: 1600px) {
  .jl-drawer__panel { width: min(640px, 100%); }
  .jl-note textarea { max-width: 90ch; }
  .jl-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* low-end: no blur behind the drawer, no drop shadow, no slide-in */
html.mz-low .jl-drawer__bg { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 3, 3, .72); }
html.mz-low .jl-drawer__panel { box-shadow: none; animation: none; background: var(--card); }
html.mz-low .jl-save.is-saving::before { animation: none; }
html.mz-low .jl-chip { transition: none; }