/* ════════════════════════════════════════════════════════════
   journal-dash.css — the home dashboard

   The journal's rule is that colour means the plan, never the money. So
   gains and losses here are told apart by three things that do not rely on
   a "good" or "bad" colour: which side of zero a mark sits on, a + or −
   sign, and a cool/warm pair — blue and orange, the one pair that stays
   apart for every kind of colour vision. Teal is for things with a size
   but no sign (a count, a rate). Green and red keep their one meaning, the
   plan, and appear only where the plan is the subject.

   The five colours below were checked against both panel surfaces for
   lightness, chroma, contrast and colour-blind separation.
   ════════════════════════════════════════════════════════════ */

:root {
  --jd-gain: #3987e5;
  --jd-loss: #d95926;
  --jd-neu:  #34A28F;
  --jd-ink:  var(--ink);
  --jd-on:   #0B1011;   /* text on a strongly coloured cell */
  --jd-good: var(--good);
  --jd-bad:  var(--bad);
}
:root[data-theme="light"] {
  --jd-gain: #2a78d6;
  --jd-loss: #eb6834;
  --jd-neu:  #0A8F78;
  --jd-on:   #0F1618;
}
/* Settings → Colours. "classic" (the default): money takes green and red and the plan (--good/--bad,
   journal.css) takes blue and orange. "neutral": money stays blue and orange (above) and the plan is green and
   red. Marks that stand for the plan keep the dashboard's own validated pair, a shade deeper than the text tokens. */
:root:not([data-colors="neutral"]) {
  --jd-gain: #43B67F;
  --jd-loss: #E5634F;
  --jd-good: #4DA3FF;   /* the plan was followed: a bright blue */
  --jd-bad:  #FFB627;   /* the plan was broken: a bright amber — far from the red of a loss, which orange was not */
}
:root[data-theme="light"]:not([data-colors="neutral"]) {
  --jd-gain: #1E8A55;
  --jd-loss: #D04A38;
  --jd-good: #2D8CFF;
  --jd-bad:  #F5A300;
}
/* "neutral": money is blue and orange, so the plan takes a bright green and a bright pink — not red, which sits too
   close to the orange. */
:root[data-colors="neutral"] { --jd-good: #34D987; --jd-bad: #FF5CA8; }
:root[data-theme="light"][data-colors="neutral"] { --jd-good: #12B76A; --jd-bad: #E0287F; }


/* ── the two zones ───────────────────────────────────────── */

.jd { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin-bottom: 14px; }
.jd[hidden] { display: none; }
/* Held back until the dashboard above it has drawn (journal-dash.js removes it), then shown at once. */
.jd-wait { opacity: 0; }
.jd-b { transition: opacity .16s ease; }

.jd-p, .jd-bar, .jd-ins, .jd-k, .jd-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
}

/* The lower zone is the page's flow of cards (journal-masonry.js sets the columns); a chart card
   takes the width of whichever column it is in. */
.jd-foot { font-size: 12px; color: var(--ink3); line-height: 1.5; padding: 0 4px; }

/* ── the filter bar ──────────────────────────────────────── */

.jd-bar { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.jd-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.jd-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; max-width: 100%; }
.jd-seg button {
  appearance: none; border: 0; background: transparent; color: var(--ink2);
  font: 600 12.5px/1 inherit; font-family: inherit; padding: 8px 11px; min-height: 32px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.jd-seg button:hover { color: var(--ink); }
.jd-seg button[aria-pressed="true"] { background: var(--panel3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.18); }
.jd-seg.per { overflow-x: auto; scrollbar-width: none; }
.jd-seg.per::-webkit-scrollbar { display: none; }

.jd-dates { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-dates label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); }
.jd-dates input, .jd-sel {
  font: 500 13px/1.2 inherit; font-family: inherit; color: var(--ink); background-color: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-height: 32px; max-width: 100%;
}
.jd-sel {
  appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237C8C8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.jd-fs { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; min-width: 0; }
.jd-fs .jd-sel { text-transform: none; letter-spacing: 0; }

.jd-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
  font: 600 12.5px/1 inherit; font-family: inherit; color: var(--ink2); padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel2);
}
.jd-more > summary::-webkit-details-marker { display: none; }
.jd-more > summary em { font-style: normal; background: var(--brand); color: var(--on-brand); border-radius: 9px; font-size: 11px; padding: 2px 6px; }
.jd-fl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
@media (min-width: 760px) {
  .jd-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; }
  .jd-more > summary { display: none; }
  .jd-fl { margin-top: 0; }
  .jd-info { flex: 1 0 100%; }
}
.jd-info { font-size: 12.5px; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.jd-info b { color: var(--ink); font-weight: 600; }
.jd-warn { color: var(--warn); }

.jd-btn, .jd-link {
  appearance: none; font: 600 12.5px/1 inherit; font-family: inherit; cursor: pointer; border-radius: 9px; min-height: 32px;
}
.jd-btn { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); padding: 8px 12px; }
.jd-btn:hover { background: var(--panel3); }
.jd-btn.ghost { background: transparent; color: var(--ink3); }
.jd-link { background: none; border: 0; color: var(--brand); padding: 0 4px; min-height: 0; text-decoration: underline; text-underline-offset: 2px; }

/* ── the figures ─────────────────────────────────────────── */

.jd-kg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Four across when the tiles' own box is wide enough (a container query: on a wide screen the tiles sit
   in half the page, beside the equity curve, and are as narrow as on a tablet). */
.jd-tiles { container-type: inline-size; }
@container (min-width: 520px) { .jd-kg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@container (min-width: 1400px) { .jd-kg { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* A wide screen: the filters across the top, then the figures and what stands out on the left with the
   equity curve beside them, instead of the curve alone across the whole width. */
@media (min-width: 1500px) {
  #jd-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px 18px; align-items: stretch; }
  #jd-a > * { min-width: 0; }
  #jd-a > .jd-bar, #jd-a > .jd-sk, #jd-a > .jd-none { grid-column: 1 / -1; }
  #jd-a > .jd-tiles, #jd-a > .jd-ins { grid-column: 1; }
  #jd-a > #jd-equity { grid-column: 2; grid-row: 2 / span 2; }
}
.jd-k { padding: 13px 15px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jd-kl { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.jd-kv { font: 600 25px/1.15 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 1000px) { .jd-kv { font-size: 27px; } }
.jd-ks { font-size: 12px; color: var(--ink3); line-height: 1.4; }
.jd-mi { margin-top: 8px; }
.jd-micro { display: block; width: 100%; height: 34px; overflow: visible; }
.jd-micro-line { fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jd-micro .jd-zero { stroke-width: 1; vector-effect: non-scaling-stroke; }
.jd-dot-gain { fill: var(--jd-gain); } .jd-dot-loss { fill: var(--jd-loss); }
.jd-split { display: flex; height: 7px; gap: 2px; border-radius: 4px; overflow: hidden; }
.jd-split i { flex: 1 1 0; min-width: 2px; border-radius: 2px; }
.jd-split .w { background: var(--jd-gain); } .jd-split .l { background: var(--jd-loss); } .jd-split .z { background: var(--ink3); opacity: .5; }
.jd-split .f { background: var(--jd-good); } .jd-split .b { background: var(--jd-bad); }
.jd-days { position: relative; height: 34px; }
.jd-days::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.jd-days i { position: absolute; border-radius: 2px; }
.jd-days .w { background: var(--jd-gain); } .jd-days .l { background: var(--jd-loss); } .jd-days .z { background: var(--ink3); height: 2px !important; }
.jd-kd { display: flex; gap: 6px; align-items: baseline; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line2); font-size: 11.5px; color: var(--ink3); line-height: 1.35; }
.jd-kd .ar { font-size: 9px; color: var(--ink2); }

/* ── what stands out ─────────────────────────────────────── */

.jd-ins { padding: 14px 16px; }
.jd-ih h3 { font-size: 15px; letter-spacing: -.01em; }
.jd-ih p { font-size: 12.5px; color: var(--ink3); margin-top: 1px; }
.jd-ig { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 760px) { .jd-ig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jd-i { display: flex; flex-direction: column; gap: 3px; background: var(--panel2); border: 1px solid var(--line2); border-left: 3px solid var(--jd-neu); border-radius: 10px; padding: 9px 12px; }
.jd-i .kk { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jd-neu); }
.jd-i .tx { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.jd-ins > .jd-link { margin-top: 10px; font-size: 12.5px; }

/* ── a panel ─────────────────────────────────────────────── */

.jd-p { padding: 16px 16px 14px; min-width: 0; }
@media (min-width: 700px) { .jd-p { padding: 18px 20px 16px; } }
.jd-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.jd-pt { min-width: 0; }
.jd-pt h3 { font-size: 15px; letter-spacing: -.01em; }
.jd-ps { font-size: 12.5px; color: var(--ink3); margin-top: 2px; line-height: 1.4; }
.jd-ps:empty { display: none; }
.jd-tg {
  appearance: none; flex: none; cursor: pointer; font: 600 11.5px/1 inherit; font-family: inherit; color: var(--ink3);
  background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-height: 30px;
}
.jd-tg:hover { color: var(--ink); background: var(--panel2); }
.jd-tg[aria-pressed="true"] { color: var(--ink); background: var(--panel3); }

.jd-pc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 8px; }
.jd-c { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.jd-cl { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.jd-c .jd-seg button { padding: 6px 10px; min-height: 28px; font-size: 12px; }
.jd-c .jd-sel { min-height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: 12.5px; }
.jd-nav { gap: 4px; }
.jd-nav button { appearance: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; }
.jd-nav button:disabled { opacity: .35; cursor: default; }
.jd-nav .ml { font-weight: 600; font-size: 13px; min-width: 72px; text-align: center; }
@media (max-width: 600px) {
  /* label over its control, so two short controls share a line */
  .jd-pc { gap: 10px 14px; }
  .jd-c { flex-direction: column; align-items: flex-start; gap: 4px; }
  .jd-c.jd-nav { flex-direction: row; align-items: center; gap: 4px; align-self: flex-end; }
  .jd-seg button { min-height: 36px; }
  .jd-c .jd-seg button { min-height: 32px; }
  .jd-tg { min-height: 34px; }
}

.jd-pb { margin-top: 6px; min-width: 0; }
.jd-pf { margin-top: 8px; }
.jd-lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--ink3); }
.jd-lg > span { display: inline-flex; align-items: center; gap: 6px; }
.jd-lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.jd-lg i.ln { height: 3px; width: 14px; border-radius: 2px; }
.jd-lg i.dash { background: none !important; height: 0; width: 16px; border-radius: 0; border-top: 2px dashed var(--ink2); }
.jd-note { font-size: 12px; color: var(--ink3); margin-top: 8px; line-height: 1.45; }
.jd-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 14px; color: var(--ink3); font-size: 13px; }
.jd-empty strong { color: var(--ink2); font-size: 14px; }
.jd-empty .jd-btn { margin-top: 6px; }

/* ── chart drawing ───────────────────────────────────────── */

.jd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.jd-t { fill: var(--ink3); font: 10.5px 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.jd-tag { opacity: .85; }
.jd-vl { fill: var(--ink2); }
.jd-avgl { fill: var(--ink2); }
.jd-grid { stroke: var(--line2); stroke-width: 1; }
.jd-grid.v { stroke-dasharray: 2 5; }
.jd-zero { stroke: var(--ink3); stroke-width: 1; opacity: .6; }
.jd-tick { stroke: var(--line); }
.jd-avg { stroke: var(--ink2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.jd-med { stroke: var(--ink3); stroke-width: 1.4; stroke-dasharray: 1.5 3; }
.jd-band { fill: var(--jd-loss); opacity: .1; }
.jd-area-gain { fill: var(--jd-gain); fill-opacity: .16; }
.jd-area-loss { fill: var(--jd-loss); fill-opacity: .16; }
.jd-line-gain, .jd-line-loss, .jd-line-neu { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jd-line-gain { stroke: var(--jd-gain); } .jd-line-loss { stroke: var(--jd-loss); } .jd-line-neu { stroke: var(--jd-neu); }
.jd-m-gain { fill: var(--jd-gain); } .jd-m-loss { fill: var(--jd-loss); } .jd-m-neutral { fill: var(--jd-neu); }
.jd-m-follow { fill: var(--jd-good); } .jd-m-broke { fill: var(--jd-bad); }
.jd-line-plan { fill: none; stroke: var(--jd-good); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; stroke-linecap: round; }
.jd-plmark-f { fill: var(--jd-good); stroke: var(--panel); stroke-width: 1; } .jd-plmark-b { fill: var(--jd-bad); stroke: var(--panel); stroke-width: 1.2; }
.jd-pt.jd-plring-f { fill: var(--jd-good); } .jd-pt.jd-plring-b { fill: var(--jd-bad); }
/* the plan, on a calendar day: a dot in the corner — blue all followed, amber some broke, half and half when both */
.jd-pl { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--panel); z-index: 1; }
.jd-pl.f { background: var(--jd-good); } .jd-pl.b { background: var(--jd-bad); }
.jd-pl.m { background: linear-gradient(90deg, var(--jd-good) 50%, var(--jd-bad) 50%); }
/* the plan, as a strip under a bar, and on a ranked trade */
.jd-ex .pl { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; color: #0B1011; }
.jd-ex .pl.f { background: var(--jd-good); } .jd-ex .pl.b { background: var(--jd-bad); }
.jd-hr .br.plan { background: var(--jd-good); }
.jd-cd.plan, .jd-hc.plan { --c: var(--jd-good); }
.jd-pt { fill-opacity: .72; stroke: var(--panel); stroke-width: 1; }
.jd-ring { fill: none; stroke: var(--ink); stroke-width: 1.6; pointer-events: none; }
.jd-hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.jd-crossline { stroke: var(--ink3); stroke-dasharray: 3 3; pointer-events: none; }
.jd-cross { pointer-events: none; }
.jd-dot { fill: var(--jd-gain); stroke: var(--panel); stroke-width: 2; pointer-events: none; }
.jd-dot.loss { fill: var(--jd-loss); } .jd-dot.neu { fill: var(--jd-neu); }

.jd-tip {
  position: fixed; z-index: 1000; pointer-events: none; max-width: 270px;
  background: var(--panel3); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px; font-size: 12px; line-height: 1.4; box-shadow: 0 10px 30px -8px rgba(0,0,0,.5);
}
.jd-tip-t { font-weight: 600; margin-bottom: 4px; }
.jd-tip-r { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.jd-tip-r i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.jd-tip-r i.ln { height: 3px; width: 12px; }
.jd-tip-r i.none { background: transparent; width: 0; margin-left: -7px; }
.jd-tip-r .k { color: var(--ink2); }
.jd-tip-r .v { margin-left: auto; padding-left: 14px; font: 600 12px 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

/* ── calendar ────────────────────────────────────────────── */

.jd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 4px; }
.jd-ch { font-size: 10.5px; font-weight: 600; color: var(--ink3); text-align: center; text-transform: uppercase; letter-spacing: .05em; padding: 2px 0 3px; }
.jd-cd {
  position: relative; isolation: isolate; overflow: hidden; background: var(--panel2); border-radius: 8px;
  min-height: 52px; padding: 4px 5px 5px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0;
}
.jd-cd.out { background: transparent; }
.jd-cd.wk { background: var(--panel3); }
.jd-cd .dn { font-size: 10px; color: var(--ink3); line-height: 1; }
.jd-cd .dv { font: 600 12px/1.15 'JetBrains Mono', ui-monospace, Menlo, monospace; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.jd-cd .dc { font-size: 9.5px; color: var(--ink3); text-align: center; line-height: 1; white-space: nowrap; }
.jd-cd.wk .dv { margin-top: auto; }
.jd-cd.has:not(.wk) { cursor: default; }
.jd-cd.has:not(.wk):hover, .jd-cd.has:not(.wk):focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink2); }
.jd-cd.gain, .jd-hc.gain { --c: var(--jd-gain); }
.jd-cd.loss, .jd-hc.loss { --c: var(--jd-loss); }
.jd-cd.neu, .jd-hc.neu { --c: var(--jd-neu); }
.jd-cd.flat, .jd-hc.flat { --c: var(--ink3); --a: .25; }
.jd-cd.has:not(.wk)::before, .jd-hc::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c, transparent); opacity: var(--a, 0); }
.jd-cd.strong .dn, .jd-cd.strong .dv, .jd-cd.strong .dc, .jd-hc.strong { color: var(--jd-on); }
.jd-calsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; font-size: 12.5px; color: var(--ink3); }
.jd-calsum b { color: var(--ink); font-size: 13.5px; }
@media (max-width: 600px) {
  .jd-cal { gap: 3px; }
  .jd-cd { min-height: 46px; padding: 3px 3px 4px; }
  .jd-cd .dc { display: none; }
  .jd-cd .dv { font-size: 10.5px; letter-spacing: -.04em; }
}

/* ── breakdown ───────────────────────────────────────────── */

.jd-hb { display: flex; flex-direction: column; gap: 2px; }
.jd-hr { display: grid; grid-template-columns: minmax(82px, 30%) minmax(0, 1fr) minmax(58px, auto); align-items: center; gap: 10px; padding: 6px 6px; border-radius: 9px; outline-offset: -2px; }
.jd-hr:hover, .jd-hr:focus-visible { background: var(--panel2); }
.jd-hr .lb { min-width: 0; }
.jd-hr .nm { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-hr .sm { display: block; font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-hr .tk { position: relative; height: 16px; border-radius: 5px; background: var(--panel2); }
.jd-hr:hover .tk, .jd-hr:focus-visible .tk { background: var(--panel3); }
.jd-hr .br { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.jd-hr .br.gain { background: var(--jd-gain); } .jd-hr .br.loss { background: var(--jd-loss); } .jd-hr .br.neu { background: var(--jd-neu); }
.jd-hr .zl { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink3); opacity: .7; }
.jd-hr .vl { font: 600 12.5px 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.jd-hr.thin .br { opacity: .4; background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.28) 4px 6px); }
.jd-hr.thin .nm { color: var(--ink2); }

/* ── when you trade ──────────────────────────────────────── */

.jd-heat { display: grid; grid-template-columns: 34px repeat(var(--cols, 12), minmax(0, 1fr)); gap: 3px; align-items: center; }
.jd-heat .hh { font: 10px 'JetBrains Mono', ui-monospace, Menlo, monospace; color: var(--ink3); }
.jd-heat .dh { font-size: 11px; color: var(--ink3); }
.jd-hc {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 5px; background: var(--panel2);
  height: 30px; min-width: 0; display: flex; align-items: center; justify-content: center;
  font: 600 10px 'JetBrains Mono', ui-monospace, Menlo, monospace; color: var(--ink); letter-spacing: -.04em;
}
@media (min-width: 760px) { .jd-hc { height: 34px; } }
.jd-hc:focus-visible, .jd-hc:hover { box-shadow: inset 0 0 0 1.5px var(--ink2); }
.jd-scale { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--ink3); font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.jd-scale .bar { display: block; width: 150px; max-width: 40%; height: 8px; border-radius: 4px; }
.jd-scale .bar.div { background: linear-gradient(90deg, var(--jd-loss), var(--panel2) 50%, var(--jd-gain)); }
.jd-scale .bar.seq { background: linear-gradient(90deg, var(--panel2), var(--jd-neu)); }

/* ── plan discipline ─────────────────────────────────────── */

.jd-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jd-cc { border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px; padding: 11px 13px; background: var(--panel2); min-width: 0; }
.jd-cc.f { border-left-color: var(--jd-good); } .jd-cc.b { border-left-color: var(--jd-bad); }
.jd-cl2 { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.jd-cv { font: 600 22px/1.2 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 3px 0 1px; overflow-wrap: anywhere; }
.jd-cs { font-size: 11.5px; color: var(--ink3); line-height: 1.4; }
.jd-sub { margin-top: 18px; }
.jd-sh { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }

/* ── best and worst ──────────────────────────────────────── */

.jd-ex { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 520px) { .jd-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.jd-exc ol { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.jd-exc a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; padding: 7px 11px 8px; border-radius: 10px;
  background: var(--panel2); color: var(--ink); text-decoration: none; border: 1px solid transparent;
}
.jd-exc a:hover, .jd-exc a:focus-visible { border-color: var(--line); background: var(--panel3); }
.jd-exc .sy { font-weight: 600; font-size: 13px; }
.jd-exc .sd { font-size: 11px; color: var(--ink3); grid-column: 1; }
.jd-exc .vl { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 600 13px 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.jd-exc .br { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; margin-top: 5px; }
.jd-exc .br.gain { background: var(--jd-gain); } .jd-exc .br.loss { background: var(--jd-loss); }

/* ── the numbers behind it ───────────────────────────────── */

.jd-nums { column-count: 1; column-gap: 28px; }
@media (min-width: 560px) { .jd-nums { column-count: 2; } }
.jd-ng { break-inside: avoid; margin: 0 0 16px; }
.jd-ng h4 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); margin-bottom: 4px; }
.jd-ng > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line2); }
.jd-ng dt { font-size: 13px; color: var(--ink2); }
.jd-ng dd { font: 600 12.5px 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.jd-ng dd a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }

/* ── the table twin ──────────────────────────────────────── */

.jd-tw { max-height: 380px; overflow: auto; border: 1px solid var(--line2); border-radius: 10px; }
.jd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.jd-table th, .jd-table td { padding: 7px 10px; text-align: left; white-space: nowrap; }
.jd-table thead th { position: sticky; top: 0; background: var(--panel2); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); z-index: 1; }
.jd-table tbody th { font-weight: 600; }
.jd-table tbody tr:nth-child(even) { background: var(--panel2); }
.jd-table td.n, .jd-table th.n { text-align: right; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.jd-table tfoot th, .jd-table tfoot td { border-top: 1px solid var(--line); font-weight: 600; }
.jd-table a { color: var(--brand); }

/* ── loading, empty, failed ──────────────────────────────── */

.jd-sk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .jd-sk { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.jd-sk i { height: 104px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(100deg, var(--panel) 30%, var(--panel2) 50%, var(--panel) 70%); background-size: 220% 100%; animation: jdsk 1.5s ease-in-out infinite; }
@keyframes jdsk { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .jd-sk i { animation: none; } }
.jd-none { padding: 30px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.jd-none .mk { font-size: 26px; color: var(--line); }
.jd-none strong { font-size: 15px; }
.jd-none p { max-width: 460px; font-size: 13.5px; color: var(--ink3); margin: 0; }
.jd-none .jr-btn { margin-top: 6px; }