/* News pages (built from news-src/): the list rides the plugin list's design (ProductListScreen.css,
   .productCard in base.css), and this sheet adds only what the news needs. The help center loads it
   too, for the article's title, lead and text its pages share (.articleTitle, .articleLead,
   .articleBody). */

/* The list ------------------------------------------------------------------------------------ */

/* Closer than the plugin list's, so the newest article shows in the first screen. */
.newsScreen .productListHook {
  margin-bottom: 3.5rem;
}

.newsEmpty {
  text-align: center;
  color: var(--ink-2);
}

/* The lead and an article's plugin card wash their accent into the glass as an image over the
   glass color, so the stronger glass of .productCard's hover keeps it. */
.newsLead,
.articlePlugin {
  background-image: var(--news-wash);
}

@media (hover: hover) {
  .newsLead:hover,
  .articlePlugin:hover {
    background-image: var(--news-wash);
  }
}

/* Read article sits in the corner, as far in from the right edge as from the foot: the card's 2rem
   on the right, its 1rem and the words' 1rem below. */
.newsLead {
  --news-wash: radial-gradient(80% 120% at 100% 0%, rgba(var(--post-accent), 0.3) 0%, transparent 70%);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: none;
  gap: 3rem;
  padding: 1rem 2rem 1rem 1rem;
}

/* The date and Read article sit at the foot, level with the cover's. */
.newsLeadText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
}

.newsLead .newsLeadTitle {
  font: var(--md-sys-typescale-headline-large);
  text-wrap: balance;
}

.newsLead .newsLeadExcerpt {
  margin-top: 0;
  font: var(--md-sys-typescale-body-large);
}

/* The plugin on the left and Read article on the right edge, on a line of its own where the two
   do not fit. */
.newsLeadFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: auto;
}

/* Thirds, centered as the plugin list's cards are (ProductListScreen.css), so fewer leave no empty
   columns on their right; never under 21rem, where the plugin and Read article still share a line. */
.newsMore {
  padding: 4.5rem 0 0;
}

.newsMoreTitle {
  margin-bottom: 1.75rem;
  text-align: center;
  font: var(--md-sys-typescale-headline-medium);
}

.newsList {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), calc((100% - 3.5rem) / 3)));
  justify-content: center;
}

/* One padding all round, where a plugin's card keeps more at its foot (base.css), so Read article sits
   in the corner as far in from the right edge as from the foot, as the cover sits at the top. */
.newsList .productCard {
  padding: 1.25rem;
}

/* Over the tint base.css gives a plugin's art. */
.productCard .postCover {
  aspect-ratio: 16 / 10;
  background: rgb(var(--post-accent));
}

/* As a plugin's artwork grows under the pointer (base.css). */
.postCover svg {
  transition: transform var(--md-sys-motion-duration-extra-long) var(--md-sys-motion-easing-standard-decelerate);
}

@media (hover: hover) {
  .productCard:hover .postCover svg {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .productCard:hover .postCover svg {
    transform: none;
  }
}

/* The words keep to the top of their row, which the card stretches to its tallest neighbor's. */
.postText {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.75rem;
}

.postTitle {
  font: var(--md-sys-typescale-title-large);
  text-wrap: pretty;
}

/* A few lines invite, the article holds the rest, and a row of cards keeps one rhythm. */
.productCard .postExcerpt {
  margin-top: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.postDate {
  font: var(--md-sys-typescale-label-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Read article keeps to the right edge, beside the plugin an article names or alone. */
.postFoot {
  row-gap: 1rem;
}

.postFoot .button,
.newsLeadFoot .button {
  margin-left: auto;
}

/* The plugin's own color in place of the chip's tonal fill (css/expressive.css), the same on every
   article about it, whatever tone the article's cover takes (decided 2026-10-20, the owner). Text on
   an accent takes the dark scheme's ground (identity.md "Colors"), which color-scheme forces here. */
.tag.postTopic {
  color-scheme: dark;
  background: rgb(var(--product-accent));
  color: var(--bg);
}

/* Covers: the SVG from src/covers.ts, drawn in the cover ink on the accent (rgb(--post-accent)).
   Text on an accent takes the dark scheme's --bg, so the cover forces the dark scheme for it. */

.postCover {
  color-scheme: dark;
  --cover-ink: var(--bg);
  overflow: hidden;
  background: rgb(var(--post-accent));
}

.postCover img,
.postCover svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coverGrid line {
  stroke: var(--cover-ink);
  stroke-opacity: 0.14;
  stroke-width: 1.5;
}

.coverLine {
  fill: none;
  stroke: var(--cover-ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coverFill {
  fill: var(--cover-ink);
  opacity: 0.16;
}

.coverDot,
.coverBar {
  fill: var(--cover-ink);
}

.coverBarAlt {
  fill: var(--cover-ink);
  opacity: 0.45;
}

.coverOrbit {
  fill: none;
  stroke: var(--cover-ink);
  stroke-opacity: 0.35;
  stroke-width: 2;
  stroke-dasharray: 4 10;
}

.coverMoon {
  fill: var(--cover-ink);
  opacity: 0.85;
}

.coverCrater {
  fill: rgb(var(--post-accent));
  opacity: 0.55;
}

/* The article --------------------------------------------------------------------------------- */

.articleScreen {
  padding: 2.5rem 0 4rem;
}

/* The contents' rail and a reading column of about 75 characters a line. */
.articleWrap {
  max-width: 64rem;
}

/* The way back is the quiet pill with a leading arrow (.textPill.backLink, base.css), like the
   product page's. */
.articleScreen .backLink {
  margin-bottom: 2rem;
}

/* The cover in the drawings' own 4:3, so every one shows whole. */
.articleHero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  margin-bottom: 4rem;
}

.articleHead {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}

.articleMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.articleTitle {
  font: var(--md-sys-typescale-display-medium);
  text-wrap: balance;
}

/* The body-large role a size up, since the lead opens the article between its title and body. */
.articleLead {
  font: var(--md-sys-typescale-body-large);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.articleCover {
  aspect-ratio: 4 / 3;
  border-radius: var(--md-sys-shape-corner-xl);
  box-shadow: var(--md-sys-elevation-3);
}

/* An article of one section has no contents, and its column stands alone as wide as beside them. */
.articleLayout {
  display: grid;
  gap: 3rem;
  align-items: start;
}

.articleLayout:has(.articleContents) {
  grid-template-columns: 13rem minmax(0, 1fr);
}

.articleColumn {
  width: 100%;
  max-width: 48rem;
  justify-self: center;
}

/* The Markdown body: the body-large role a size up, with the looser leading of long reading. */

.articleBody {
  font: var(--md-sys-typescale-body-large);
  font-size: 1.125rem;
  line-height: 1.7;
  padding: 3rem;
  border-radius: var(--md-sys-shape-corner-xl);
}

.articleBody > * + * {
  margin-top: 1.2em;
}

/* A heading the contents or a search result lead to stops under the sticky nav, as the terms'
   sections do. */
.articleBody h2 {
  font: var(--md-sys-typescale-headline-small);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin-top: 2.2em;
  scroll-margin-top: 6rem;
}

.articleBody > h2:first-child {
  margin-top: 0;
}

.articleBody h2 + * {
  margin-top: 0.75em;
}

.articleBody h3 {
  font: var(--md-sys-typescale-title-medium);
  margin-top: 1.8em;
  scroll-margin-top: 6rem;
}

.articleBody p {
  color: var(--ink);
}

.articleBody strong {
  font-weight: 600;
}

.articleBody .articleNext {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2.5rem;
  padding-top: inherit;
  border-top: 0.0625rem solid var(--line);
}

/* Share sits midway between the rule and the panel's foot, the row inheriting the panel's padding,
   at the row's end as a card's trailing action, its words on the right content edge. */
.articleNext .textPill {
  margin: -0.75rem -1rem -0.75rem 0;
}

.articleBody ul,
.articleBody ol {
  padding-left: 1.4em;
}

.articleBody li + li {
  margin-top: 0.4em;
}

.articleBody code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0.1em 0.4em;
  border-radius: var(--md-sys-shape-corner-sm);
  background: var(--tint-surface);
}

.articleBody pre {
  padding: 1rem 1.25rem;
  border-radius: var(--md-sys-shape-corner-lg);
  background: var(--tint-surface);
  overflow-x: auto;
}

.articleBody pre code {
  padding: 0;
  background: none;
}

.articleBody blockquote {
  padding-left: 1rem;
  border-left: 0.125rem solid var(--accent);
  color: var(--ink-2);
}

/* Astro writes a picture's width and height on its tag, so its height follows the width the column
   narrows it to. */
.articleBody img {
  height: auto;
  border-radius: var(--md-sys-shape-corner-lg);
}

.articleBody hr {
  border: 0;
  border-top: 0.0625rem solid var(--line);
  margin: 2.5em 0;
}

.articleBody table {
  width: 100%;
  border-collapse: collapse;
}

.articleBody th,
.articleBody td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 0.0625rem solid var(--line);
}

.articleBody th {
  font: var(--md-sys-typescale-title-small);
  color: var(--ink-2);
}

.articleBody td {
  font: var(--md-sys-typescale-body-medium);
}

/* One link, as a news card is, so it lifts and presses as one (.productCard, base.css). */
.articlePlugin {
  --news-wash: radial-gradient(80% 120% at 0% 0%, rgba(var(--product-accent), 0.24) 0%, transparent 70%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem 2rem 1rem 1rem;
  border-radius: var(--md-sys-shape-corner-xl);
}

.articlePluginArt {
  width: 6rem;
  height: 6rem;
  border-radius: var(--md-sys-shape-corner-lg);
  box-shadow: var(--md-sys-elevation-2);
}

/* Beside the picture down to a phone's width, the button wrapping under them. */
.articlePluginText {
  display: grid;
  gap: 0.25rem;
  flex: 1 1 10rem;
}

.articlePlugin p {
  margin-top: 0;
}

.articleMore {
  padding: 1.5rem 0 2rem;
}

/* On a phone the rail would only push the text down; the headings still lead through it. */
@media (max-width: 56.25rem) {
  .newsLead {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 0.75rem 0.75rem 1.5rem;
  }

  .newsLeadText {
    padding: 0 0.75rem;
  }

  .newsLead .newsLeadTitle {
    font: var(--md-sys-typescale-headline-small);
  }

  .articleTitle {
    font: var(--md-sys-typescale-display-small);
  }

  .newsMore {
    padding-top: 3.5rem;
  }

  /* Two to a row on a tablet, where one would stretch a cover to half the screen; one on a phone. */
  .newsList {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  }

  .articleHero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
  }

  .articleLayout:has(.articleContents) {
    grid-template-columns: minmax(0, 1fr);
  }

  .articleContents {
    display: none;
  }

  .articleBody {
    font-size: 1.0625rem;
    padding: 1.25rem;
  }

  .articlePlugin {
    padding: 1rem;
  }

  /* On a phone the button falls under the words, where it spans the card rather than hang at its left. */
  .articlePlugin .button {
    flex: 1 1 100%;
  }
}

/* /news/subscribe/ — one column, centered, nothing to do but read the line and type an address. */

.subscribeScreen {
  padding: 5rem 0 6rem;
}

.subscribeScreen .wrap {
  max-width: 34rem;
  text-align: center;
}

.subscribeHook .heroTitle {
  font: var(--md-sys-typescale-display-medium);
}

@media (max-width: 56.25rem) {
  .subscribeHook .heroTitle {
    font: var(--md-sys-typescale-display-small);
  }
}

.subscribeLine {
  margin-top: 1rem;
  color: var(--ink-2);
}

/* The form is a pill with a button in it (base.css); centered, it needs the margin on both sides. */

.subscribeScreen .newsletterForm {
  margin: 1.75rem auto 0;
}

/* /news/confirmed/ — the answer to a link that was already followed somewhere else. */

.confirmedScreen {
  padding: 6rem 0 7rem;
}

.confirmedScreen .wrap {
  max-width: 30rem;
  text-align: center;
}

/* Images are blocks everywhere on this site, so the mark is centered by its margins, not by the text. */

.confirmedMark {
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
}

.confirmedTitle {
  font: var(--md-sys-typescale-display-small);
  margin-top: 1.25rem;
}

.confirmedLine {
  margin-top: 0.75rem;
  color: var(--ink-2);
}

.confirmedButtons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}