/* $SEED — THE CLIMB (fx/chart.css). Stamped-steel frame around the canvas, the pressure gauge, the strip. */
.climb{margin:6px 0 30px;border:3px solid var(--ink);background:var(--plate);box-shadow:6px 6px 0 var(--ink);position:relative;overflow:hidden}

/* head */
.climb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:10px 14px 9px;border-bottom:3px solid var(--ink);background:#fff}
.climb-title b{display:block;font-family:var(--stencil);font-weight:900;font-size:30px;line-height:1;letter-spacing:.01em}
.climb-title span{display:block;margin-top:3px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.climb-now{text-align:right;margin-left:auto}
.climb-now b{display:block;font-family:var(--stencil);font-weight:900;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.climb-now i{display:block;margin-top:3px;font-style:normal;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.climb-now i.up{color:var(--orange-d)}
.climb-now i.down{color:var(--ink-2)}

/* body: gauge rail + canvas */
.climb-body{display:grid;grid-template-columns:50px minmax(0,1fr)}
.climb-canvas-wrap{position:relative;height:360px;min-width:0;
  /* brushed plate under a transparent canvas: the texture costs nothing per frame */
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.24) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#eef0ec,#dadddb)}
.climb-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.climb.no-canvas .climb-canvas-wrap{height:120px}
.climb.no-canvas .climb-canvas-wrap::after{content:"chart needs a canvas";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--stencil);font-size:22px;color:var(--mute);text-transform:uppercase}

/* pressure gauge — fills across the last 10% below the next locked door */
.climb-gauge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;border-right:3px solid var(--ink);background:var(--steel-2);min-width:0}
.cg-label{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;font-size:10px;letter-spacing:.16em;color:var(--ink-2);flex:none;user-select:none}
.cg-tube{flex:1;width:18px;border:2px solid var(--ink);background:#fff;position:relative;overflow:hidden;min-height:60px}
.cg-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0) * 100%);
  background:repeating-linear-gradient(-45deg,var(--orange) 0 6px,var(--orange-d) 6px 12px);
  transition:height .7s cubic-bezier(.2,.8,.2,1)}
.cg-ticks{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(18,18,18,.28) 9px 10px)}
.cg-val{font-family:var(--mono);font-size:10px;font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.climb-gauge.hot .cg-fill{animation:cgPulse 1.1s ease-in-out infinite}
.climb-gauge.hot .cg-label{color:var(--orange-d)}
.climb-gauge.red{background:var(--yellow)}
.climb-gauge.red .cg-tube{border-color:var(--orange-d);animation:cgRattle .32s linear infinite}
.climb-gauge.red .cg-val{color:var(--orange-d);animation:cgBlink 1s steps(2) infinite}
@keyframes cgPulse{50%{filter:brightness(1.18)}}
@keyframes cgRattle{25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
@keyframes cgBlink{50%{opacity:.4}}
/* chart.js adds .climb-idle when the section is off-screen or the tab is hidden: nothing in here moves then */
.climb.climb-idle .cg-fill,.climb.climb-idle .cg-tube,.climb.climb-idle .cg-val{animation-play-state:paused}

/* strip under the chart */
.climb-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid var(--ink);background:#fff}
.climb-strip>div{padding:8px 12px 9px;border-right:2px solid var(--ink);min-width:0}
.climb-strip>div:last-child{border-right:0}
.climb-strip span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.climb-strip b{display:block;font-family:var(--stencil);font-weight:900;font-size:24px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.climb-strip b small{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--orange-d);margin-left:8px;letter-spacing:0}

/* responsive */
@media (max-width:720px){
  .climb-head{padding:8px 12px 7px}
  .climb-title b{font-size:24px}
  .climb-title span{font-size:10px}
  .climb-now b{font-size:24px}
  .climb-now i{font-size:11px}
  .climb-body{grid-template-columns:minmax(0,1fr)}
  .climb-canvas-wrap{height:260px}
  /* the gauge lies down under the chart on a phone */
  .climb-gauge{order:2;flex-direction:row;border-right:0;border-top:3px solid var(--ink);padding:6px 10px;gap:10px}
  .cg-label{writing-mode:horizontal-tb;transform:none}
  .cg-tube{width:auto;height:16px;min-height:0;flex:1}
  .cg-fill{right:auto;top:0;bottom:0;height:100%;width:calc(var(--p,0) * 100%);transition:width .7s cubic-bezier(.2,.8,.2,1)}
  .cg-ticks{background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(18,18,18,.28) 9px 10px)}
  .climb-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .climb-strip>div:nth-child(2){border-right:0}
  .climb-strip>div:last-child{grid-column:1 / -1;border-top:2px solid var(--ink)}
  .climb-strip b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .cg-fill{transition:none}
  .climb-gauge.red .cg-tube,.climb-gauge.hot .cg-fill,.climb-gauge.red .cg-val{animation:none}
}