/* The article page.
 *
 * The one page in the app that exists to be read rather than operated, so it
 * gets its own width and drops the .container card entirely: prose set at
 * 1200px runs about 160 characters a line, and comfortable reading is 60-70. */

.article-page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 32px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Reading progress. Sits directly under the fixed navbar, and is scaled rather
   than resized so it animates on the compositor and never triggers layout. */
.reading-progress {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 999;
  background-color: transparent;
  pointer-events: none;
}

.reading-progress-bar {
  height: 100%;
  background-color: var(--leaf);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Header */
.article-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Topic above date, each on its own line. Both keep the eyebrow's data face --
   they are still metadata -- but nothing has to fit beside anything. */
.article-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.article-title {
  margin: 0;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.back-link a {
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color var(--ease);
}

.back-link a:hover {
  color: var(--leaf);
}

/* The summary. No accent bar down the side -- it is the first thing on the
   page, which is emphasis enough. */
.article-summary {
  background-color: var(--leaf-lift);
  padding: 20px 22px;
}

.article-summary p {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
}

/* Body */
.article-body {
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--ink);
}

.article-body > *:first-child {
  margin-top: 0;
}

.article-body h2 {
  font-family: var(--font-display);
  margin: 40px 0 12px;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--ink);
}

.article-body h3 {
  font-family: var(--font-display);
  margin: 32px 0 10px;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--ink);
}

.article-body p {
  margin: 0 0 20px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.article-body li {
  margin-bottom: 8px;
}

.article-body code {
  background-color: var(--sunk);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: 0.85em;
  color: var(--ink);
}

.article-body pre {
  background-color: var(--sunk);
  padding: 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0 0 20px;
}

.article-body pre code {
  background-color: transparent;
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.article-body blockquote {
  border-left: 2px solid var(--rule);
  padding-left: 18px;
  margin: 0 0 20px;
  color: var(--ink-soft);
}

.article-body a {
  color: var(--leaf);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: var(--fs-base);
}

.article-body th,
.article-body td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-soft);
}

/* Tags are a set, not a sentence. They were eyebrow items, which carry a dot
   between consecutive siblings -- fine on one line, and on a second line it
   left a dot orphaned at the start of the row. They also inherited the
   eyebrow's nowrap-and-ellipsis, so a long tag was truncated for no reason.
   They take the pill from the kindle steps instead, which is already this
   app's shape for "one of several small labels" and wraps cleanly. */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  list-style: none;
}

.article-tag {
  padding: 3px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Reactions and share, at the end -- the first point at which the reader has
   anything to react to.
 *
 * One rule above and none below: everything that can follow this draws its own
 * top rule, and two hairlines 28px apart at the foot of the page read as a
 * mistake rather than as a border. */
.article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

/* Share sits with the reactions rather than across the footer from them. On a
   phone the footer stacked, and share came to rest as a bare 14px glyph on its
   own line under two bordered buttons -- something left over, not a control. */
.article-verdict-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.article-verdict-question {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The handoff: finishing one article gives you the next one in today's set. */
.handoff {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.handoff-count {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.handoff-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 10px 0;
}

.handoff-label {
  flex: 0 0 auto;
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leaf);
}

.handoff-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.handoff-link:hover .handoff-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .article-page {
    padding: 20px 16px 60px;
  }

  .article-title {
    font-size: var(--fs-xl);
  }

  /* Touch targets. The reactions were 32px tall, and share was smaller again. */
  .article-footer .reaction-button,
  .article-footer .share-button {
    min-height: 44px;
  }
}

/* The question no longer fits on the same line as three controls, so it takes
   its own and they line up underneath it. flex-wrap was already doing this;
   what it needed was for the controls to stop hugging the right edge. */
@media (max-width: 560px) {
  .article-verdict-actions {
    width: 100%;
    margin-left: 0;
  }
}