/* Desktop-only left rail table of contents for the EKR guide.
 *
 * The markup this styles does not exist in any template. js/ekr-toc.js builds
 * it from the rendered sections and inserts it into <main>, so with
 * JavaScript off none of these rules ever match and the page is untouched.
 *
 * Two independent gates decide whether the rail is on screen:
 *   .is-enabled  set by the script when the gutter left of the centred
 *                content is genuinely wide enough for the rail
 *   .is-visible  set while the reader is inside the stretch of page the TOC
 *                covers
 * The @media floor below is the hard one: under 1080px the rail is display:
 * none whatever the script thinks. Because the element is position: fixed it
 * never occupies layout space, so there is no reflow when it appears or goes.
 *
 * --ekr-toc-left and --ekr-toc-width are written by the script from its
 * measurement of the page. The values here are only fallbacks for the frame
 * before it runs.
 */

.ekr-toc {
  display: none;

  position: fixed;
  top: var(--ekr-toc-top, 112px);
  left: var(--ekr-toc-left, 20px);
  width: var(--ekr-toc-width, 200px);
  max-height: calc(100vh - var(--ekr-toc-top, 112px) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Under the fixed navbar (1000) and under the back-to-top button (100),
     which sits bottom right and never meets this. */
  z-index: 90;

  margin: 0;
  padding: 0.85rem 0.9rem 0.8rem;

  /* House card: cream panel, hairline frame, cobalt rule on top. The opaque
     background matters, the rail passes over a full bleed dark CTA band on
     its way down the page and the text has to stay readable there. */
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-cobalt);
  border-radius: 0;
  box-shadow: none;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

@media (min-width: 1080px) {
  .ekr-toc.is-enabled {
    display: block;
  }
}

.ekr-toc.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}

/* ---------- Label ----------------------------------------------------- */

.ekr-toc-label {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
}

/* ---------- Entries ---------------------------------------------------- */

.ekr-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ekr-toc;
}

.ekr-toc-item {
  counter-increment: ekr-toc;
  margin: 0;
  padding: 0;
}

/* The 2px left border runs the height of the list as a hairline track and
   turns cobalt on the active entry. That is the scroll-spy indicator. */
.ekr-toc-link {
  display: grid;
  grid-template-columns: 1.45rem 1fr;
  align-items: baseline;
  padding: 0.34rem 0 0.34rem 0.55rem;
  border-left: 2px solid var(--color-rule);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.38;
  color: rgba(15, 23, 42, 0.72);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ekr-toc-link::before {
  content: counter(ekr-toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(15, 23, 42, 0.32);
}

/* Headings on this page run long. Three lines is the budget, the full text
   stays available through the title attribute the script writes. */
.ekr-toc-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ekr-toc-link:hover {
  color: var(--color-cobalt);
  border-left-color: rgba(15, 23, 42, 0.3);
}

.ekr-toc-link:hover::before {
  color: var(--color-cobalt);
}

.ekr-toc-link:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 2px;
  color: var(--color-cobalt);
}

.ekr-toc-link.is-active {
  color: var(--color-cobalt);
  font-weight: 600;
  border-left-color: var(--color-cobalt);
}

.ekr-toc-link.is-active::before {
  color: var(--color-cobalt);
}

/* ---------- Anchor landing -------------------------------------------- */

/* Applied by the script to exactly the sections it links, so the fixed
   navbar does not cover the heading after a jump. Scoped to a class of our
   own rather than to section selectors owned by other stylesheets, which is
   why it needs stating at all: ekr-guide.css covers .prose-section[id] but
   not the calculator or the FAQ, which the rail also links. Same 96px so
   every entry lands identically. */
.ekr-toc-target {
  scroll-margin-top: 96px;
}

/* ---------- Motion and print ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ekr-toc,
  .ekr-toc.is-visible,
  .ekr-toc-link {
    transition: none;
  }
  /* The site sets html { scroll-behavior: smooth } globally, which also
     governs the jump from a TOC link. Opt out when the reader asked for
     less motion. */
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .ekr-toc {
    display: none !important;
  }
}