/* ==========================================================================
   REZALOGY — article.css
   Long-form styles: the table-of-contents rail and the article body.
   Loaded ONLY by the guide page — about 6.5KB that the home and the
   services page would otherwise download and never use.
   Depends on the tokens in brand.css and on the shared components in
   site.css, both of which must be linked first.
   ========================================================================== */

/* --- Long-form article ----------------------------------------------------
   Two columns on desktop: a sticky table of contents rail and the text. The
   rail is a <nav>, the mobile version is a native <details> so opening and
   closing costs no JavaScript at all — the only script here is the scroll-spy.
   -------------------------------------------------------------------------- */

.article {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

@media (max-width: 1000px) {
  .article { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* --- Table of contents ---------------------------------------------------- */

.toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  max-height: calc(100vh - var(--header-h) - var(--s-6));
  overflow-y: auto;
  padding-right: var(--s-2);
}

.toc__title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-3);
}

.toc__list { display: grid; gap: 0.15rem; }

.toc__link {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
  border-left: 1px solid transparent;
  padding-left: 0.7rem;
  margin-left: -0.7rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.toc__link b {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  padding-top: 0.15em;
}

.toc__link:hover { color: var(--text-dim); }

/* Scroll-spy state. The accent marks position in the document, which is the
   only job the red is doing on this page besides the CTA. */
.toc__link.is-active {
  color: var(--text);
  border-left-color: var(--red);
}
.toc__link.is-active b { color: var(--red); }

/* Mobile: a native disclosure. No JS, and it collapses out of the way. */
.toc-mobile {
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  margin-bottom: var(--s-6);
}

.toc-mobile > summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
}

.toc-mobile > summary::-webkit-details-marker { display: none; }

.toc-mobile > summary::after {
  content: "+";
  color: var(--red);
  font-size: 1rem;
  line-height: 1;
}
.toc-mobile[open] > summary::after { content: "\2212"; }

.toc-mobile .toc__list { padding-bottom: var(--s-4); }

@media (min-width: 1001px) { .toc-mobile { display: none; } }

/* Mirror of the rule above: below 1001px the sticky desktop rail must get
   out of the way, otherwise it and the <details> version both render and
   overlap the article text while scrolling. */
@media (max-width: 1000px) { .toc { display: none; } }

/* --- Article body --------------------------------------------------------- */

.longform { max-width: 68ch; }

.longform > * + * { margin-top: var(--s-4); }

.longform h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  max-width: 26ch;
  text-wrap: balance;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-strong);
}

.longform > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.longform h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  max-width: 32ch;
  text-wrap: balance;
  margin-top: var(--s-6);
}

.longform p { color: var(--text-dim); line-height: 1.75; }

.longform strong { color: var(--text); font-weight: 500; }

.longform em { font-style: italic; }

.longform a:not(.btn) {
  color: var(--text);
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
  transition: background var(--dur) var(--ease);
}
.longform a:not(.btn):hover { background: rgba(255, 59, 71, 0.10); }

.longform ul, .longform ol { display: grid; gap: 0.7rem; }

.longform li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  color: var(--text-dim);
  line-height: 1.7;
}

.longform ul > li::before {
  content: "\2014";
  color: var(--chrome-shadow);
}

.longform ol { counter-reset: step; }
.longform ol > li::before {
  counter-increment: step;
  content: counter(step) ".";
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-top: 0.28em;
}

/* A single sentence set large, used where the argument turns. */
.pull {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  padding-left: var(--s-4);
  border-left: 1px solid var(--red);
  margin-block: var(--s-6);
  max-width: 34ch;
}

/* --- Tables --------------------------------------------------------------- */

.tbl-wrap { overflow-x: auto; margin-block: var(--s-5); }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}

.tbl th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0 var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--hairline-strong);
  vertical-align: bottom;
}

.tbl td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-dim);
  line-height: 1.6;
  vertical-align: top;
}

.tbl td:first-child { color: var(--text); font-weight: 400; }
.tbl tr:last-child td { border-bottom: 0; }

/* --- Sources -------------------------------------------------------------- */

.sources { font-size: var(--step--1); color: var(--text-muted); }
.sources li { display: block; padding-block: var(--s-3); border-bottom: 1px solid var(--hairline); }
.sources li:last-child { border-bottom: 0; }
.sources b { color: var(--text); font-weight: 500; }
.sources p { margin-top: 0.35rem; line-height: 1.6; }