/* Vibrozz 2 — Тренажёр (2.5–2.6.1), see pages/trainer.js. The chart is the stage: the hidden future is hatched with a «?»,
   the trade is two zones over it, the result lands in the controls row as a big R. The breakdown points at the chart:
   the 50-candle band, dots and dashed levels drawn by the line under the pointer. */
.tn{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.tn-stage{padding:0;overflow:hidden;overflow:clip;position:relative}
.tn-head{display:flex;align-items:center;gap:18px;padding:18px 22px 8px}
.tn-coin{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.tn-coin .coin{width:42px;height:42px;flex:none}
.tn-coin span{min-width:0}
.tn-coin b{display:block;font-weight:700;font-size:16px;line-height:1.25}
.tn-coin small{display:block;color:var(--tx-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-q{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--acc);font-style:normal;font-weight:800;font-size:21px}
.tn-tf{flex:none}
.tn-tf.off{display:none}
.tn-dots{display:flex;gap:7px;list-style:none;margin:0;padding:0}
.tn-dots li{width:10px;height:10px;border-radius:50%;background:var(--line-2);transition:background .2s,transform .25s var(--e-pop,ease)}
.tn-dots li.win{background:var(--up)}.tn-dots li.loss{background:var(--dn)}.tn-dots li.skip{background:var(--tx-3)}
.tn-dots li.now{background:var(--acc);transform:scale(1.35);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tx) 30%,transparent)}
.tn-score{text-align:right;min-width:92px}
.tn-score span{display:block;font-size:12px;color:var(--tx-3);font-weight:600}
.tn-score b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}

/* the terminal's indicators; the row keeps its height when empty, so the chart does not jump */
.tn-tools{display:flex;align-items:center;padding:2px 22px 10px;min-width:0;min-height:44px}
.tn-tools.off{visibility:hidden}
.tn-inds{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;gap:4px}
.tn-inds>:first-child{margin-left:auto}   /* right-aligned while it fits, scrollable from the first chip when it does not */
.tn-inds::-webkit-scrollbar{display:none}
.tn-inds .chip{flex:none;height:32px;padding:0 10px;font-size:13px;display:inline-flex;align-items:center}
.tn-inds .chip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;flex:none}
.tn-inds .chip i+i{margin-left:3px}
.tn-inds .chip:not(.on) i{opacity:.45}

/* the chart */
.tn-chart{position:relative;height:clamp(300px,calc(100dvh - 360px),560px);margin:0 8px 0 16px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* with RSI / MACD panes the chart grows up to the window; the panes share the same floor */
.tn-chart.p1{height:clamp(300px,calc(100dvh - 360px),680px)}.tn-chart.p2{height:clamp(320px,calc(100dvh - 360px),780px)}.tn-chart.p3{height:clamp(340px,calc(100dvh - 360px),860px)}
.tn-chart.dragging,.tn-chart.dragging *,.tn-chart.planning.grab,.tn-chart.planning.grab *{cursor:ns-resize!important}
.tn-cv{position:absolute;inset:0}
.tn-fog{position:absolute;top:0;bottom:0;pointer-events:none;display:grid;place-items:center;border-left:1.5px dashed var(--line-2);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tx) 6%,transparent) 0 1.5px,transparent 1.5px 11px);transition:opacity .4s ease}
.tn-fog i{font-style:normal;font-weight:800;font-size:clamp(90px,12vw,160px);line-height:1;letter-spacing:-.05em;color:color-mix(in srgb,var(--tx) 8%,transparent)}
.tn-fog.gone{opacity:0}
/* the zone fills stay under the candles (the chart's canvases sit at z-index 1–2); only the labels rise over them */
.tn-zone{position:absolute;pointer-events:none;display:flex;align-items:flex-start;justify-content:flex-end;padding:6px 10px 6px 8px;box-sizing:border-box}
.tn-zone.below{align-items:flex-end}
.tn-zt{background:color-mix(in srgb,var(--up) 12%,transparent)}
.tn-zs{background:color-mix(in srgb,var(--dn) 11%,transparent)}
.tn-zone span{position:relative;z-index:3;font-size:12px;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--card);box-shadow:0 1px 4px rgba(16,24,40,.12);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tn-zone em{font-style:normal}
.tn-zt span{color:var(--up)}.tn-zs span{color:var(--dn)}
/* a zone thinner than its label: the label sits outside, on the zone's far side */
.tn-zone.thin span{position:absolute;right:10px;bottom:calc(100% + 3px)}
.tn-zone.thin.below span{top:calc(100% + 3px);bottom:auto}
.tn-chart.planning .tn-zone span{box-shadow:0 1px 4px rgba(16,24,40,.12),0 0 0 2px currentColor}
.tn-zt.hit{animation:tn-flash-up 1s ease-out}
.tn-zs.hit{animation:tn-flash-dn 1s ease-out}
@keyframes tn-flash-up{0%,40%{background:color-mix(in srgb,var(--up) 38%,transparent)}}
@keyframes tn-flash-dn{0%,40%{background:color-mix(in srgb,var(--dn) 34%,transparent)}}
/* the 50 candles before the entry (the breakdown's high / low) */
.tn-win{position:absolute;top:0;pointer-events:none;background:color-mix(in srgb,var(--link) 7%,transparent);
  border-left:1px dashed color-mix(in srgb,var(--link) 50%,transparent);border-right:1px dashed color-mix(in srgb,var(--link) 50%,transparent)}
.tn-win span{position:absolute;z-index:3;top:6px;left:6px;font-size:12px;font-weight:700;color:var(--link);background:var(--card);padding:2px 7px;border-radius:7px;white-space:nowrap;box-shadow:0 1px 4px rgba(16,24,40,.1)}

/* overlays on the chart: the intro and the end of a game */
.tn-over{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:4}
.tn-over>*{pointer-events:auto}
.tn-over.intro{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tx) 5%,transparent) 0 1.5px,transparent 1.5px 11px)}
.tn-hero{text-align:center;padding:24px}
.tn-big{display:block;font-size:clamp(130px,19vw,220px);font-weight:800;letter-spacing:-.07em;line-height:.8;color:var(--tx)}
.tn-hero p{font-size:19px;font-weight:600;line-height:1.35;color:var(--tx-2);margin-top:18px}
.tn-hero small{display:block;margin-top:16px;color:var(--tx-3);font-size:14px}
@keyframes tn-pop{from{opacity:0;transform:translateY(10px) scale(.92)}}
.tn-over.end{background:color-mix(in srgb,var(--card) 84%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tn-end{display:grid;justify-items:center;gap:16px;padding:24px;text-align:center;animation:tn-pop .5s var(--e-pop,ease) both}
.tn-end .pill .ic{margin-right:4px}
.tn-total{font-size:clamp(92px,13vw,160px);font-weight:800;letter-spacing:-.06em;line-height:.85}
.tn-strip{display:flex;gap:6px;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center;max-width:560px}
.tn-strip li{min-width:48px;height:34px;padding:0 8px;border-radius:10px;display:grid;place-items:center;font-size:13px}
.tn-strip li b{font-weight:700}
.tn-strip .win{background:var(--up-soft);color:var(--up)}.tn-strip .loss{background:var(--dn-soft);color:var(--dn)}.tn-strip .skip{background:var(--soft);color:var(--tx-3)}
.tn-end p{color:var(--tx-2);font-weight:600;font-size:15px}
.tn-stage.shake{animation:tn-shake .42s ease}
@keyframes tn-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* controls */
.tn-ctl{display:flex;align-items:center;gap:12px;padding:14px 22px 22px;min-height:98px;flex-wrap:wrap}
.tn-ctl:has(.tn-start){justify-content:center}
.tn-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-width:240px}
.tn-side-b{height:60px;border:0;border-radius:16px;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,color .15s,transform .26s var(--e-pop,ease)}
.tn-side-b.long{background:var(--up-soft);color:var(--up)}
.tn-side-b.short{background:var(--dn-soft);color:var(--dn)}
.tn-side-b.long:hover{background:var(--up);color:var(--on-up)}.tn-side-b.short:hover{background:var(--dn);color:var(--on-dn)}
.tn-side-b:active{transform:scale(.97)}
.tn-skip{height:60px;padding:0 22px;border-radius:16px}
.tn-plan{display:flex;align-items:flex-start;gap:22px;flex:1;min-width:0;flex-wrap:nowrap}
.tn-plan .pill{font-size:14px;padding:6px 12px}
.tn-kv{flex:none}
.tn-kv small{display:block;color:var(--tx-3);font-size:12px;font-weight:600}
.tn-kv b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;min-width:5.5ch}
.tn-kv em{display:block;font-style:normal;color:var(--tx-3);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.tn-acts{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-left:auto}
.tn-acts .chips{flex-wrap:nowrap}
.tn-play{min-width:150px}
.tn-play .ic,.tn-start .ic{margin-right:2px}
.tn-start{min-width:240px}
.tn-next{min-width:220px}
.tn-live{display:flex;align-items:baseline;gap:14px;flex:1}
.tn-live small{color:var(--tx-3);font-weight:600;font-size:14px}
.tn-live b{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* the result, where the live R was: nothing sits over the candles */
.tn-out{display:flex;align-items:baseline;gap:14px;flex:1;min-width:0;animation:tn-pop .4s var(--e-pop,ease) both}
.tn-out small{color:var(--tx-3);font-weight:600;font-size:14px;white-space:nowrap}
.tn-out b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.tn-out.up b{color:var(--up)}.tn-out.dn b{color:var(--dn)}
.tn-revgo{display:none}
.tn-err{color:var(--dn);font-weight:600;flex:1}

/* «Разбор» */
.tn-rev .ch{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tn-rev .pill{font-size:13px;padding:4px 10px;white-space:normal;text-align:right}
.tn-rev h4{font-size:13px;font-weight:700;color:var(--tx-3);padding:4px 18px 8px}
.tn-rev-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 16px 14px}
.tn-rev-facts div{background:var(--soft);border-radius:12px;padding:9px 10px;min-width:0}
.tn-rev-facts small{display:block;color:var(--tx-3);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-rev-facts b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tn-rev-facts em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-rev-list{list-style:none;margin:0;padding:0 16px 14px;display:grid;gap:8px}
.tn-rev-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--soft)}
.tn-rev-list li .ic{flex:none;margin-top:1px}
.tn-rev-list li.bad{background:var(--dn-soft)}.tn-rev-list li.bad .ic{color:var(--dn)}
.tn-rev-list li.good{background:var(--up-soft)}.tn-rev-list li.good .ic{color:var(--up)}
.tn-rev-list li.info .ic{color:var(--tx-3)}
.tn-rev-list p{font-size:14px;line-height:1.45;color:var(--tx)}
.tn-rev-list p b{font-weight:700;white-space:nowrap}
.tn-rev-rows{list-style:none;margin:0;padding:0 10px 14px;display:grid;gap:2px}
.tn-rev-rows li{display:flex;align-items:baseline;gap:12px;padding:9px 10px 9px 12px;border-radius:12px}
.tn-rev-rows li>span{flex:none;display:flex;align-items:center;gap:8px;color:var(--tx-2);font-size:14px;font-weight:600;white-space:nowrap}
.tn-rev-rows li>span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none;transform:translateY(-1px)}
.tn-rev-rows li[data-tone=dn]>span::before{background:var(--dn)}.tn-rev-rows li[data-tone=up]>span::before{background:var(--up)}
.tn-rev-rows li>b{flex:1;min-width:0;text-align:right;font-size:14px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums}
.tn-rev-rows li[data-tone=dn]>b{color:var(--dn)}
.tn-rev-rows li>b small{display:block;color:var(--tx-3);font-size:12px;font-weight:500}
.tn-rev-rows .chip{flex:none;align-self:center;height:28px;padding:0 10px;font-size:12px}
/* a line whose aid is on the chart: under the pointer / focus, or pinned by a tap */
.tn-rev [data-aid]{cursor:pointer;outline:none;transition:box-shadow .15s}
.tn-rev [data-aid].on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tx) 28%,transparent)}
.tn-rev [data-aid].pin{box-shadow:inset 0 0 0 2px var(--tx)}
.tn-rev [data-aid]:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
.tn-revnext{display:none}

/* «Привычки» */
.tn-hab .ch{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tn-hab-list{list-style:none;margin:0;padding:0 10px 12px}
.tn-hab-list li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px}
.tn-hab-list li.base{background:var(--soft)}
.tn-hab-list .grow{min-width:0}
.tn-hab-list .grow b{display:block;font-weight:600;font-size:14px}
.tn-hab-list small{display:block;color:var(--tx-3);font-size:12px}
.tn-hab-list>li>b{font-weight:800;font-size:15px;flex:none;font-variant-numeric:tabular-nums}

/* the table and my numbers */
.tn-side{display:grid;gap:20px;min-width:0}
.tn-board .ch{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}   /* a half-width card: the seg goes under the title rather than over it */
.tn-board .ch h3{white-space:nowrap;flex:none}
.tn-board .seg button{padding:5px 10px;font-size:13px}
.tn-rows{list-style:none;margin:0;padding:0 10px 12px}
.tn-rows li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px}
.tn-rows li.me{background:var(--soft)}
.tn-pl{width:20px;text-align:center;font-weight:800;color:var(--tx-3);flex:none}
.tn-rows li:first-child .tn-pl{color:var(--warn)}
.tn-rows .ava{width:36px;height:36px;font-size:15px}
.tn-rows .grow{min-width:0}
.tn-rows .grow b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-rows small{display:block;color:var(--tx-3);font-size:12px}
.tn-rows>li>b{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.tn-none{padding:4px 24px 22px;color:var(--tx-3)}
.tn-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px 18px}
.tn-tiles div{background:var(--soft);border-radius:14px;padding:11px 14px;min-width:0}
.tn-tiles small{display:block;color:var(--tx-3);font-size:12px;font-weight:600}
.tn-tiles b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* desktop: the side column stays in view next to the chart (the breakdown at its top) */
@media (min-width:1101px){
  .tn-side{position:sticky;top:16px}   /* a column taller than the window scrolls with the page: nothing is cut */
}
@media (min-width:1600px){.tn{grid-template-columns:minmax(0,1fr) 380px}}
@media (max-width:1500px){.tn-side-p{display:none}}
@media (max-width:1300px){.tn-play{min-width:0}.tn-plan{gap:16px}}
/* tablets and narrow windows: the plan on one row, the actions under it */
@media (max-width:1100px),(max-width:1380px) and (pointer:coarse){
  .tn-plan{flex:1 1 100%}
  .tn-acts{margin-left:auto}
}
@media (max-width:1100px){
  .tn{grid-template-columns:1fr}
  .tn-side{grid-template-columns:1fr 1fr;align-items:start}
  .tn-rev,.tn-hab{grid-column:1/-1}
  .tn-revgo{display:inline-flex}
  .tn-revnext{display:flex;width:calc(100% - 32px);margin:2px 16px 16px}
  .tn-rev-facts{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tn-board .seg button{padding:5px 8px}
}
@media (max-width:760px){
  .tn{gap:14px}
  .tn-side{grid-template-columns:1fr;gap:14px}
  .tn-rev-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tn-head{padding:14px 14px 6px;gap:8px 10px;flex-wrap:wrap}
  .tn-coin{flex:1 1 calc(100% - 150px)}   /* the coin and the score fill the first row; the timeframe and the dots go under them */
  .tn-score{flex:none}
  .tn-tf{order:3}
  /* the dots have their own row, as tall as the timeframe seg beside them: the chart does not jump when it hides */
  .tn-dots{order:4;flex:1 1 100%;justify-content:space-between;align-items:center;min-height:46px;padding:0 2px;min-width:0}
  .tn-tf:not(.off)~.tn-dots{flex-basis:0;gap:4px;justify-content:flex-end}
  .tn-dots li{width:9px;height:9px;flex:none}
  .tn-score{min-width:0}
  /* one height for the chart with or without panes: the panes share it */
  .tn-chart,.tn-chart.p1{height:clamp(240px,calc(100svh - 432px),520px);margin:0 4px}
  .tn-chart.p2{height:clamp(280px,calc(100svh - 340px),560px)}.tn-chart.p3{height:clamp(300px,calc(100svh - 300px),600px)}
  .tn-tools{padding:2px 14px 8px;min-height:50px}
  .tn-inds>:first-child{margin-left:0}
  .tn-inds .chip,.tn-tf .seg button,.tn-acts .chips .chip,.tn-board .seg button{min-height:40px;height:40px}
  .tn-zone em{display:none}
  .tn-zone{padding:4px 6px}
  .tn-zone span{padding:3px 7px;font-size:12px}
  .tn-zone.thin span{right:6px}
  /* the controls stay above the tab bar while the stage is taller than the screen */
  .tn-ctl{position:sticky;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));z-index:5;background:var(--card);padding:12px 14px 16px;min-height:0;gap:10px}
  .tn-pick{min-width:0;width:100%}
  .tn-side-b{height:56px}
  .tn-skip{width:100%;height:44px}
  .tn-plan{gap:14px;justify-content:space-between}
  .tn-kv b{font-size:17px}
  .tn-acts{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;width:100%;margin:0}
  .tn-acts .chips{display:flex;gap:6px}
  .tn-acts .chips .chip{padding:0 9px}
  .tn-acts [data-back]{padding:0 14px}
  .tn-play{min-width:0;padding:0 12px}
  .tn-play .ic{display:none}
  .tn-out{flex:1 1 100%}
  .tn-out b{font-size:30px}
  .tn-ctl .tn-next{flex:1;min-width:0}
  .tn-start{flex:1;min-width:0}
  .tn-big{font-size:96px}
  .tn-hero p{font-size:16px;margin-top:12px}
}
@media (max-width:380px){
  .tn-acts{grid-template-columns:1fr 1fr}
  .tn-acts .chips{grid-column:1/-1}
  .tn-acts .chips .chip{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.tn-stage.shake,.tn-zone.hit,.tn-out,.tn-end{animation:none}.tn-fog{transition:none}}