/* =============================================================================
   RAYASA — آزمایشگاه
   The listing, the article, and the typography an article is read in.
   Everything here builds on tokens.css and adds no new colour values.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Tag filter
   -------------------------------------------------------------------------- */

.lab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}

.lab-tag {
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.lab-tag:hover {
  border-color: var(--line-brand);
  color: var(--text);
}

.lab-tag.is-active {
  border-color: transparent;
  background: var(--brand-600);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   Listing
   -------------------------------------------------------------------------- */

.lab-list {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 52rem) {
  .lab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lab-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, rgb(255 255 255 / 2.5%), transparent 55%),
    var(--surface-1);
  transition:
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.lab-card:hover {
  border-color: var(--line-brand);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .lab-card:hover { transform: none; }
}

/*
  The whole card is the link. Stretching the anchor over the card rather than
  wrapping it keeps the tag chips clickable in their own right — a card that
  swallows its own filter links is a card that cannot be used.
*/
.lab-card__link {
  text-decoration: none;
  color: inherit;
}

.lab-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xs);
  color: var(--text-dim);
}

/* A date is a Latin run in a Persian line; isolate it or the digits migrate. */
.lab-card__meta time { unicode-bidi: isolate; }

.lab-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--text);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out);
}

.lab-card__link:hover .lab-card__title { color: var(--brand-300); }

.lab-card__excerpt {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--text-muted);
}

.lab-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: auto;
}

.lab-empty {
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   Pager
   -------------------------------------------------------------------------- */

.lab-pager {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-12);
}

.lab-pager__count {
  font-size: var(--text-2xs);
  color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   Reading progress

   A scroll-driven animation, so it runs on the compositor and needs no scroll
   listener at all. Browsers without it simply never paint the bar, which is
   the right amount of nothing to lose.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {
  @keyframes lab-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .lab-progress {
    position: fixed;
    /*
      Above the header, which is z-index 60. Below it, the bar sits in the top
      two pixels of the viewport with the header painted over it — present in
      the DOM, correct in every computed style, and never once visible.
    */
    z-index: 70;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(to left, var(--brand-400), var(--accent-400));
    transform-origin: right center; /* RTL: growth starts at the start edge */
    animation: lab-progress linear both;
    animation-timeline: scroll();
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-progress { display: none; }
}

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

/*
  The header is `position: fixed`, so anything that starts a page has to reserve
  its height — every other page opener on the site does the same calc. A flat
  4rem here was twelve pixels short of the 4.75rem header, and the meta line
  slid underneath it.
*/
.lab-article {
  padding-block: calc(var(--header-h) + var(--space-12)) var(--space-12);
}

.lab-article__head {
  max-inline-size: 46rem;
  margin-inline: auto;
  margin-block-end: var(--space-12);
  text-align: center;
}

.lab-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xs);
  color: var(--text-dim);
}

.lab-article__meta a { color: var(--brand-300); text-decoration: none; }
.lab-article__meta time { unicode-bidi: isolate; }

.lab-article__title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-4xl);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.lab-article__standfirst {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-soft);
  text-wrap: pretty;
}

.lab-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-block-start: var(--space-6);
}

/* -----------------------------------------------------------------------------
   Prose

   The measure is the point. Persian at this size reads comfortably at about
   thirty-eight rem; wider and the eye loses the line it is returning to.
   -------------------------------------------------------------------------- */

.lab-prose {
  max-inline-size: 38rem;
  margin-inline: auto;
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-soft);
}

.lab-prose > * + * { margin-block-start: var(--space-6); }

.lab-prose h2,
.lab-prose h3 {
  margin-block-start: var(--space-12);
  color: var(--text);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.lab-prose h2 { font-size: var(--text-2xl); font-weight: 800; }
.lab-prose h3 { font-size: var(--text-xl); font-weight: 700; }

.lab-prose a {
  color: var(--brand-300);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

.lab-prose a:hover { color: var(--brand-200); }

.lab-prose ul,
.lab-prose ol {
  padding-inline-start: var(--space-6);
}

.lab-prose li + li { margin-block-start: var(--space-3); }

.lab-prose strong { color: var(--text); font-weight: 700; }

.lab-prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--brand-600);
  color: var(--text-muted);
}

.lab-prose img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--r-md);
}

.lab-prose hr {
  border: 0;
  border-block-start: 1px solid var(--line);
}

/* --- Code ---------------------------------------------------------------- */

/*
  Code is left-to-right inside a right-to-left article, and nothing else on the
  page has to be told so. Without an explicit direction the bidi algorithm
  reorders operators and brackets — `a[0] = b;` arrives as `;a[0] = b` — which
  is not a styling nicety, it is code that says something different.
*/
.lab-prose code,
.lab-prose pre {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
}

.lab-prose :not(pre) > code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-size: 0.85em;
  color: var(--accent-300);
}

.lab-prose pre {
  overflow-x: auto;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  text-align: left;
}

.lab-prose pre code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font-size: inherit;
}

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

/*
  A wide table must scroll inside itself rather than widening the article. The
  wrapper Markdig does not emit is replaced by letting the table scroll in place.
*/
.lab-prose table {
  display: block;
  overflow-x: auto;
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.lab-prose th,
.lab-prose td {
  padding: var(--space-3);
  border: 1px solid var(--line);
  text-align: start;
}

.lab-prose th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
}

/* --- Footnotes ----------------------------------------------------------- */

.lab-prose .footnotes {
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Neighbours
   -------------------------------------------------------------------------- */

.lab-neighbours {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--section-gap);
}

@media (min-width: 46rem) {
  .lab-neighbours {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lab-neighbour {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out);
}

.lab-neighbour:hover { border-color: var(--line-brand); }

.lab-neighbour__label {
  font-size: var(--text-2xs);
  color: var(--text-dim);
}

.lab-neighbour__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}