/* AI Age Clock. Uses the newsletter pages' existing brand tokens:
   --navy-deep, --accent-warm, --cream, --grey-warm-*, --border-strong,
   --font-display, --font-body. Adds no colours of its own. */

/* ---- Consumer / Enterprise toggle ---- */
.clk-toggle { display: inline-flex; gap: 0.75rem; }
.clk-toggle button {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  padding: 0 0 2px; border: none; background: none; cursor: pointer;
  color: var(--grey-warm-light); border-bottom: 2px solid transparent;
  transition: color 150ms ease;
}
.clk-toggle button:hover { color: var(--grey-warm-dark); }
.clk-toggle button.on { color: var(--navy-deep); font-weight: 600; }
/* the rule under the active label takes the colour of the series it selects */
.clk-toggle button[data-clk-mode="consumer"].on { border-bottom-color: var(--navy-deep); }
.clk-toggle button[data-clk-mode="enterprise"].on { border-bottom-color: var(--accent-warm); }

/* ---- Frame ---- */
.clk-rail { font-family: var(--font-body); padding: 1.75rem 0 1rem; }
.clk-rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.clk-rail-title {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 400;
  color: var(--navy-deep); letter-spacing: -0.01em;
}
.clk-rail-note {
  font-size: 0.8125rem; color: var(--grey-warm-mid); max-width: 700px;
  margin: 0.25rem 0 0; line-height: 1.5;
}

/* ---- Plot. Height and --rail-* are written inline by layoutRail. ---- */
.clk-rail-plot { position: relative; height: 160px; margin: 0.5rem 0 0.25rem; }
.clk-rail-line {
  position: absolute; top: var(--rail-top, 150px); left: 0; right: 0;
  height: 1px; background: var(--grey-warm-pale);
}
/* terminal tick: the live ages measure distance to the present, so the present
   needs a visible endpoint */
.clk-rail-end {
  position: absolute; right: 0; top: var(--rail-top, 150px);
  width: 1px; height: 9px; margin-top: -4px; background: var(--border-strong, #d4cec0);
}

/* ---- Marks ---- */
.clk-rail-mark { position: absolute; width: 0; }
.clk-rail-top {
  top: 0; height: calc(var(--rail-top, 150px) + 2px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
}
/* labels size to their own text so layoutRail measures real widths */
.clk-rail-label { width: auto; padding-bottom: 0.375rem; }
.clk-rail-gen, .clk-rail-age, .clk-rail-what { white-space: nowrap; }
/* a mark near the right edge hangs its label to the left. align-items:flex-end
   already does the shifting, so no transform here (it would double the shift). */
.clk-rail-flip { align-items: flex-end; }
.clk-rail-flip .clk-rail-label { text-align: right; padding-right: 0.5rem; }
.clk-rail-flip .clk-rail-stem, .clk-rail-flip .clk-rail-dot { align-self: flex-start; }

/* the generation name is the link to three-generations.html: direct labelling
   rather than a separate "read more" line */
.clk-rail-gen {
  display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grey-warm-mid);
  text-decoration: none; text-underline-offset: 2px;
}
.clk-rail-gen:hover { color: var(--navy-deep); text-decoration: underline; }
.clk-rail-age {
  font-family: var(--font-display); font-size: 1.375rem; color: var(--navy-deep);
  font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -0.02em;
}
.clk-rail-what { font-size: 0.6875rem; color: var(--grey-warm-mid); line-height: 1.4; }
.clk-rail-date { color: var(--grey-warm-light); }
.clk-rail-stem { width: 1px; height: 10px; background: var(--border-strong, #d4cec0); }

/* colour = series, fill = the selected view */
.clk-rail-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; background: transparent; }
.clk-dot-consumer { border: 1.5px solid var(--navy-deep); }
.clk-dot-enterprise { border: 1.5px solid var(--accent-warm); }
.clk-dot-consumer.is-selected { background: var(--navy-deep); }
.clk-dot-enterprise.is-selected { background: var(--accent-warm); }

/* ---- Narrow screens: too tight for a time axis, so collapse to a list ---- */
@media (max-width: 860px) {
  .clk-rail-plot { height: auto !important; }
  .clk-rail-line, .clk-rail-stem, .clk-rail-dot, .clk-rail-end { display: none; }
  .clk-rail-mark {
    position: static; width: auto; height: auto; display: block;
    border-top: 1px solid var(--grey-warm-pale); padding: 0.625rem 0;
  }
  /* undo any right-alignment the desktop layout pass applied */
  .clk-rail-flip { align-items: flex-start; }
  .clk-rail-flip .clk-rail-label { text-align: left; padding-right: 0; }
  .clk-rail-label { padding-bottom: 0; }
}