/* assets/css/tj-figures.css - the three "what you get back" figures.
 *
 * The homepage, the public Trade Journal page and the journal's own empty
 * state all show the same three pictures. The numbers behind them already
 * come from one place (includes/tj_sample.php); this is the other half, so
 * the drawing cannot drift from itself either. It had already been copied
 * twice by hand before this file existed.
 *
 * Markup comes from includes/tj-figures.php. Prefixed tjf- so nothing on any
 * host page borrows a rule by sharing a name.
 *
 * Built to sit on a near-black section. Every colour here is an explicit rgba
 * over dark rather than a theme token, because the host sections set their own
 * backgrounds and these would otherwise go invisible the moment one of them
 * changed.
 */

.tjf-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:700px)  { .tjf-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .tjf-grid { grid-template-columns:repeat(3,1fr); } }

.tjf-fig {
  margin:0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .18s ease, transform .18s ease;
}
.tjf-fig:hover { border-color:rgba(255,255,255,.22); transform:translateY(-3px); }
.tjf-fig figcaption { order:2; margin-top:auto; padding-top:4px; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.5); }
.tjf-fig figcaption strong { display:block; font-size:14.5px; color:#fff; font-weight:700; margin-bottom:4px; }
.tjf-fig svg { display:block; width:100%; height:auto; }

.tjf-legend { display:flex; gap:14px; font-size:11.5px; color:rgba(255,255,255,.55); }
.tjf-legend .sw { display:inline-block; width:13px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.tjf-legend .sw.gross { background:rgba(255,255,255,.55); }
.tjf-legend .sw.net { background:#4FD6A4; }
.tjf-legend b { color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }

/* Calendar: five weekday columns, because the market is shut on the others. */
.tjf-cal { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.tjf-cal .d { font-size:9.5px; font-weight:800; letter-spacing:.06em; color:rgba(255,255,255,.3); text-align:center; }
.tjf-cal .c {
  aspect-ratio:1; border-radius:5px; background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  font-size:clamp(8.5px,1.05vw,10.5px); font-weight:800; letter-spacing:-.2px;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.9);
}
.tjf-cal .up1 { background:rgba(79,214,164,.26); color:#9BEBCD; }
.tjf-cal .up2 { background:rgba(79,214,164,.58); color:#06241A; }
.tjf-cal .dn1 { background:rgba(232,69,60,.26); color:#F7B5B0; }
.tjf-cal .dn2 { background:rgba(232,69,60,.58); color:#2A0906; }

/* Diverging bars around a centre line. */
.tjf-bars { display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:center; }
.tjf-bars .b-l { font-size:11.5px; color:rgba(255,255,255,.62); white-space:nowrap; }
.tjf-bars .b-t { position:relative; height:11px; background:rgba(255,255,255,.05); border-radius:3px; }
.tjf-bars .b-t u { position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:rgba(255,255,255,.18); }
.tjf-bars .b-t i { position:absolute; top:0; bottom:0; border-radius:2px; width:var(--bw); }
.tjf-bars .b-t i.up { left:50%; background:#4FD6A4; }
.tjf-bars .b-t i.down { right:50%; background:#E8453C; }

/* ── The figures animate themselves in ────────────────────────────────────
   The resting states live under .anim, which only the script adds. With
   scripting off, or when the reader has asked for less motion, none of this
   applies and the three figures are simply already drawn. Hiding them by
   default and relying on JavaScript to reveal them would mean a blank panel
   for anyone it failed for.

   The motion is not decoration: the two lines draw so the gap between them is
   seen opening, the calendar fills a day at a time, and the bars grow out of
   the centre line they are measured from. */
.tjf-grid.anim .tjf-draw { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.tjf-grid.anim .tjf-gap { opacity:0; }
.tjf-grid.anim .tjf-cal .c { transform:scale(.55); opacity:0; }
.tjf-grid.anim .tjf-bars .b-t i { width:0; }

.tjf-grid.anim.on .tjf-draw { transition:stroke-dashoffset 1.1s cubic-bezier(.3,.9,.3,1); stroke-dashoffset:0; }
.tjf-grid.anim.on .tjf-draw.lag { transition-delay:.18s; }
.tjf-grid.anim.on .tjf-gap { transition:opacity .7s ease .75s; opacity:1; }
.tjf-grid.anim.on .tjf-cal .c {
  transition:transform .42s cubic-bezier(.2,1.3,.4,1), opacity .42s ease;
  transform:scale(1); opacity:1;
}
.tjf-grid.anim.on .tjf-bars .b-t i { transition:width .75s cubic-bezier(.3,.9,.3,1); width:var(--bw); }

@media (prefers-reduced-motion:reduce) {
  .tjf-fig:hover { transform:none; }
}