/* ===== ARTICLE PAGES: changelog, glossary, OID reference, press kit ===== */
/* Sheets under /css are served with max-age=60, must-revalidate, so edits reach visitors within a minute.
   Sizes come from the type scale in variables.css (DESIGN.md "Type scale and components"): h1 is the
   title step, an article h2 the section step, OID section titles the sub step, card titles the card step. */

.article { padding-top: calc(var(--nav-height) + var(--space-xl)); padding-bottom: var(--space-section); }
.article__inner { max-width: 78ch; }
.article__inner--wide { max-width: var(--max-width); }
.article__title {
  font-size: var(--type-title);
  font-weight: var(--type-title-weight);
  letter-spacing: var(--type-title-track);
  line-height: var(--type-title-leading);
  margin-bottom: var(--space-sm);
  text-wrap: balance;
}
.article__lead { font-size: var(--type-lead); line-height: var(--type-lead-leading); color: var(--text-muted); max-width: 70ch; margin-bottom: var(--space-md); }
.article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--text-small); color: var(--text-faint); margin-bottom: var(--space-xl); }
.article__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 3px; min-width: 24px; text-align: center; }
/* Same hover in every meta row, <p> or <nav>: without this, base.css `p a:hover` turned only the <p>
   rows red. Red is the underline, never the link text (DESIGN.md "Buttons and links"). */
.article__meta a:hover { color: var(--text-strong); text-decoration-color: var(--desk-red); }
/* Link rows at the end of a page (glossary) sit after the content, not before it. */
.article__meta--end { margin-top: var(--space-lg); margin-bottom: 0; }
/* Two link rows under the lead (OID group pages: related pages, then this page's sections) read as
   one block: 8px between them instead of a full --space-xl, which left the second row orphaned. */
.article__meta-group { margin-bottom: var(--space-xl); }
.article__meta-group > .article__meta { margin-bottom: 0; }
.article__meta-group > .article__meta + .article__meta { margin-top: var(--space-xs); }
.article__meta-label { font-size: var(--type-label); font-weight: var(--type-label-weight); color: var(--text-faint); padding-block: 3px; }

/* A heading outside .prose (press kit: fact sheet, assets, contact) gets the same scale and spacing as
   a prose h2, so every section of the page starts the same distance below the one before. The element
   default (base.css h2) supplies the section step. */
.prose h2, .article__h2 { margin: var(--space-xl) 0 var(--space-sm); }
.prose h3 { margin: var(--space-lg) 0 var(--space-xs); }

.prose { font-size: var(--type-body); line-height: var(--type-body-leading); color: var(--text-muted); }
/* Running text at about 70 characters per line, also inside the wide OID layout, where only the card
   grid and the tables need the full width. */
.article__inner--wide .prose { max-width: 70ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
/* reset.css removes list markers everywhere; prose lists need them back, or the indented items read as
   stray paragraphs (changelog). */
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0.3em 0; }
.prose li::marker { color: var(--text-faint); }
.prose a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-faint); }
.prose a:hover { text-decoration-color: var(--red); }
.prose strong { color: var(--text-strong); font-weight: 650; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; }
.prose :not(pre) > code { background: var(--surface-hover); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-strong); }
.prose pre { margin: 0 0 1.2em; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.prose pre code { font-size: inherit; background: none; border: 0; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { color: var(--text-strong); font-weight: 650; }
.prose blockquote { margin: 0 0 1em; padding: 4px 0 4px 16px; border-left: 3px solid var(--border); color: var(--text-subtle); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-lg) 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }

/* Call to action box at the end of a page. The button is the core .appstore-badge (cards.css). */
.cta-box {
  margin-top: var(--space-2xl);
  padding: var(--card-pad) clamp(18px, 3vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.cta-box__copy { flex: 1 1 22rem; min-width: 0; }
.cta-box__title {
  font-size: var(--type-sub);
  font-weight: var(--type-sub-weight);
  letter-spacing: var(--type-sub-track);
  line-height: var(--type-sub-leading);
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0 0 6px;
}
.cta-box__text { font-size: var(--type-small); line-height: var(--type-small-leading); color: var(--text-muted); margin: 0; }
/* On a phone the button runs the full width of the box, like the stacked product CTA buttons. */
@media (max-width: 559px) {
  .cta-box .appstore-badge { width: 100%; }
}

/* Card grid: OID groups, press assets, the "Go deeper" cards on the product page.
   The card, its title and its text are core (cards.css). :where() keeps this default at zero specificity, so
   the core column modifiers (.card-grid--2, .card-grid--3) still win although this sheet loads later. */
:where(.card-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: var(--space-md) 0; }
.card__meta { font-size: var(--type-label); color: var(--text-faint); margin-top: 10px; }

/* Data tables: OID reference */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--space-sm) 0 0; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; }
.data-table th { color: var(--text-faint); font-size: var(--type-label); font-weight: var(--type-label-weight); }
/* Long OIDs and camelCase names wrap inside their column instead of pushing it wider. The OID cell also
   carries <wbr> before each dot, so it breaks between arcs where it can. */
.data-table td:first-child { font-family: var(--font-mono); color: var(--text-strong); font-size: 13px; overflow-wrap: anywhere; }
.data-table td:nth-child(2) { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.data-table td:last-child { color: var(--text-muted); }
.data-table tr:target td { background: color-mix(in srgb, var(--text-strong) 7%, transparent); }
/* Same column widths in every table, so OID, name and description start at the same x in every section
   of a long page. Fixed layout takes the widths from the header row. Only where the table is a table:
   below 901px the rows stack (next rule) and the header is hidden. */
@media (min-width: 901px) {
  .data-table { table-layout: fixed; }
  .data-table th:nth-child(1) { width: 26%; }
  .data-table th:nth-child(2) { width: 24%; }
}
@media (max-width: 900px) {
  .data-table thead { display: none; }
  .data-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .data-table td { display: block; border: 0; padding: 2px 0; }
}
.oid-preset { margin-top: var(--space-xl); }
.oid-preset__title {
  font-size: var(--type-sub);
  font-weight: var(--type-sub-weight);
  letter-spacing: var(--type-sub-track);
  line-height: var(--type-sub-leading);
  color: var(--text-strong);
  margin: 0 0 4px;
}
.oid-preset__root { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); margin: 0 0 8px; overflow-wrap: anywhere; }
.oid-preset__desc { font-size: var(--type-small); line-height: var(--type-small-leading); color: var(--text-muted); margin: 0 0 var(--space-sm); }
/* "Back to top" after each section of a long OID page (HPE runs to about 12,000px). */
.oid-preset__top { margin: 12px 0 0; font-size: var(--text-small); text-align: right; }
.oid-preset__top a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 6px; }
.oid-preset__top a:hover { color: var(--text-strong); }

/* Changelog */
.release { border-top: 1px solid var(--border); padding: var(--space-lg) 0; }
.release__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.release__version {
  font-size: var(--type-sub);
  font-weight: var(--type-sub-weight);
  letter-spacing: var(--type-sub-track);
  line-height: var(--type-sub-leading);
  color: var(--text-strong);
  margin: 0;
}
.release__date { font-size: var(--text-small); color: var(--text-faint); }
/* Status pill: neutral. Red belongs to whole regions (desk, hero, footer), never to a small accent. */
.release__tag {
  font-size: var(--type-label);
  font-weight: var(--type-label-weight);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
}

/* Glossary */
.glossary { margin: var(--space-md) 0; }
.glossary__item { border-top: 1px solid var(--border); padding: 18px 0; }
.glossary__item:last-child { border-bottom: 1px solid var(--border); }
.glossary__term {
  font-size: var(--type-card);
  font-weight: var(--type-card-weight);
  letter-spacing: var(--type-card-track);
  line-height: var(--type-card-leading);
  color: var(--text-strong);
  margin: 0 0 6px;
}
.glossary__def { font-size: var(--type-body); line-height: var(--type-body-leading); color: var(--text-muted); margin: 0; }
.glossary__link { display: inline-block; margin-top: 4px; padding-block: 2px; font-size: var(--text-small); color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }
.glossary__index { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-small); margin-bottom: var(--space-md); }
.glossary__index a { color: var(--text-subtle); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 3px; }

/* Press kit. The assets run as a 2 x 2 grid (.card-grid--2): every card has the same 16:10 picture
   frame, so the icon card is as tall as the screenshot cards and the icon keeps its 128px. */
.press-asset__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--black);
  margin-bottom: 14px;
}
.press-asset__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.press-asset__frame img.press-asset__icon { width: 128px; height: 128px; object-fit: contain; }
.press-asset__file { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.press-download { margin-top: var(--space-md); }
.fact-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; font-size: var(--type-small); line-height: var(--type-small-leading); margin: var(--space-sm) 0 0; }
.fact-list dt { color: var(--text-faint); }
.fact-list dd { margin: 0; color: var(--text-strong); }
@media (max-width: 560px) { .fact-list { grid-template-columns: 1fr; gap: 2px; } .fact-list dd { margin-bottom: 10px; } }