/* =========================================================
   The Trading Index — shared stylesheet
   Layout modelled on the Supreme home page:
   centred green box logo, date line, one 702px panel in the
   middle, filter list to its left, link row at the bottom.
   ========================================================= */

:root {
  --accent: #000;            /* main colour: black (by request; was the candle green) */
  --candle-up: #3a7d6c;      /* ICT candlestick green, only for bullish candles (+ losing trade slices) */
  --ink: #000;
  --muted: #8a8a8a;
  --tag: rgba(189, 189, 189, .8);
  --tile: #f2f2f2;
  --bg: #fff;
  --win: #000;
  --loss: var(--candle-up);
  --panel-w: 702px;
  --font: "Courier New", Courier, monospace;
  --logo-font: "Futura", "Futura PT", "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
button:hover { text-decoration: underline; }

/* ---------- first screen: header / stage / nav ---------- */
.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 16px 28px;
}

.logo {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--logo-font);
  font-weight: 800;
  font-style: italic;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.5px;
  padding: 5px 9px 8px;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }

.date {
  font-size: 13px;
  font-weight: normal;
  margin-top: 16px;
  text-align: center;
}

.stage {
  position: relative;
  width: 100%;
  max-width: var(--panel-w);
  margin-top: 96px;
}

/* filter list sitting to the left of the panel */
.side {
  position: absolute;
  right: calc(100% + 18px);
  top: 0;
  list-style: none;
  text-align: right;
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}
.side button.active { font-weight: bold; }

.panel {
  height: min(436px, calc(100vh - 320px));
  min-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* bottom link row */
.bottom-nav {
  width: 100%;
  max-width: var(--panel-w);
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  gap: 13px;
  flex-wrap: wrap;
}
.bottom-nav .left, .bottom-nav .right { display: flex; gap: 13px; flex-wrap: wrap; }
.bottom-nav a.active { font-weight: bold; }

/* ---------- small footer below the fold ---------- */
.site-footer {
  width: 100%;
  max-width: var(--panel-w);
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 11px;
  line-height: 1.5;
  box-sizing: content-box;
}
.site-footer ul { list-style: none; }

/* ---------- home: slice strip ---------- */
.strip {
  display: flex;
  height: 368px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.slice {
  flex: 1 0 51px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 10px;
  color: #fff;
  background: var(--win);
  cursor: pointer;
  overflow: hidden;
  transition: flex-grow .2s ease;
}
.slice:nth-child(even) { filter: brightness(1.35); }
.slice.loss { background: var(--loss); filter: none; }
.slice.loss:nth-child(even) { filter: brightness(.88); }
.slice:hover { flex-grow: 2.2; }
.slice .v-ticker {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--logo-font);
  font-weight: 800;
  font-style: italic;
  font-size: 30px;
  letter-spacing: -.5px;
  line-height: 1;
}
.slice .v-pl {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
}

.tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--tag);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  padding: 0 3px;
}

.statline {
  margin-top: 14px;
  font-size: 11px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.statline b { font-weight: bold; }

.pos { color: var(--ink); }
.neg { color: var(--loss); }

/* ---------- grid (achievements / videos) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px 22px;
  padding-right: 16px;
}
.tile { cursor: pointer; font-size: 10px; line-height: 1.25; }
.tile .thumb {
  aspect-ratio: 1 / 1;
  background: var(--tile);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 6px;
}
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover .thumb { outline: 1px solid var(--ink); }
.tile .badge {
  font-family: var(--logo-font);
  font-weight: 800;
  font-style: italic;
  font-size: 30px;
}
.tile.locked .thumb { opacity: .3; }
.tile .muted { color: var(--muted); }

.empty { color: var(--muted); font-size: 11px; }

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal-box {
  width: 100%;
  max-width: var(--panel-w);
  max-height: 90vh;
  overflow: auto;
  position: relative;
  padding-top: 24px;
}
.modal-close { position: absolute; top: 0; right: 0; font-size: 13px; }
.modal-box h2 {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-family: var(--logo-font);
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  padding: 2px 8px 4px;
  margin-bottom: 16px;
}
.modal-box dl { display: grid; grid-template-columns: 90px 1fr; gap: 3px 12px; margin-bottom: 18px; }
.modal-box dt { color: var(--muted); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; margin-bottom: 10px; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* trade form */
.form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.form input, .form select, .form textarea {
  width: 100%;
  font: inherit;
  border: 1px solid #000;
  border-radius: 0;
  padding: 4px 5px;
  background: #fff;
}
.form textarea { min-height: 70px; resize: vertical; }
.form .full { grid-column: 1 / -1; }
.btn {
  background: #000;
  color: #fff;
  padding: 4px 12px;
}
.btn:hover { background: var(--accent); text-decoration: none; }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .side {
    position: static;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 14px;
  }
}

@media (max-width: 640px) {
  .screen { padding-top: 28px; }
  .stage { margin-top: 36px; }
  .panel { height: auto; min-height: 0; overflow: visible; }
  .strip { height: 300px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 16px 12px; padding-right: 0; }
  .form { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- front page (index.html) — black, like supreme.com ---------- */
body.landing-page { background: #000; color: #fff; }

.landing {
  min-height: 100vh;
  padding: 107px 16px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.landing .date { color: #fff; margin-top: 30px; line-height: 14px; }

/* three clocks in a row under the logo */
.clocks {
  --clock: 96px;
  display: grid;
  grid-template-columns: repeat(3, var(--clock));
  gap: 56px;
  margin-top: 44px;
}
.clock { text-align: center; }
.clock svg { width: var(--clock); height: var(--clock); display: block; }
.clock .face { fill: none; stroke: #fff; stroke-width: 1.5; }
.clock .tick { stroke: #fff; stroke-width: 1; }
.clock .tick-major { stroke: #fff; stroke-width: 2; }
.clock .hand { stroke: var(--accent); stroke-linecap: round; }
.clock .hour { stroke-width: 4; }
.clock .minute { stroke-width: 2.5; }
.clock .second { stroke-width: 1; }
.clock .pin { fill: var(--accent); }
.clock-label { margin-top: 12px; font-size: 11px; line-height: 13px; }
.clock-time { font-size: 11px; line-height: 13px; color: #aaa; }

.landing-links {
  list-style: none;
  width: 324px;
  max-width: 100%;
  margin-top: 70px;
  font-size: 18px;
  line-height: 21px;
}
.landing-links li + li { margin-top: 23px; }
.landing-links a { color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .landing { padding-top: 60px; }
  .clocks { --clock: 80px; gap: 24px; margin-top: 32px; }
  .landing-links { margin-top: 50px; }
  .landing-links li + li { margin-top: 20px; }
}

/* ---------- news: economic calendar ---------- */
.cal-nav {
  position: sticky;
  top: 0;
  background: var(--bg);
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 16px;
  font-size: 16px;
}
.cal-day { min-width: 230px; text-align: center; }
.cal-nav button { padding: 0 2px; margin: 0 -2px; white-space: nowrap; }
.cal-nav button:hover, .cal-nav button:focus-visible { background: var(--accent); color: #fff; text-decoration: none; outline: none; }

.cal-row {
  display: grid;
  grid-template-columns: 80px 42px 14px 1fr 76px 76px;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  line-height: 1.3;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  padding-right: 12px;
}
.cal-head { color: var(--muted); padding-top: 0; }
.cal-row.past { color: var(--muted); }
.cal-row.next { font-weight: bold; }

/* Forex Factory-style impact folders */
.impact { display: block; line-height: 0; }
.folder { width: 14px; height: 12px; display: block; }
.folder path { stroke-width: .8; }
.folder.high    .back { fill: #b8231a; stroke: #8f1a13; } .folder.high    .front { fill: #e0352b; stroke: #8f1a13; }
.folder.medium  .back { fill: #d17a12; stroke: #a85f0b; } .folder.medium  .front { fill: #f39a1d; stroke: #a85f0b; }
.folder.low     .back { fill: #d9b500; stroke: #ad9000; } .folder.low     .front { fill: #f7d82b; stroke: #ad9000; }
.folder.holiday .back { fill: #a3a3a3; stroke: #888; }    .folder.holiday .front { fill: #c4c4c4; stroke: #888; }

.today-tag {
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* headlines block under the calendar */
.headlines { margin-top: 34px; padding-bottom: 10px; }
.hl-head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.hl-head .muted { font-size: 11px; color: var(--muted); }
.hl-row {
  display: grid;
  grid-template-columns: 74px 34px 96px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid #eee;
  color: var(--ink);
}
.hl-row:hover { text-decoration: none; background: #f6fbfb; }
.hl-row:hover .hl-title { text-decoration: underline; }
.hl-row .muted { color: var(--muted); }
.hl-source { color: var(--muted); }

.next-tag {
  background: var(--accent);
  color: #fff;
  font-weight: normal;
  padding: 0 3px;
  margin-left: 4px;
}
.side-gap { height: 16px; }

/* news page: bigger, more spaced-out filter list */
body[data-page="news"] .side { font-size: 13px; line-height: 1.2; }
body[data-page="news"] .side li + li { margin-top: 8px; }

@media (max-width: 640px) {
  .cal-row { grid-template-columns: 70px 36px 12px 1fr; font-size: 13px; }
  body[data-page="news"] .side { gap: 8px 16px; }
  body[data-page="news"] .side li + li { margin-top: 0; }
  .cal-row span:nth-child(5), .cal-row span:nth-child(6) { display: none; }
  .cal-nav { justify-content: space-between; gap: 8px; font-size: 14px; flex-wrap: wrap; }
  .cal-day { min-width: 0; }
  .hl-row { grid-template-columns: 62px 1fr; font-size: 13px; }
  .hl-row span:nth-child(2) { display: none; }
  .hl-row .hl-source { grid-column: 1; grid-row: 2; font-size: 11px; }
  .hl-row .hl-title { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- link highlight (copied from supreme.com) ----------
   Hover or keyboard focus fills the link with the accent colour
   and turns the text white, the same as the logo box. */
.landing-links a,
.bottom-nav a,
.bottom-nav button,
.side button,
.site-footer a {
  padding: 0 2px;
  margin: 0 -2px;
}
.landing-links a:hover, .landing-links a:focus-visible,
.bottom-nav a:hover, .bottom-nav a:focus-visible,
.bottom-nav button:hover, .bottom-nav button:focus-visible,
.side button:hover, .side button:focus-visible,
.site-footer a:hover, .site-footer a:focus-visible {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  outline: none;
}

/* ---------- front page: everything about 15% larger (by request) ---------- */
.landing .logo { font-size: 36px; padding: 6px 11px 9px; }
.landing .date { font-size: 15px; line-height: 16px; }
.landing .clocks { --clock: 112px; gap: 64px; }
.landing .clock-label { font-size: 13px; line-height: 15px; margin-top: 14px; }
.landing .clock-time { font-size: 13px; line-height: 15px; }
.landing .landing-links { width: 372px; font-size: 21px; line-height: 24px; }
.landing .landing-links li + li { margin-top: 26px; }

@media (max-width: 640px) {
  .landing .logo { font-size: 32px; }
  .landing .clocks { --clock: 88px; gap: 20px; }
  .landing .landing-links li + li { margin-top: 22px; }
}

/* ---------- front page: nardo grey background, black links (by request) ---------- */
:root { --nardo: #9a9ca0; }   /* a lot lighter by request (was #5c5e62) */
body.landing-page { background: var(--nardo); }
.landing .landing-links a { color: #fff; }
.landing .landing-links a:hover,
.landing .landing-links a:focus-visible { color: #fff; }
.landing .clock-time { color: #c4c6c9; }
/* Courier New only comes in regular and bold, so a thin outline in the text's own
   colour makes the links "a little bolder" without jumping to full bold. */
.landing .landing-links a { -webkit-text-stroke: 0.45px currentColor; }
/* clock times: bold, brighter and a touch bigger so they read on the dark grey */
.landing .clock-time { font-weight: bold; color: #e8e9ea; font-size: 14px; line-height: 17px; margin-top: 2px; }

/* ---------- front page candle animation ---------- */
.landing { position: relative; overflow: hidden; }
.landing > *:not(.candles) { position: relative; z-index: 1; }
.candles {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  transition: opacity .7s ease;
}
.candles.fade { opacity: 0; }
.candle .body, .candle .wick {
  transform-box: fill-box;
  animation: candle-grow .36s ease-out both;
  animation-delay: var(--d);
}
.candle.up .body   { fill: var(--candle-up); transform-origin: center bottom; }
.candle.down .body { fill: #000;          transform-origin: center top; }
.candle.up .wick   { stroke: var(--accent); stroke-width: 1.5; }
.candle.down .wick { stroke: #000;          stroke-width: 1.5; }
.candle .wick { animation-name: candle-wick; }
.candles.still .candle .body, .candles.still .candle .wick { animation: none; }

@keyframes candle-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes candle-wick { from { opacity: 0; } to { opacity: 1; } }
/* the breakout candle slides out from behind the logo box as it grows */
.candle.breakout .body,
.candle.breakout .wick { animation-name: candle-emerge; animation-duration: .5s; }
@keyframes candle-emerge {
  from { transform: translateX(-16px) scaleY(.2); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: translateX(0) scaleY(1); opacity: 1; }
}

/* breaker block on candle 19: a thin, clean white outline that draws out to the
   right (clip-path reveal, so the line never stretches), then a small label fades in */
.breaker rect {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  shape-rendering: crispEdges;
  clip-path: inset(-2px 100% -2px -2px);
  animation: breaker-extend var(--run) cubic-bezier(.25, .1, .25, 1) both;
  animation-delay: var(--d);
}
.breaker text {
  fill: #fff;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: .4px;
  opacity: 0;
  animation: breaker-label .5s ease-out both;
  animation-delay: calc(var(--d) + var(--run));
}
.candles.still .breaker rect { animation: none; clip-path: none; }
.candles.still .breaker text { animation: none; opacity: 1; }
@keyframes breaker-extend { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px -2px -2px -2px); } }
@keyframes breaker-label { from { opacity: 0; } to { opacity: .9; } }

/* fair value gap: a plain white rectangle at 30% (70% transparent), no outline,
   revealed to the right the same way as the breaker block */
.fvg rect {
  fill: #fff;
  fill-opacity: .3;
  stroke: none;
  clip-path: inset(0 100% 0 0);
  animation: fvg-extend var(--run) cubic-bezier(.25, .1, .25, 1) both;
  animation-delay: var(--d);
}
.fvg text {
  fill: #fff;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: .4px;
  opacity: 0;
  animation: breaker-label .5s ease-out both;
  animation-delay: calc(var(--d) + var(--run));
}
.candles.still .fvg rect { animation: none; clip-path: none; }
.candles.still .fvg text { animation: none; opacity: 1; }
@keyframes fvg-extend { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* buy side liquidity: thin dashed white line across the equal highs, same clean reveal */
.bsl line {
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  shape-rendering: crispEdges;
  clip-path: inset(-2px 100% -2px -2px);
  animation: breaker-extend var(--run) cubic-bezier(.25, .1, .25, 1) both;
  animation-delay: var(--d);
}
.bsl text {
  fill: #fff;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: .4px;
  opacity: 0;
  animation: breaker-label .5s ease-out both;
  animation-delay: calc(var(--d) + var(--run));
}
.bsl .bsl-eqh { font-size: 10px; animation-delay: var(--d); }
.candles.still .bsl line { animation: none; clip-path: none; }
.candles.still .bsl text { animation: none; opacity: 1; }

/* labels a touch bigger (by request) */
.breaker text, .fvg text { font-size: 13px; }

/* chart scrolls left like a live chart once it reaches the right edge (no squeezing) */
.candles .pan {
  animation: chart-pan var(--pan-run, 0ms) linear both;
  animation-delay: var(--pan-d, 0ms);
}
@keyframes chart-pan { from { transform: translateX(0); } to { transform: translateX(var(--pan, 0px)); } }
.candles.still .pan { animation: none; transform: translateX(var(--pan, 0px)); }
/* clock faces are filled with the page colour, so any candle that scrolls behind a clock
   is hidden by it rather than drawn across it */
.landing .clock .face { fill: var(--nardo); }
/* chart labels a bit bigger again (by request) */
.breaker text, .fvg text { font-size: 15px; }
.bsl text { font-size: 13px; }
.bsl .bsl-eqh { font-size: 12px; }
/* labels appear as soon as their box or line starts drawing (by request), not after */
.breaker text, .fvg text, .bsl text, .bsl .bsl-eqh {
  animation-duration: .35s;
  animation-delay: calc(var(--d) + 120ms);
}
/* price-synced drawing: each box/line is revealed left to right at the candles' own pace
   (--d = when its candle prints, --run = until the last candle, --hide = its full length),
   and its label rides along at the growing end */
.breaker rect, .fvg rect, .bsl line, .pos rect, .pos line {
  clip-path: inset(-3px var(--hide, 0px) -3px -3px);
  animation:
    mark-grow var(--run) linear var(--d) both,
    mark-show 1ms linear var(--d) both;          /* hidden until the candle that forms it prints */
}
.breaker text, .fvg text, .bsl text, .bsl .bsl-eqh, .pos .pos-tag {
  opacity: 0;
  animation:
    mark-ride var(--run) linear var(--d) both,
    breaker-label .35s ease-out calc(var(--d) + 120ms) both;
}
@keyframes mark-grow {
  from { clip-path: inset(-3px var(--hide, 0px) -3px -3px); }
  to   { clip-path: inset(-3px 0px -3px -3px); }
}
@keyframes mark-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes mark-ride {
  from { transform: translateX(calc(-1 * var(--hide, 0px))); }
  to   { transform: translateX(0); }
}
.candles.still .breaker rect, .candles.still .fvg rect, .candles.still .bsl line { animation: none; clip-path: none; }
.candles.still .breaker text, .candles.still .fvg text, .candles.still .bsl text { animation: none; opacity: .9; transform: none; }

/* long position tool (TradingView-style): profit zone in the accent, loss zone in black,
   a white entry line, and labels. TP/SL labels sit at the tool's left edge and fade in. */
.pos .pos-profit { fill: var(--accent); fill-opacity: .16; }
.pos .pos-loss   { fill: #000; fill-opacity: .28; }
.pos .pos-entry  { stroke: #fff; stroke-width: 1; shape-rendering: crispEdges; }
.pos text { fill: #fff; font-family: var(--font); font-size: 12px; letter-spacing: .4px; }
.pos .pos-tp, .pos .pos-sl {
  opacity: 0;
  animation: breaker-label .35s ease-out calc(var(--d) + 120ms) both;
}
.candles.still .pos rect, .candles.still .pos line { animation: none; clip-path: none; }
.candles.still .pos text { animation: none; opacity: .9; transform: none; }
/* the RR label stays centred on the position tool while it grows (moves at half the speed) */
.pos .pos-tag {
  opacity: 0;
  animation:
    mark-ride-half var(--run) linear var(--d) both,
    breaker-label .35s ease-out calc(var(--d) + 120ms) both;
}
@keyframes mark-ride-half {
  from { transform: translateX(calc(-0.5 * var(--hide, 0px))); }
  to   { transform: translateX(0); }
}

/* TradingView-style bullish candles: accent body with a thin black outline and black wicks */
.candle.up .body { stroke: #000; stroke-width: 1; }
.candle.up .wick { stroke: #000; }

/* calendar: extra "actual" column (Finance Calendar provides actual results) */
.cal-row { grid-template-columns: 80px 42px 14px 1fr 66px 72px 72px; }
.cal-row .cal-actual { font-weight: bold; }
.cal-row a { color: inherit; }
.cal-row a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .cal-row { grid-template-columns: 70px 36px 12px 1fr; }
  .cal-row span:nth-child(5), .cal-row span:nth-child(6), .cal-row span:nth-child(7) { display: none; }
}

/* figures stay on one line; hover shows the full text */
.cal-row { grid-template-columns: 76px 38px 14px minmax(150px, 1fr) 88px 88px 104px; }
.cal-row .fig { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .cal-row { grid-template-columns: 70px 36px 12px 1fr; }
}

.clock .face { stroke: none; }                                   /* fill only; rings drawn on top */
.clock .face-outline { fill: none; stroke: #000; stroke-width: 3.6; }
.clock .face-ring    { fill: none; stroke: #fff; stroke-width: 1.5; }
.clock .tick-outline       { stroke: #000; stroke-width: 2.6; }
.clock .tick-major-outline { stroke: #000; stroke-width: 3.6; }

/* black outlines on the white text, logo box and clock lines removed by request
   (candlesticks keep theirs). The clock's outline lines are simply not shown. */
.clock .face-outline, .clock .tick-outline, .clock .tick-major-outline { display: none; }

/* holy grail tiles: the resource name sits in the square, a short description underneath */
.tile.grail { display: block; color: var(--ink); grid-column: span 2; }
.tile.grail:hover { text-decoration: none; }
.tile.grail .thumb { aspect-ratio: 2 / 1; }
.tile.grail .badge { font-size: 26px; }
.grail-text { margin-top: 6px; font-size: 10px; line-height: 1.4; color: var(--muted); }
@media (max-width: 640px) { .tile.grail { grid-column: span 3; } }

/* holy grail: notes search */
.ns-form input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  outline: none;
}
.ns-form input:focus { box-shadow: inset 0 0 0 1px #000; }
.ns-credit { font-size: 11px; color: var(--muted); margin: 6px 0 10px; }
.ns-credit a { color: var(--muted); text-decoration: underline; }
.ns-suggest { font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.ns-suggest button { color: var(--ink); padding: 0 2px; margin: 0 -2px; }
.ns-suggest button:hover { background: var(--accent); color: #fff; text-decoration: none; }
.ns-count { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.ns-item { padding: 10px 12px 10px 0; border-bottom: 1px solid #eee; }
.ns-meta { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.ns-text { font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ns mark { background: var(--accent); color: #fff; padding: 0 1px; }
.ns-more { margin: 12px 0; font-size: 12px; text-decoration: underline; }
.ns-heading { font-size: 13px; margin: 26px 0 12px; }

/* holy grail page: everything a bit bigger (by request) */
body[data-page="holygrail"] .ns-form input { font-size: 16px; padding: 10px 12px; }
body[data-page="holygrail"] .ns-credit { font-size: 13px; margin: 8px 0 12px; }
body[data-page="holygrail"] .ns-suggest { font-size: 13px; gap: 6px 14px; margin-bottom: 18px; }
body[data-page="holygrail"] .ns-count { font-size: 13px; margin-bottom: 8px; }
body[data-page="holygrail"] .ns-item { padding: 12px 14px 12px 0; }
body[data-page="holygrail"] .ns-meta { font-size: 13px; margin-bottom: 4px; }
body[data-page="holygrail"] .ns-text { font-size: 15px; line-height: 1.5; }
body[data-page="holygrail"] .ns-more { font-size: 14px; }
body[data-page="holygrail"] .empty { font-size: 13px; }

/* ---------- front page: white background, black text (by request) ----------
   Anything that was white for the grey background is switched to black so it still shows. */
body.landing-page { background: #fff; }
:root { --nardo: #fff; }                                         /* clock faces match the page */
.landing .date,
.landing .clock-label,
.landing .clock-time,
.landing .landing-links a { color: #000; }
.landing .landing-links a { -webkit-text-stroke: 0.45px #000; }  /* keeps the slightly-bolder weight */
.landing .landing-links a:hover,
.landing .landing-links a:focus-visible { color: #fff; -webkit-text-stroke: 0.45px #fff; }
.clock .face-ring, .clock .tick, .clock .tick-major { stroke: #000; }
/* chart markings */
.breaker rect { stroke: #000; }
.breaker text, .fvg text, .bsl text, .pos text { fill: #000; }
.bsl line { stroke: #000; }
.fvg rect { fill: #000; fill-opacity: .14; }
.pos .pos-entry { stroke: #000; }
/* front page list written like the clock labels (plain Courier, normal weight, no thickening) */
.landing .landing-links a,
.landing .landing-links a:hover,
.landing .landing-links a:focus-visible { -webkit-text-stroke: 0; font-weight: normal; font-family: var(--font); }
/* position tool: take-profit zone dark green at 20% (by request); the stop-loss zone stays grey */
.pos .pos-profit { fill: #1f5544; fill-opacity: .2; }
/* news side list: "futures" heading above NQ / SPX / DOW */
.side .side-head { font-weight: bold; color: var(--ink); margin-bottom: 2px; }
@media (max-width: 1100px) { .side .side-head { flex-basis: auto; } }
/* notes search: "definition" / "how it's used" labels on results */
.ns-kind { display: inline-block; background: #000; color: #fff; padding: 0 5px; margin-right: 8px; font-size: 11px; }

/* notes search: answer card */
.ans { border: 1px solid #000; padding: 14px 16px 12px; margin: 4px 0 22px; }
.ans .ns-kind { margin-bottom: 8px; }
.ans-title { font-size: 18px; margin: 6px 0 8px; }
.ans-lead { font-size: 15px; line-height: 1.55; margin-bottom: 10px; }
.ans-aka { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }
.ans ul { margin: 0 0 10px 18px; font-size: 14px; line-height: 1.5; }
.ans li { margin-bottom: 3px; }
.ans-part h4 { font-size: 13px; margin: 10px 0 4px; }
.ans-part p { font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
.ans-source { font-size: 12px; color: var(--muted); margin-top: 10px; border-top: 1px solid #eee; padding-top: 8px; }

/* notes search: concept links, typo notice, compare */
.ns-link { padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; cursor: pointer; }
.ns-link:hover { background: var(--accent); color: #fff; text-decoration: none; }
.ns mark .ns-link { color: inherit; }
.ns-fixed { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.ns-fixed b { color: var(--ink); }
.ans + .ans { margin-top: -8px; }
/* the setup's name inside the fvg box, just after the trade entry */
.fvg .setup-label { font-size: 13px; letter-spacing: 0; }
/* front page clocks a bit bigger (by request) */
.landing .clocks { --clock: 128px; gap: 72px; }
@media (max-width: 640px) { .landing .clocks { --clock: 96px; gap: 16px; } }

/* buy side liquidity labels under the line: fade in, don't ride along with the line */
.bsl .bsl-under { animation: breaker-label .35s ease-out calc(var(--d) + 300ms) both; transform: none; }

/* ---------- front page ticker tape: Wall Street style, scrolling left to right ---------- */
.ticker {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 24px;
  overflow: hidden;
  background: #000;
  z-index: 3;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.ticker.ready { opacity: 1; }
.ticker-track { display: flex; width: max-content; animation: ticker-ltr 90s linear infinite; }
.ticker-run { display: flex; }
.tk {
  font-family: var(--font);
  font-size: 12px;
  line-height: 24px;
  color: #e9e9e9;
  white-space: nowrap;
  padding: 0 22px;
  letter-spacing: .3px;
}
.tk b { color: #fff; margin-right: 4px; }
.tk i { font-style: normal; margin-left: 4px; }
.tk .up { color: #4fd18b; }
.tk .down { color: #ff6b6b; }
.tk .flat { color: #bbb; }
.tk-note { color: #9a9a9a; }
/* left to right: the doubled track starts shifted left by one copy and slides to 0 */
@keyframes ticker-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
/* keep the ticker pinned to the very top, out of the page flow
   (the ".landing > *" rule above would otherwise make it position: relative) */
.landing > .ticker { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }   /* very top of the screen */
/* the black bar shows straight away (no white strip while prices load); only the prices fade in */
.landing > .ticker { opacity: 1; margin: 0; }
.ticker .ticker-track { opacity: 0; transition: opacity .6s ease; }
.ticker.ready .ticker-track { opacity: 1; }
html, body { margin: 0; padding: 0; }
/* buy side + sell side liquidity labels slide in at the same moment */
.candles .bsl text.liq {
  opacity: 0;
  transform: none;
  animation: liq-in .55s ease-out var(--liq-in, 2s) both;
}
@keyframes liq-in { from { opacity: 0; transform: translateX(14px); } to { opacity: .9; transform: translateX(0); } }
.candles.still .bsl text.liq { animation: none; opacity: .9; }

/* trades: picture gallery */
.pics .pic { text-align: left; padding: 0; background: none; border: 0; cursor: zoom-in; }
.pics .pic:hover { text-decoration: none; }
.pics .thumb { aspect-ratio: 4 / 3; }
.pics .thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal-box.wide { max-width: min(1200px, 94vw); }
.pic-view { margin: 0; }
.pic-view img { display: block; max-width: 100%; max-height: 76vh; margin: 0 auto; }
.pic-view figcaption { margin-top: 8px; font-size: 13px; }
.pic-nav { display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; }

/* trades page: 3 pictures across, filling the screen width, each shown whole (by request) */
body[data-page="trades"] .stage,
body[data-page="trades"] .bottom-nav { max-width: min(1400px, 94vw); }
body[data-page="trades"] .panel { height: auto; min-height: 0; max-height: none; overflow: visible; }
body[data-page="trades"] .grid.pics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  padding-right: 0;
}
body[data-page="trades"] .pics .thumb { aspect-ratio: auto; background: none; }
body[data-page="trades"] .pics .thumb img { height: auto; object-fit: contain; }
body[data-page="trades"] .pics .pic { font-size: 13px; line-height: 1.35; }
body[data-page="trades"] .pics .pic .muted { font-size: 12px; }
@media (max-width: 760px) {
  body[data-page="trades"] .grid.pics { grid-template-columns: 1fr; gap: 22px; }
}
/* line the pictures up along the top, whatever their shape */
body[data-page="trades"] .grid.pics { align-items: start; }
body[data-page="trades"] .pics .pic { display: flex; flex-direction: column; justify-content: flex-start; align-self: start; }

/* ---------- index prices strip (TradingView widget) under the forex bar ---------- */
.landing { padding-top: 151px; }                         /* room for the two strips; everything shifts down together */
.landing > .ticker-tv {
  position: absolute; top: 24px; left: 0; right: 0; height: 30px;
  background: #000; overflow: hidden; z-index: 3;
  border-top: 1px solid #222;
}
.ticker-tv .tradingview-widget-container,
.ticker-tv .tradingview-widget-container__widget { height: 30px; }
.ticker-tv iframe { height: 46px !important; margin-top: -8px; }      /* trim the widget's built-in padding */
.landing > .ticker-tv-credit {
  position: absolute; top: 58px; left: 10px; z-index: 3;
  font-size: 10px; color: var(--muted); text-decoration: none;
}
.landing > .ticker-tv-credit:hover { text-decoration: underline; }
@media (max-width: 640px) { .landing { padding-top: 104px; } }
/* second strip the same 24px height as the forex bar: the widget is scaled to 80% and centred */
.landing > .ticker-tv { height: 24px; }
.ticker-tv .tradingview-widget-container,
.ticker-tv .tradingview-widget-container__widget { height: 24px; overflow: hidden; }
.ticker-tv iframe {
  height: 46px !important;
  width: 125% !important;                 /* 125% × 0.8 = full width after scaling */
  transform: scale(.8);
  transform-origin: 0 0;
  margin-top: -6px;                       /* centres the 36.8px-tall scaled row in 24px */
}
.landing > .ticker-tv-credit { top: 50px; }
.landing { padding-top: 145px; }
@media (max-width: 640px) { .landing { padding-top: 98px; } }

/* videos: YouTube thumbnails with a play button; "muted" tag on sound-off videos */
.vids .vid { text-align: left; padding: 0; background: none; border: 0; cursor: pointer; font-size: 11px; line-height: 1.3; }
.vids .vid:hover { text-decoration: none; }
.vids .thumb { aspect-ratio: 16 / 9; }
.vids .thumb img { width: 100%; height: 100%; object-fit: cover; }
.vids .play {
  position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center;
  padding-left: 3px;
}
.vids .vid:hover .play { background: #000; }
/* every video tile is the same plain card: black, with the site name in white */
.vids .thumb { background: #000; }
.vids .vid-card {
  color: #fff; font-family: var(--logo-font); font-weight: 800; font-style: italic;
  font-size: clamp(18px, 2.4vw, 30px); letter-spacing: -.5px; line-height: 1; text-align: center; padding: 0 12px;
}
.vids .play { inset: auto 10px 10px auto; margin: 0; width: 30px; height: 30px; font-size: 11px; background: rgba(255,255,255,.18); }
.vids .vid:hover .play { background: rgba(255,255,255,.35); }
.mute-tag { left: auto; right: 0; background: #000; }
.video-frame iframe, .video-frame #yt-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* bigger tiles: 3 across, like the trades page */
body[data-page="videos"] .stage, body[data-page="videos"] .bottom-nav { max-width: min(1400px, 94vw); }
body[data-page="videos"] .panel { height: auto; min-height: 0; overflow: visible; }
body[data-page="videos"] .grid.vids { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; padding-right: 0; }
body[data-page="videos"] .vids .vid { font-size: 13px; }
@media (max-width: 760px) { body[data-page="videos"] .grid.vids { grid-template-columns: 1fr; } }

/* videos: "watch on youtube" link in the player popup */
.yt-link { margin-left: 10px; text-decoration: none; }
.yt-link:hover { text-decoration: underline; }
.video-frame .empty { display: grid; place-items: center; height: 100%; margin: 0; color: #fff; }
.video-frame .empty a { color: #fff; }

/* line under the date (e.g. trades: "proof of trades with execution arrows") */
.page-sub { font-size: 13px; text-align: center; margin: 10px 0 0; }

/* achievements: certificates + payouts, 3 across like trades, shown whole */
body[data-page="achievements"] .stage,
body[data-page="achievements"] .bottom-nav { max-width: min(1400px, 94vw); }
body[data-page="achievements"] .panel { height: auto; min-height: 0; max-height: none; overflow: visible; }
body[data-page="achievements"] .grid.pics {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; padding-right: 0; align-items: start;
}
body[data-page="achievements"] .pics .thumb { aspect-ratio: auto; background: none; }
body[data-page="achievements"] .pics .thumb img { height: auto; object-fit: contain; }
body[data-page="achievements"] .pics .pic { font-size: 13px; line-height: 1.35; }
.pic-section { font-size: 24px; font-weight: bold; text-align: center; margin: 34px 0 16px; }
.pic-section:first-child { margin-top: 6px; }
@media (max-width: 760px) {
  body[data-page="achievements"] .grid.pics { grid-template-columns: 1fr; gap: 22px; }
}

/* achievements: payout screenshots in a gold diploma frame —
   polished gold moulding, a dark fillet, a black mat, and a gold liner round the picture */
body[data-page="achievements"] .pics.framed .thumb {
  background: #0c0c0c;
  padding: 26px;
  border: 14px solid #c9a227;
  border-image: linear-gradient(135deg, #f7e7a1 0%, #c9a227 22%, #8a6a12 45%, #f3d77a 62%, #b38b1d 80%, #f7e7a1 100%) 1;
  box-shadow:
    inset 0 0 0 2px #3b2c05,                              /* dark fillet where the gold meets the mat */
    inset 0 0 0 3px #e2c260,
    inset 0 0 18px rgba(0,0,0,.9),                        /* the mat sits a little below the frame */
    0 12px 26px rgba(0,0,0,.35);
}
body[data-page="achievements"] .pics.framed .thumb img {
  object-fit: contain;
  outline: 1px solid #c9a227; outline-offset: 5px;        /* gold liner round the picture */
}
.pics.framed .tile:hover .thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
/* accounts passed: the same diploma frame in polished chrome, with silver liners */
body[data-page="achievements"] .pics.framed.chrome .thumb {
  border-color: #c8ccd0;
  border-image: linear-gradient(135deg, #ffffff 0%, #b9bec4 20%, #5f656c 42%, #f4f6f8 60%, #8d939a 80%, #ffffff 100%) 1;
  box-shadow:
    inset 0 0 0 2px #1d2024,
    inset 0 0 0 3px #d9dde1,
    inset 0 0 18px rgba(0,0,0,.9),
    0 12px 26px rgba(0,0,0,.35);
}
body[data-page="achievements"] .pics.framed.chrome .thumb img { outline-color: #c8ccd0; }

/* videos: the same polished chrome diploma frame as "Accounts Passed",
   with a silver liner drawn inside the black mat round the card */
body[data-page="videos"] .vids .thumb {
  border: 14px solid #c8ccd0;
  border-image: linear-gradient(135deg, #ffffff 0%, #b9bec4 20%, #5f656c 42%, #f4f6f8 60%, #8d939a 80%, #ffffff 100%) 1;
  box-shadow:
    inset 0 0 0 2px #1d2024,
    inset 0 0 0 3px #d9dde1,                              /* silver fillet inside the moulding */
    inset 0 0 0 16px #0c0c0c,                             /* black mat */
    inset 0 0 0 17px #c8ccd0,                             /* silver liner round the card */
    0 12px 26px rgba(0,0,0,.35);
}
body[data-page="videos"] .vids .thumb .tag { top: 17px; left: 17px; }
body[data-page="videos"] .vids .thumb .mute-tag { left: auto; right: 17px; }
body[data-page="videos"] .vids .play { inset: auto 26px 26px auto; }
body[data-page="videos"] .vids .vid:hover .thumb { outline: 2px solid var(--ink); outline-offset: 3px; }

/* news: a wider calendar and headlines table (leaves room for the filter list on the left) */
body[data-page="news"] .stage, body[data-page="news"] .bottom-nav { max-width: min(920px, calc(100vw - 300px)); }
@media (max-width: 1100px) { body[data-page="news"] .stage, body[data-page="news"] .bottom-nav { max-width: var(--panel-w); } }

/* front page clocks: solid black faces with white hands */
.landing .clock .face { fill: #000; }
.landing .clock .face-ring { stroke: #000; }
.landing .clock .hand { stroke: #fff; }
.landing .clock .pin { fill: #fff; }
.landing .clock .quarter { stroke: #fff; stroke-width: 2; }

/* psychology: quotes, big and centred */
body[data-page="psychology"] .panel { height: auto; min-height: 0; overflow: visible; }
.psych-quote { margin: 40px auto 56px; max-width: 640px; text-align: center; }
.psych-quote blockquote {
  margin: 0; font-family: var(--logo-font); font-weight: 800; font-style: italic;
  font-size: clamp(26px, 4.2vw, 40px); line-height: 1.15; letter-spacing: -.5px;
}
.psych-quote figcaption { margin-top: 16px; font-size: 13px; color: var(--muted); }
.psych-rules { list-style: none; margin: 36px auto 0; padding: 0; text-align: center; font-size: 18px; line-height: 1.5; }
.psych-rules li + li { margin-top: 10px; }
.psych-rules + .psych-quote { margin-top: 44px; }