/* ====================================================================
   Journey player — 9 connected steps with a live scene per step.
   Uses the palette tokens defined in features-palette.css / redesign.css.
   ==================================================================== */

.jr {
  --dur: 5200ms;
  display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: stretch;
  max-width: 1120px; margin: 8px auto 0; font-family: Heebo, system-ui, sans-serif; color: var(--ink);
}
.jr [data-mod="home"] { --mc: var(--m-home); --mt: var(--m-home-t); }
.jr [data-mod="biz"]  { --mc: var(--m-biz);  --mt: var(--m-biz-t); }
.jr [data-mod="fin"]  { --mc: var(--m-fin);  --mt: var(--m-fin-t); }
.jr [data-mod="team"] { --mc: var(--m-team); --mt: var(--m-team-t); }
.jr [data-mod="docs"] { --mc: var(--m-docs); --mt: var(--m-docs-t); }
.jr [data-mod="ai"]   { --mc: var(--m-ai);   --mt: var(--m-ai-t); }
.jr .m-home { background: var(--m-home); } .jr .m-biz { background: var(--m-biz); } .jr .m-fin { background: var(--m-fin); }
.jr .m-team { background: var(--m-team); } .jr .m-docs { background: var(--m-docs); } .jr .m-ai { background: var(--m-ai); }

/* ---- step list ---- */
.jr-steps { display: flex; flex-direction: column; gap: 6px; position: relative; }
.jr-steps::before { content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 26px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 5px, transparent 5px 10px); }
.jr-step {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: start; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 7px 10px; cursor: pointer; font: inherit; color: inherit;
  overflow: hidden; transition: background .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) { .jr-step:hover { background: rgba(255, 255, 255, .7); } }
.jr-n {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--mc);
}
.jr-step.done .jr-n { background: var(--mc); box-shadow: none; }
.jr-txt { display: grid; line-height: 1.25; }
.jr-t { font-weight: 700; font-size: 15px; }
.jr-sub { font-size: 12px; color: var(--muted); }
.jr-step[aria-selected="true"] { background: #fff; border-color: var(--ink); box-shadow: 0 10px 24px -16px rgba(20, 33, 39, .45); }
.jr-step[aria-selected="true"] .jr-n { background: var(--mc); box-shadow: none; }
.jr-prog { position: absolute; inset-inline: 0; bottom: 0; height: 3px; }
.jr-prog i { display: block; height: 100%; width: 0; background: var(--mc); }
.jr-step[aria-selected="true"] .jr-prog i { width: var(--p, 0%); }

/* ---- window ---- */
.jr-win { background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-height: 470px;
  box-shadow: 0 40px 80px -36px rgba(20, 33, 39, .5), 0 0 0 1px rgba(20, 33, 39, .08); }
.jr-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line2); }
.jr-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--mc); flex-shrink: 0; transition: background .3s; }
.jr-ico.sm { width: 20px; height: 20px; border-radius: 6px; }
.jr-title { font-size: 14px; }
.jr-sp { flex: 1; }
.jr-thread { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; background: var(--page); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px; }
.jr-client::before { content: "תיק לקוח: "; font-weight: 500; color: var(--muted); }
.jr-dots { display: flex; gap: 3px; }
.jr-dots i { width: 7px; height: 7px; border-radius: 2px; background: var(--line); transition: background .3s; }
.jr-dots i.on { background: var(--ink); }
.jr-play { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 11px; cursor: pointer; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .jr-play:hover { border-color: var(--ink); } }

.jr-body { position: relative; flex: 1; background: var(--page); padding: 20px; }
.jr-scene { display: none; }
.jr-scene.is-on { display: block; animation: jrIn .35s ease both; }
@keyframes jrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* staggered pieces inside the active scene */
.jr-scene.is-on .jr-a { animation: jrUp .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.jr-scene.is-on .jr-pop { animation-name: jrPop; }
@keyframes jrUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes jrPop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }

.jr-cap { margin: 16px 0 0; font-size: 14.5px; color: #33404a; text-align: center; }
.jr-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #efe9df; color: var(--ink); }
.jr .av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--ink); }
.jr-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 2px; }

/* kanban */
.jr-kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jr-col { background: #f1ece3; border-radius: 12px; padding: 9px; }
.jr-col h5 { margin: 0 0 8px; font-size: 12.5px; }
.jr-card { background: #fff; border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; font-size: 13px; box-shadow: 0 1px 2px rgba(20, 33, 39, .08); }
.jr-card b { display: block; }
.jr-card small { color: var(--muted); font-size: 11.5px; }
.jr-new { box-shadow: 0 0 0 2px var(--ink), 0 14px 28px -14px rgba(20, 33, 39, .5); }
.jr-bar-mini { flex: 1; height: 5px; background: #efe9df; border-radius: 99px; overflow: hidden; }
.jr-bar-mini i { display: block; height: 100%; background: var(--cur, var(--m-team)); }

/* documents */
.jr-doc, .jr-sign { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
.jr-paper { background: #fff; border: 1px solid var(--line2); border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(20, 33, 39, .06); }
.jr-paper > b { display: block; margin-bottom: 10px; font-size: 14px; }
.jr-paper > i { display: block; height: 7px; border-radius: 4px; background: #efe9df; margin: 8px 0; }
.jr-sum { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line2); display: flex; justify-content: space-between; font-size: 14px; }
.jr-vers, .jr-audit, .jr-moved { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jr-vers li, .jr-audit li { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line2); border-radius: 10px; padding: 9px 10px; font-size: 13px; }
.jr-vers li.on { border-color: var(--ink); }

/* deal */
.jr-deal { display: grid; justify-items: center; gap: 16px; padding-top: 18px; }
.jr-deal-card { width: min(380px, 100%); background: #fff; border-radius: 16px; padding: 18px; display: grid; gap: 8px; box-shadow: 0 0 0 2px var(--ink), 0 20px 40px -20px rgba(20, 33, 39, .45); }
.jr-deal-card b { font-size: 18px; }
.jr-amt { font-size: 30px; font-weight: 800; }
.jr-status { position: relative; height: 28px; }
.jr-status span { position: absolute; inset-inline-start: 0; top: 0; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.jr-s1 { background: #efe9df; }
.jr-s2 { background: var(--m-fin); }
.jr-scene.is-on .jr-s1 { animation: jrOut .25s ease .6s forwards; }
@keyframes jrOut { to { opacity: 0; transform: translateY(-6px); } }
.jr-toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 14px; padding: 11px 16px; font-size: 13.5px; }
.jr-toast small { display: block; color: #c9d2dc; }

/* project */
.jr-ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line2); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.jr-ptabs span { padding: 8px 11px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 2.5px solid transparent; }
.jr-ptabs span.on { color: var(--ink); border-bottom-color: var(--ink); }
.jr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.jr-stats span { background: #fff; border: 1px solid var(--line2); border-radius: 12px; padding: 12px; }
.jr-stats small { display: block; font-size: 12px; color: var(--muted); }
.jr-stats b { font-size: 20px; }
.jr-moved li { background: var(--m-biz-t); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; }

/* AI chat */
.jr-chat { display: grid; gap: 12px; }
.jr-msg { max-width: 82%; border-radius: 16px; padding: 12px 14px; font-size: 14px; }
.jr-msg.me { justify-self: start; background: #fff; border: 1px solid var(--line2); border-start-start-radius: 4px; }
.jr-msg.ai { justify-self: end; width: 82%; background: var(--m-ai-t); border-start-end-radius: 4px; }
.jr-msg.ai b { display: block; margin-bottom: 8px; }
.jr-type { display: block; height: 7px; border-radius: 4px; background: rgba(20, 33, 39, .22); margin: 8px 0; width: 0; }
.jr-scene.is-on .jr-type { animation: jrType .5s ease-out both; animation-delay: var(--d); }
@keyframes jrType { from { width: 0; } to { width: var(--w); } }
.jr-file { justify-self: end; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line2); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; }

/* signature */
.jr-sigbox { margin-top: 14px; border: 1.5px dashed var(--brand); border-radius: 10px; padding: 6px 10px; background: rgba(10, 124, 255, .04); }
.jr-sigbox svg { width: 100%; height: 50px; display: block; }
.jr-sigbox small { font-size: 11.5px; color: var(--muted); }
.jr-sigpath { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; }
.jr-scene.is-on .jr-sigpath { animation: jrDraw 1.1s ease-in-out .9s forwards; }
@keyframes jrDraw { to { stroke-dashoffset: 0; } }

/* invoice */
.jr-inv { background: #fff; border: 1px solid var(--line2); border-radius: 14px; padding: 16px 18px; max-width: 520px; margin: 0 auto; }
.jr-inv-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; }
.jr-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.jr-line.tot { border-bottom: 0; font-size: 16px; font-weight: 800; }
.jr-alloc { margin-top: 10px; background: var(--m-fin-t); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 700; }

/* P&L */
.jr-pnl { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: end; }
.jr-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; height: 250px; background: #fff; border: 1px solid var(--line2); border-radius: 14px; padding: 16px 16px 12px; }
.jr-bars > div { display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; font-size: 12.5px; }
.jr-bars small { color: var(--muted); margin-top: 6px; }
.jr-grow { align-self: end; justify-self: center; width: 70%; border-radius: 8px 8px 3px 3px; height: 0; }
.jr-scene.is-on .jr-grow { animation: jrGrow .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); }
@keyframes jrGrow { from { height: 0; } to { height: var(--h); } }
.jr-profit { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 0 0 2px var(--ink); display: grid; gap: 4px; justify-items: start; }
.jr-profit small { color: var(--muted); }
.jr-profit b { font-size: 32px; }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .jr { grid-template-columns: 1fr; }
  .jr-steps { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  .jr-steps::before { display: none; }
  .jr-step { flex-shrink: 0; width: auto; padding: 6px 12px 8px 8px; background: #fff; border-color: var(--line2); }
  .jr-sub { display: none; }
  .jr-win { min-height: 440px; }
}
@media (max-width: 600px) {
  .jr-thread .jr-dots, .jr-client::before { display: none; }
  .jr-body { padding: 14px; }
  .jr-kb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-kb .jr-col:nth-child(3) { display: none; }
  .jr-doc, .jr-sign, .jr-pnl { grid-template-columns: 1fr; }
  .jr-bars { height: 190px; }
  .jr-msg, .jr-msg.ai { max-width: 100%; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-scene.is-on, .jr-scene.is-on .jr-a, .jr-scene.is-on .jr-type, .jr-scene.is-on .jr-grow { animation: none; }
  .jr-type { width: var(--w); }
  .jr-grow { height: var(--h); }
  .jr-sigpath { stroke-dashoffset: 0; }
}
.jr-chip, .jr-thread { white-space: nowrap; }
.jr-row { flex-wrap: wrap; }
.jr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-bar .jr-sp { min-width: 4px; }

/* ================= palette enrichment ================= */
.jr[data-mod="home"] { --cur: var(--m-home); --cur-t: var(--m-home-t); }
.jr[data-mod="biz"]  { --cur: var(--m-biz);  --cur-t: var(--m-biz-t); }
.jr[data-mod="fin"]  { --cur: var(--m-fin);  --cur-t: var(--m-fin-t); }
.jr[data-mod="team"] { --cur: var(--m-team); --cur-t: var(--m-team-t); }
.jr[data-mod="docs"] { --cur: var(--m-docs); --cur-t: var(--m-docs-t); }
.jr[data-mod="ai"]   { --cur: var(--m-ai);   --cur-t: var(--m-ai-t); }

/* the window takes the colour of the current step */
.jr-win { border-top: 5px solid var(--cur, var(--m-biz)); transition: border-color .4s, box-shadow .4s;
  box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--cur, var(--m-biz)) 75%, #142127), 0 0 0 1px rgba(20, 33, 39, .08); }
.jr-body { background-color: color-mix(in srgb, var(--cur-t, var(--m-biz-t)) 42%, var(--page)); transition: background-color .45s; }
.jr-body::before { content: ""; position: absolute; inset-inline-end: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: var(--cur-t, var(--m-biz-t)); filter: blur(40px); opacity: .9; pointer-events: none; transition: background .45s; }
.jr-body > * { position: relative; }
.jr-bar .jr-ico { box-shadow: inset 0 0 0 1px rgba(20, 33, 39, .08); }

/* steps: rainbow rail + tinted active row */
.jr-steps::before { background: linear-gradient(to bottom, var(--m-biz), var(--m-docs), var(--m-home), var(--m-biz), var(--m-team), var(--m-ai), var(--m-docs), var(--m-fin)); width: 3px; border-radius: 3px; opacity: .55; }
.jr-step[aria-selected="true"] { background: var(--mt); }
.jr-step.done .jr-n::after { content: "✓"; position: absolute; font-size: 9px; inset-inline-end: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.jr-dots i.on[data-mod] { background: var(--mc); box-shadow: inset 0 0 0 1px rgba(20, 33, 39, .15); }
.jr-dots i { width: 8px; height: 8px; }

/* scene details */
.jr-col h5 { display: flex; align-items: center; gap: 6px; }
.jr-col h5 i { width: 10px; height: 10px; border-radius: 3px; }
.jr-lbl { display: inline-block; width: 28px; height: 6px; border-radius: 99px; margin: 0 0 6px 4px; }
.jr-cover { display: block; height: 22px; margin: -9px -10px 8px; border-radius: 10px 10px 0 0; }
.jr-top { border-top: 4px solid var(--mc); }
.jr-sq { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-inline-end: 6px; vertical-align: -2px; }
.jr-stats span { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0; }
.jr-stats span b { grid-column: 1 / -1; }
.jr-src { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 7px; }
.jr-sugg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.jr-sugg span { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--ink); }
.jr-moved li:nth-child(1) { background: var(--m-fin-t); }
.jr-moved li:nth-child(2) { background: var(--m-team-t); }
.jr-moved li:nth-child(3) { background: var(--m-docs-t); }
.jr-profit { box-shadow: 0 0 0 2px var(--ink), 8px 8px 0 var(--m-fin); }
.jr-deal-card { box-shadow: 0 0 0 2px var(--ink), 8px 8px 0 var(--m-home); }

/* deal-won confetti */
.jr-deal { position: relative; }
.jr-confetti { position: absolute; inset: 0; pointer-events: none; }
.jr-confetti i { position: absolute; top: 90px; left: 50%; width: 10px; height: 10px; border-radius: 3px; opacity: 0; }
.jr-scene.is-on .jr-confetti i { animation: jrBurst 1.1s cubic-bezier(.15, .8, .3, 1) .65s both; }
.jr-confetti i:nth-child(1)  { --x: -190px; --y: -70px;  --r: 120deg; }
.jr-confetti i:nth-child(2)  { --x: -150px; --y: 40px;   --r: -80deg; }
.jr-confetti i:nth-child(3)  { --x: -100px; --y: -95px;  --r: 200deg; }
.jr-confetti i:nth-child(4)  { --x: -210px; --y: -10px;  --r: 60deg; }
.jr-confetti i:nth-child(5)  { --x: 170px;  --y: -80px;  --r: -140deg; }
.jr-confetti i:nth-child(6)  { --x: 140px;  --y: 50px;   --r: 90deg; }
.jr-confetti i:nth-child(7)  { --x: 205px;  --y: 0px;    --r: 170deg; }
.jr-confetti i:nth-child(8)  { --x: 95px;   --y: -100px; --r: -60deg; }
.jr-confetti i:nth-child(9)  { --x: -60px;  --y: 70px;   --r: 45deg; }
.jr-confetti i:nth-child(10) { --x: 60px;   --y: 75px;   --r: -200deg; }
@keyframes jrBurst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .jr-confetti { display: none; } .jr-win, .jr-body { transition: none; } }

/* honey is ~1.1:1 on white — give it a hairline wherever it is the only edge */
.jr [data-mod="home"] .jr-n, .jr-step[data-mod="home"] .jr-n { box-shadow: inset 0 0 0 1.5px #d8cf2a; }
.jr-step[data-mod="home"][aria-selected="true"] .jr-n, .jr-step[data-mod="home"].done .jr-n { box-shadow: inset 0 0 0 1px rgba(20, 33, 39, .2); }
.jr[data-mod="home"] .jr-win { border-top-color: #f2e94a; box-shadow: 0 40px 80px -36px rgba(20, 33, 39, .45), 0 0 0 1px rgba(20, 33, 39, .08); }
.jr .m-home { box-shadow: inset 0 0 0 1px rgba(20, 33, 39, .14); }

/* ================= rich palette (decorative, not module-bound) ================= */
.jr { --p1: var(--m-biz); --p2: var(--m-fin); --p3: var(--m-home); --p4: var(--m-docs); --p5: var(--m-team); --p6: var(--m-ai);
      --t1: var(--m-biz-t); --t2: var(--m-fin-t); --t3: var(--m-home-t); --t4: var(--m-docs-t); --t5: var(--m-team-t); --t6: var(--m-ai-t); }

/* every step number is always a colour chip */
.jr-n { background: var(--mt); box-shadow: inset 0 0 0 1.5px var(--mc); }
.jr-step.done .jr-n, .jr-step[aria-selected="true"] .jr-n { background: var(--mc); box-shadow: none; }
.jr-step[data-mod="home"] .jr-n { box-shadow: inset 0 0 0 1px rgba(20, 33, 39, .18); }
@media (hover: hover) and (pointer: fine) { .jr-step:hover { background: var(--mt); } }
.jr-steps::before { background: linear-gradient(to bottom, var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6), var(--p2), var(--p1), var(--p4)); opacity: .7; }

/* window: a soft blend of several tints, led by the current step */
.jr-win { min-height: 0; }
.jr-body {
  display: flex; flex-direction: column; justify-content: center; min-height: 400px;
  background:
    radial-gradient(circle at 88% 8%, var(--cur-t, var(--t1)) 0 22%, transparent 55%),
    radial-gradient(circle at 8% 92%, var(--t3) 0 16%, transparent 45%),
    radial-gradient(circle at 12% 10%, var(--t6) 0 12%, transparent 40%),
    radial-gradient(circle at 92% 95%, var(--t2) 0 14%, transparent 42%),
    var(--page);
}
.jr-body::before { display: none; }

/* skeleton text lines in pastel colours */
.jr-paper > i { opacity: .75; }
.jr-paper > i:nth-of-type(6n+1) { background: var(--p1); }
.jr-paper > i:nth-of-type(6n+2) { background: var(--p2); }
.jr-paper > i:nth-of-type(6n+3) { background: var(--p4); }
.jr-paper > i:nth-of-type(6n+4) { background: var(--p5); opacity: .6; }
.jr-paper > i:nth-of-type(6n+5) { background: var(--p6); opacity: .55; }
.jr-paper > i:nth-of-type(6n+6) { background: var(--p3); }
.jr-type:nth-of-type(4n+1) { background: var(--p6); }
.jr-type:nth-of-type(4n+2) { background: var(--p1); }
.jr-type:nth-of-type(4n+3) { background: var(--p4); }
.jr-type:nth-of-type(4n+4) { background: var(--p5); }

/* rows, columns and stat boxes each take a different tint */
.jr-vers li:nth-child(1), .jr-audit li:nth-child(1) { background: var(--t4); }
.jr-vers li:nth-child(2), .jr-audit li:nth-child(2) { background: var(--t3); }
.jr-vers li:nth-child(3), .jr-audit li:nth-child(3) { background: var(--t2); }
.jr-vers li, .jr-audit li { border-color: transparent; }
.jr-vers li.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.jr-kb .jr-col:nth-child(1) { background: var(--t1); }
.jr-kb .jr-col:nth-child(2) { background: var(--t4); }
.jr-kb .jr-col:nth-child(3) { background: var(--t2); }
.jr-stats span:nth-child(1) { background: var(--t2); border-color: transparent; }
.jr-stats span:nth-child(2) { background: var(--t5); border-color: transparent; }
.jr-stats span:nth-child(3) { background: var(--t1); border-color: transparent; }
.jr-msg.me { background: var(--t3); border-color: transparent; }
.jr-line:nth-child(2) { background: linear-gradient(90deg, transparent, var(--t1)); }
.jr-line:nth-child(3) { background: linear-gradient(90deg, transparent, var(--t5)); }
.jr-line:nth-child(4) { background: linear-gradient(90deg, transparent, var(--t4)); }
.jr-line { padding-inline: 8px; border-radius: 8px; border-bottom-color: transparent; margin-bottom: 4px; }
.jr-inv-h { background: var(--t2); margin: -16px -18px 12px; padding: 12px 18px; border-radius: 14px 14px 0 0; }
.jr-inv.jr-top { border-top: 0; }
.jr-cap { display: table; margin: 16px auto 0; background: rgba(255, 255, 255, .75); border-radius: 999px; padding: 5px 14px; }
.jr-sigbox { background: var(--t4); border-color: var(--p4); }
.jr-sum { background: var(--t3); margin: 14px -16px -16px; padding: 12px 16px; border-radius: 0 0 12px 12px; border-top: 0; }
.jr-thread { background: #fff; }

/* smart quote scene */
.jr-qline { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.jr-qline span:not(.jr-qsw) { flex: 1; }
.jr-qopt { background: var(--t3); margin: 4px -8px; padding: 7px 8px; border-radius: 8px; border-bottom: 0; }
.jr-qsw { width: 26px; height: 15px; border-radius: 999px; background: #d9d2c5; position: relative; flex-shrink: 0; }
.jr-qsw i { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.jr-scene.is-on .jr-qsw { animation: jrSwBg .01s linear .95s forwards; }
.jr-scene.is-on .jr-qsw i { animation: jrSwKnob .25s ease .95s forwards; }
@keyframes jrSwBg { to { background: var(--btn); } }
@keyframes jrSwKnob { to { right: 13px; } }
.jr-qtotal { position: relative; display: inline-grid; }
.jr-qtotal span { grid-area: 1 / 1; }
.jr-q1 { opacity: 0; }
.jr-scene.is-on .jr-q0 { animation: jrOut .2s ease 1.1s forwards; }
.jr-scene.is-on .jr-q1 { animation: jrUp .3s ease 1.15s both; }
.jr-vers li:nth-child(4) { background: var(--t6); }
@media (prefers-reduced-motion: reduce) { .jr-qsw { background: var(--btn); } .jr-qsw i { right: 13px; } .jr-q0 { display: none; } .jr-q1 { opacity: 1; } }
.jr-stars { color: var(--m-team); letter-spacing: 2px; font-size: 15px; }