/* ============================================================================
   Scalp Engine — the market clock (IST time + session pill + countdown)
   Loaded after core.css, on any page that carries an element #marketClock.
   Rendered by static/js/clock.js.

   No colour is defined here — not one hex, not one rgb(). The pill and its dot
   wear core.css's semantic classes as-is (`.pill.long` for OPEN, `.pill.hold`
   for PRE-OPEN, the bare `.pill` for CLOSED / WEEKEND / HOLIDAY, `.dot.live` /
   `.dot.warn` for the beacon), and everything else is a token: --ink*, --edge,
   --glass, --mono. That is what lets the clock follow all three core.css
   themes (emerald / slate / amber) without a line of theme-specific CSS.

   Every override is written `.mclock .x` (0,2,0) so it beats core.css's `.pill`
   and `.dot` no matter which stylesheet a page happens to load first.

   Fit: the widget lives in a flex navbar, so it never wraps, never grows, and
   sheds its optional parts as the viewport narrows —
     >1080px  time + seconds + IST + pill + countdown
     <=1080px countdown drops (it is also in the pill's description)
     <=560px  the IST tag drops
     <=440px  seconds drop, the pill loses its chrome and the state word goes
              screen-reader-only: at 380px a nav has ~50px to spare, and the
              colour of the dot still carries the state.
   ========================================================================= */

.mclock{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;              /* never absorb slack, never get squeezed to nothing */
  white-space:nowrap;
  line-height:1;
  min-width:0;
}

/* ------------------------------------------------------------- the face -- */

.mclock .mclock-time{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;   /* digits must not shuffle every second */
  font-size:13.5px;
  font-weight:650;
  letter-spacing:-.02em;
  color:var(--ink);
}
.mclock .mclock-sec{
  font-size:.82em;
  color:var(--ink-3);
}
.mclock .mclock-zone{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.3px;
  /* --ink-4 is the 3:1 (large/UI) step. This is 9.5px text, so it needs the
     4.5:1 step or it fails AA: measured 4.04 emerald / 4.05 slate / 4.10 amber
     against the bars it sits on. --ink-3 measures 6.06 / 6.06 / 6.09. */
  color:var(--ink-3);
  margin-left:-4px;                     /* tuck IST against the clock face */
  align-self:center;
}

/* ------------------------------------------------------------- the pill -- */

.mclock .mclock-pill{
  gap:6px;
  padding:4px 10px;
  font-size:10.5px;
  letter-spacing:.9px;
  font-weight:700;
  flex:none;
}
/* Size only. The FILL is core.css's business: a bare `.dot` is --ink-4, and
   `.dot.live` / `.dot.warn` paint themselves --long / --hold and set `color`
   to the matching --*-beacon that drives the pulse ring. Re-declaring the
   background here (e.g. as `currentColor`) would pick up that beacon colour
   and render the dot at its alpha instead of solid. */
.mclock .mclock-dot{
  width:6px;
  height:6px;
}

/* Not confirmed by the server: dashed edge, hollow dot, muted throughout.
   The state word is still shown — it is the colour that is withheld, because
   an unsynced clock has no business painting a green OPEN. */
.mclock .mclock-pill.is-stale{
  border-style:dashed;
  /* text, not chrome: the 4.5:1 step, same reason as .mclock-zone above */
  color:var(--ink-3);
  background:transparent;
}
.mclock .mclock-pill.is-stale .mclock-dot{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--ink-4);
  animation:none;
}
/* Synced, but the server could not check today against its session history
   (see the `note` it returns). Same dashed hint, full colour kept. */
.mclock .mclock-pill.is-unverified{
  border-style:dashed;
}

/* --------------------------------------------------------- the countdown -- */

.mclock .mclock-next{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------- screen-reader-only */
/* Self-contained: console.css and home.css each define their own .sr-only and
   this file must not depend on either being present. */
.mclock .mclock-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------- context -- */
/* Console topbar: sits in .topbar-right, left of the feed indicator, with the
   same hairline divider the .who block uses. */
.topbar-right .mclock{
  padding-right:14px;
  border-right:1px solid var(--edge);
}
/* Home nav: .nav-in is a flex row whose .nav-links takes the slack, so the
   clock only needs to refuse to grow. */
.nav-in .mclock{
  margin-left:auto;
}
.nav-in .nav-links ~ .mclock,
.nav-in .mclock ~ .nav-cta{
  margin-left:0;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width:1080px){
  /* The countdown is the first thing to go: it is still in the pill's
     aria-description and its title, so nothing is actually lost. */
  .mclock .mclock-next{display:none}
}

@media (max-width:880px){
  /* .nav-links is display:none from here down, so nothing takes the slack
     any more -- the clock has to take it back or the CTA stops being
     right-aligned. */
  .nav-in .nav-links ~ .mclock{margin-left:auto}
}

@media (max-width:560px){
  .mclock{gap:7px}
  .mclock .mclock-zone{display:none}
  .mclock .mclock-time{font-size:13px}
  .topbar-right .mclock{padding-right:10px}
}

@media (max-width:440px){
  /* ~50px of nav to play with. Keep HH:MM and a coloured dot; the state word
     stays in the accessibility tree instead of being deleted from it. */
  .mclock{gap:6px}
  .mclock .mclock-sec{display:none}
  .mclock .mclock-time{font-size:12.5px}
  .mclock .mclock-pill{
    padding:0;border:0;background:none;gap:0;
  }
  .mclock .mclock-pill.is-stale{border:0}
  .mclock .mclock-dot{width:7px;height:7px}
  .mclock .mclock-state{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .topbar-right .mclock{padding-right:0;border-right:0}
}

/* ------------------------------------------------------- reduced motion -- */
/* core.css already neutralises every animation globally; this is the explicit
   statement for the one animation this widget opts into (the .dot beacon). */
@media (prefers-reduced-motion:reduce){
  .mclock .mclock-dot{animation:none !important}
}

/* ============================================================================
   FEED INDICATOR — sits beside the market clock in the topbar / nav
   ========================================================================= */
.wsfeed{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.7px;font-weight:600;
  padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--edge);background:var(--glass);color:var(--ink-3);
  white-space:nowrap;
}
.wsfeed-connected{color:var(--long);border-color:var(--long-dim);background:var(--long-dim)}
.wsfeed-stale{color:var(--hold);border-color:var(--hold-dim);background:var(--hold-dim)}
.wsfeed-offline{color:var(--ink-3)}
.wsfeed-sub{color:var(--ink-3);font-weight:400;letter-spacing:.3px}
.wsfeed-connected .wsfeed-sub{color:var(--long)}
.wsfeed-stale .wsfeed-sub{color:var(--hold)}
@media(max-width:1080px){.wsfeed-sub{display:none}}
@media(max-width:760px){.wsfeed-k{display:none}.wsfeed{padding:5px 8px}}