/* Market Hours (US and India pages). Tokens, header and footer come from the site stylesheet. */
.intro h1 { font-size: 22px; margin: 0 0 12px; }
.intro p { margin: 0 0 8px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mh-you { font-size: 14px; }

.mh h3 { font-size: 14px; font-weight: 600; margin: 18px 0 4px; }
.mh > h3 { margin-top: 24px; }

.mh-card {
  margin-top: 16px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}
.mh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mh-top h2 { font-size: 20px; font-weight: 700; margin: 0; }

.mh-badge {
  flex: none; margin-top: 4px; padding: 6px 12px; border-radius: 8px; border: 1px solid;
  font-size: 16px; font-weight: 600;
  --c: var(--muted); color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--c) 35%, var(--panel));
}
.mh-badge:empty { visibility: hidden; }

.mh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.mh-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mh-big { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; line-height: 1.2; }
/* Time left, in the current session's colour (below). The page's --c is its category colour. */
.mh-big.left { --c: var(--ok); color: var(--c); }
.mh-note { margin-top: 4px; font-weight: 600; color: var(--err); }
.mh-note.early { color: var(--warn); }
.mh-what { font-size: 16px; font-weight: 500; }
.mh-range { font-size: 13px; }
.mh-bar { height: 10px; margin-top: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
/* Progress through the current session, in that session's colour (set in app.js). The page sets
   --c to its category colour, so the bar names its own default. */
.mh-bar { --c: var(--ok); }
.mh-bar span { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.mh-count { margin-top: 8px; }

.mh-rows > * + * { border-top: 1px solid var(--line); }
.mh-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 4px 0; }
.mh-row > :last-child { text-align: right; }
.mh-sched .mh-row { padding: 6px 0; }
.mh-sched .mh-row.now .mh-name { color: var(--ok); font-weight: 600; }
.mh-times { font-size: 13px; }
.mh-about { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; max-width: 34em; margin-left: auto; }
.mh-hol-name { color: var(--err); }
.mh-row.early .mh-hol-name { color: var(--warn); }
.mh-hols { padding: 4px 16px; }
.mh-hols .mono { font-size: 13px; white-space: nowrap; }

/* Day bar: one solid block per session, sized by its length, its name inside where it fits;
   closed time as a thin grey rule (dashed on weekends and holidays); a colour key; a marker now. */
.mh-day { margin-top: 20px; }
.mh-track { position: relative; }
.mh-segs { display: flex; gap: 3px; height: 30px; }
.mh-seg {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  --c: var(--muted); background: var(--c); color: #fff;
}
.mh-seg.s-pre, .mh-key.s-pre, .mh-bar.s-pre, .mh-badge.s-pre, .mh-big.s-pre, .mh-tip-what.s-pre { --c: #d98200; }
.mh-seg.s-main, .mh-key.s-main, .mh-bar.s-main, .mh-badge.s-main, .mh-big.s-main, .mh-tip-what.s-main { --c: #18894a; }
.mh-seg.s-post, .mh-key.s-post, .mh-bar.s-post, .mh-badge.s-post, .mh-big.s-post, .mh-tip-what.s-post { --c: #2f6fe4; }
.mh-seg.s-overnight, .mh-key.s-overnight, .mh-bar.s-overnight, .mh-badge.s-overnight, .mh-big.s-overnight, .mh-tip-what.s-overnight { --c: #7b5cd6; }
/* Closed: a full-height grey block with fine hatching, so it reads as "closed", not as a gap.
   Weekends and holidays get bolder hatching than the short breaks between sessions. */
.mh-seg.s-closed {
  color: var(--muted); font-weight: 500;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 13%, transparent) 0 3px, transparent 3px 8px), color-mix(in srgb, var(--muted) 7%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 18%, transparent);
}
.mh-seg.off {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 24%, transparent) 0 4px, transparent 4px 9px), color-mix(in srgb, var(--muted) 9%, var(--panel));
}
/* Now: a small ink caret just above the bar, pointing down at the time, and the elapsed part of
   the day washed out. Nothing crosses the blocks themselves. */
.mh-line {
  position: absolute; top: -9px; width: 0; height: 0; margin-left: -6px; pointer-events: none;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--text);
}
.mh-past {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.mh-guide, .mh-tip { z-index: 3; }
.mh-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; }
/* Hover readout (app.js): a faint guide at the pointer and a dark bubble above the bar with the
   time there, in exchange time and the visitor's, and the session it falls in. */
.mh-track { cursor: crosshair; touch-action: pan-y; }
.mh-guide { position: absolute; top: -4px; bottom: -4px; width: 1px; margin-left: -.5px; background: var(--text); opacity: .55; pointer-events: none; }
.mh-tip {
  position: absolute; bottom: calc(100% + 12px); transform: translateX(-50%); z-index: 3;
  padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--panel);
  font-size: 12.5px; line-height: 1.45; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%); font-variant-numeric: tabular-nums;
}
.mh-tip-what { display: flex; align-items: center; gap: 6px; }
.mh-tip-what::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, transparent); }
.mh-tip-what.off::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.mh-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.mh-key { display: inline-flex; align-items: center; gap: 6px; }
.mh-key::before { content: ""; width: 14px; height: 10px; border-radius: 3px; background: var(--c, var(--muted)); }
.mh-key.off::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 40%, transparent) 0 2px, transparent 2px 4px), color-mix(in srgb, var(--muted) 12%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 25%, transparent); }
@media (prefers-color-scheme: dark) {
  .mh-seg.s-pre, .mh-key.s-pre, .mh-bar.s-pre, .mh-badge.s-pre, .mh-big.s-pre, .mh-tip-what.s-pre { --c: #f0a83a; }
  .mh-seg.s-main, .mh-key.s-main, .mh-bar.s-main, .mh-badge.s-main, .mh-big.s-main, .mh-tip-what.s-main { --c: #3ec47a; }
  .mh-seg.s-post, .mh-key.s-post, .mh-bar.s-post, .mh-badge.s-post, .mh-big.s-post, .mh-tip-what.s-post { --c: #6f9dff; }
  .mh-seg.s-overnight, .mh-key.s-overnight, .mh-bar.s-overnight, .mh-badge.s-overnight, .mh-big.s-overnight, .mh-tip-what.s-overnight { --c: #a48cf0; }
}

/* Day markers, Sunday first: lit on the days a session opens, today ringed. */
.days { display: inline-flex; gap: 2px; margin-top: 2px; }
.day {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 10px; line-height: 1;
  background: var(--head); color: var(--line);
}
.day.on { font-weight: 600; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--panel)); }
.day.today { box-shadow: 0 0 0 1px var(--muted); }

@media (max-width: 640px) {
  .mh-grid { grid-template-columns: 1fr; }
  .mh-big { font-size: 26px; }
}
@media (max-width: 480px) {
  .mh-row { flex-direction: column; gap: 0; }
  .mh-row > :last-child { text-align: left; }
  .mh-about { margin-left: 0; }
}