/* Project-specific styles for The Series B Clock.
   Loaded AFTER leanscale.css. Reuses the base tokens throughout. */

.chartwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chartwrap svg{display:block;min-width:520px;width:100%;height:auto}
/* charts that live in a narrow column scale down instead of scrolling */
.chartwrap--sm svg{min-width:0}

/* ---------- interactive clock ---------- */
.clockcard{background:#fff;border:1px solid var(--ls-light-gray);border-radius:var(--radius);
  padding:30px 32px 26px;box-shadow:var(--shadow)}
.clock-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.clock-month{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;letter-spacing:-.03em;color:var(--ls-dark-purple);line-height:1}
.clock-status{margin-top:9px;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ls-strong-purple);background:var(--ls-purple-soft);padding:6px 13px;border-radius:100px;display:inline-block}
.clock-odds{text-align:right}
.clock-odds__v{font-size:clamp(3rem,8vw,4.6rem);font-weight:800;letter-spacing:-.045em;line-height:.9;
  color:var(--ls-strong-purple);font-variant-numeric:tabular-nums}
.clock-odds__u{font-size:.45em;margin-left:2px}
.clock-odds__k{font-size:12.5px;font-weight:600;color:var(--ls-dark-gray);margin-top:9px;
  text-transform:uppercase;letter-spacing:.05em}

.clock-slider{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:100px;
  background:var(--track);outline:none;cursor:pointer}
.clock-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;
  border-radius:50%;background:var(--ls-strong-purple);border:4px solid #fff;
  box-shadow:0 2px 10px rgba(100,37,133,.4);cursor:grab}
.clock-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ls-strong-purple);
  border:4px solid #fff;box-shadow:0 2px 10px rgba(100,37,133,.4);cursor:grab}
.clock-slider:focus-visible{box-shadow:0 0 0 4px var(--ls-lime)}
.clock-ticks{display:flex;justify-content:space-between;margin-top:9px;font-size:11.5px;font-weight:700;
  color:var(--ls-dark-gray);letter-spacing:.04em}

.clock-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.cmeta{background:var(--ls-off-white);border:1px solid var(--ls-light-gray);border-radius:13px;padding:15px 17px}
.cmeta b{display:block;font-size:1.55rem;font-weight:800;color:var(--ls-dark-purple);letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}
.cmeta span{display:block;margin-top:7px;font-size:11.5px;font-weight:600;color:var(--ls-dark-gray);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.35}

.clock-zone{margin-top:20px;padding:16px 20px;border-radius:13px;font-size:14.5px;line-height:1.55;
  background:var(--ls-lime);color:var(--ls-dark-purple);font-weight:500;border:1px solid var(--ls-lime-deep)}
.clock-zone strong{font-weight:800}
.clock-zone.warn{background:var(--ls-purple-soft);border-color:#e2cfe9}
@media(max-width:640px){
  .clock-meta{grid-template-columns:1fr}
  .clock-odds{text-align:left}
  .clockcard{padding:24px 20px}
}

/* ---------- gates ---------- */
.gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;margin-bottom:34px}
.gate{background:#fff;border:1px solid var(--ls-light-gray);border-radius:var(--radius);padding:24px 22px;
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.gate:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--ls-strong-purple)}
.gate__m{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ls-strong-purple);margin-bottom:11px}
.gate h3{font-size:1.28rem;font-weight:800;letter-spacing:-.025em;color:var(--ls-dark-purple);margin-bottom:10px}
.gate__p{font-size:14.5px;color:var(--ls-dark-gray);line-height:1.6}
.gate__stat{margin-top:16px;padding-top:14px;border-top:1px solid var(--ls-light-gray);
  font-size:13px;font-weight:600;color:var(--ls-dark-gray)}
.gate__stat b{font-size:1.3rem;font-weight:800;color:var(--ls-strong-purple);letter-spacing:-.02em}
.gate--hot{background:linear-gradient(160deg,#fff 0%,var(--ls-purple-soft) 100%);border-color:var(--ls-medium-purple)}

/* ---------- backward chain ---------- */
.chain{display:flex;flex-direction:column;gap:0}
.chainstep{position:relative;padding:20px 24px 20px 34px;background:#fff;border:1px solid var(--ls-light-gray);
  border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.chainstep:before{content:"";position:absolute;left:14px;top:24px;bottom:24px;width:3px;
  background:var(--ls-medium-purple);border-radius:3px}
.chainstep__m{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ls-strong-purple);margin-bottom:7px}
.chainstep p{font-size:15px;color:var(--ls-dark-gray);line-height:1.6}
.chainstep strong{color:var(--ls-dark-purple);font-weight:700}
.chainstep--hot{background:linear-gradient(160deg,#fff 0%,var(--ls-lime) 140%);border-color:var(--ls-lime-deep)}
.chainstep--hot:before{background:var(--ls-strong-purple)}

/* ---------- data table ---------- */
table.dt{width:100%;border-collapse:collapse;font-size:14px}
table.dt th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ls-dark-gray);padding:11px 14px;border-bottom:2px solid var(--ls-light-gray);white-space:nowrap}
table.dt td{padding:13px 14px;border-bottom:1px solid var(--ls-light-gray);color:var(--ls-ink);vertical-align:top}
table.dt tr:last-child td{border-bottom:none}
table.dt td:first-child{font-weight:700;color:var(--ls-dark-purple)}
table.dt .num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ls-strong-purple)}
.tablewrap{overflow-x:auto}

/* ---------- chart primitives ---------- */
.lgd{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 14px;font-size:12.5px;font-weight:600;color:var(--ls-dark-gray)}
.lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px}