/* Shared chapter presentation for the PPX18 Change Log.
   Typography and colors inherit from /shared-design-system.css. */
:root{
  --chapter-heading-font:var(--rd-font-interface,Arial,Helvetica,sans-serif);
  --chapter-body-font:var(--rd-font-reading,Georgia,"Times New Roman",serif);
  --chapter-body-size:18px;
  --chapter-body-leading:1.65;
  --chapter-panel:var(--rd-dark-panel,#17202a);
  --chapter-panel-soft:var(--rd-dark-panel-soft,#19212b);
  --chapter-panel-deep:var(--rd-dark-panel-deep,#0c1421);
  --chapter-border:var(--rd-dark-border,#2b3541);
  --chapter-ink:var(--rd-dark-text,#f4f7f9);
  --chapter-copy:var(--rd-dark-text-soft,#d7dee7);
  --chapter-muted:var(--rd-dark-text-muted,#aeb8c4);
  --chapter-accent:var(--rd-accent,#91d438);
}

.chapter{color:var(--chapter-ink)}

.chapter h1,
.chapter .kicker,
.chapter .deck,
.chapter .status-pill,
.chapter .release-summary,
.chapter .notice,
.chapter .accordion-stack summary,
.chapter .category-heading,
.chapter button{font-family:var(--chapter-heading-font)}

.chapter .deck{font-size:20px!important;line-height:1.55}

.chapter .release-summary,
.chapter .notice{
  font-size:18px;
  line-height:1.6;
  color:var(--chapter-ink)!important;
}

.chapter .detail-body,
.chapter .detail-body p,
.chapter .detail-body li,
.chapter .update-list li,
.chapter .compare-release p,
.chapter .compare-release li{
  font-family:var(--chapter-body-font);
  font-size:var(--chapter-body-size)!important;
  line-height:var(--chapter-body-leading)!important;
  color:var(--chapter-copy)!important;
}

.chapter .detail-body h2,
.chapter .detail-body h3,
.chapter .detail-body h4{
  font-family:var(--chapter-heading-font);
  color:var(--chapter-ink)!important;
}

/* Dark chapter tabs and expanded panels always use light text. */
.chapter .accordion-stack details{
  color:var(--chapter-copy)!important;
  background:var(--chapter-panel-deep)!important;
  border-color:var(--chapter-border)!important;
}

.chapter .accordion-stack details>summary{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding:17px 54px 17px 20px;
  color:var(--chapter-ink)!important;
  background:var(--chapter-panel-soft)!important;
  border:0!important;
  border-left:4px solid var(--category,var(--chapter-accent))!important;
}

.chapter .accordion-stack summary>span{display:none!important}

.chapter .accordion-stack summary strong{
  font-family:var(--chapter-heading-font);
  font-size:18px!important;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--chapter-ink)!important;
}

.chapter .accordion-stack summary small{
  margin-top:5px;
  font-family:var(--chapter-heading-font);
  font-size:12px!important;
  line-height:1.45;
  color:var(--chapter-muted)!important;
}

.chapter .accordion-stack summary::after{border-color:var(--chapter-ink)!important}

.chapter .accordion-stack .detail-body{
  color:var(--chapter-copy)!important;
  background:var(--chapter-panel-deep)!important;
  border-top:1px solid var(--chapter-border)!important;
}

/* Release notes are readable bulleted lists, not individual cards. */
.chapter .update-list{
  margin:0;
  padding-left:1.45rem;
  list-style:disc outside;
}

.chapter .update-list li{
  display:list-item!important;
  margin:.55rem 0!important;
  padding:0!important;
  color:var(--chapter-copy)!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.chapter .update-list li::marker{color:var(--chapter-copy)}

/* Plain in-content subheadings. */
.chapter .detail-body h2.category-heading,
.chapter .detail-body h3.category-heading,
.chapter .detail-body h4.category-heading,
.chapter .detail-body .category-heading{
  display:block;
  width:auto;
  margin:26px 0 9px;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--chapter-ink)!important;
  font-family:var(--chapter-heading-font);
  font-size:16px!important;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.chapter .release-summary a,
.chapter .update-guide-link,
.chapter a{color:var(--lime-soft,#b3ed67)}

.chapter .release-summary a,
.chapter .update-guide-link{font-weight:800}

.chapter .install-guide-layout{margin:0}
.chapter .install-procedure p:last-child{margin-bottom:0}
.chapter .install-images{position:static}
.chapter .install-shot figcaption,
.chapter .release-visuals figcaption{font-family:var(--chapter-heading-font)}

.new-installation-chapter .new-installation-steps,
.simple-update-guide .update-instruction-stack{max-width:none}

.new-installation-chapter .update-guide-link{
  display:inline;
  padding:0;
  border:0;
  background:transparent;
  text-transform:none;
  letter-spacing:0;
  text-decoration:underline;
  cursor:pointer;
}

.new-installation-chapter .optional-install-detail{
  margin:22px 0;
  border:1px solid var(--chapter-border);
}

.new-installation-chapter .optional-install-detail>summary{
  color:var(--chapter-ink)!important;
  background:var(--chapter-panel-soft)!important;
}

.simple-update-guide .release-check{margin-top:28px;margin-bottom:0}

@media(max-width:900px){
  .chapter .install-guide-layout{grid-template-columns:1fr}
  .chapter .install-images{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
  .chapter .install-images{grid-template-columns:1fr}
}

/* Library Update Index: keep all body copy readable on dark cards. */
.library-index-chapter .library-choice-grid section,
.library-index-chapter .library-choice-grid h2,
.library-index-chapter .library-choice-grid p,
.library-index-chapter .library-choice-grid strong,
.library-index-chapter .notice,
.library-index-chapter .notice p,
.library-index-chapter .full-library-reminder,
.library-index-chapter .full-library-reminder p,
.library-index-chapter .tip,
.library-index-chapter .tip strong{
  color:var(--chapter-copy)!important;
}

.library-index-chapter .library-choice-grid h2{
  width:auto;
  margin:0 0 10px;
  padding:0!important;
  color:var(--chapter-ink)!important;
  background:transparent!important;
  border:0!important;
}

/* Give the two version-history links comfortable, senior-friendly spacing. */
.library-index-chapter .library-choice-grid a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  min-height:48px;
  margin:10px 0 0;
  padding:12px 18px!important;
  box-sizing:border-box;
  line-height:1.45!important;
  text-align:center;
  white-space:normal;
  border-radius:999px!important;
}

/* Each arrow follows its own details element, including nested accordions. */
.chapter .accordion-stack details>summary::after{
  transform:translateY(-70%) rotate(45deg)!important;
  transition:transform .18s ease;
}
.chapter .accordion-stack details[open]>summary::after{
  transform:translateY(-30%) rotate(225deg)!important;
}

/* Magazine-style screenshot rail for How to Update PPX18.
   Two smaller complete images balance the text instead of creating a tall empty column. */
.simple-update-guide .install-guide-layout{
  grid-template-columns:minmax(0,1fr) minmax(340px,420px);
  gap:30px;
  align-items:start;
}
.simple-update-guide .install-images{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  align-content:start;
  position:static!important;
}
.simple-update-guide .install-shot{
  min-width:0;
  margin:0;
}
.simple-update-guide .install-shot a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  background:#fff;
}
.simple-update-guide .install-shot img{
  display:block;
  width:100%!important;
  height:clamp(160px,16vw,230px)!important;
  max-height:230px!important;
  object-fit:contain!important;
}
.simple-update-guide .install-shot figcaption{
  padding:10px 11px;
  font-size:13px!important;
  line-height:1.4;
}
.simple-update-guide .install-shot figcaption strong{font-size:14px}

@media(max-width:1180px){
  .simple-update-guide .install-guide-layout{grid-template-columns:1fr}
  .simple-update-guide .install-images{
    grid-template-columns:repeat(2,minmax(220px,1fr))!important;
    margin-top:22px;
  }
}
@media(max-width:620px){
  .simple-update-guide .install-images{grid-template-columns:1fr!important}
  .simple-update-guide .install-shot img{height:auto!important;max-height:none!important}
}

/* Library guidance is body copy, not another layer of chapter cards. */
.library-index-chapter .notice,
.library-index-chapter .full-library-reminder,
.library-index-chapter .tip{
  display:list-item!important;
  list-style:disc outside;
  margin:0 0 20px 1.45rem!important;
  padding:0!important;
  color:var(--chapter-copy)!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:var(--chapter-body-font)!important;
  font-size:var(--chapter-body-size)!important;
  line-height:var(--chapter-body-leading)!important;
}

.library-index-chapter .notice>strong,
.library-index-chapter .full-library-reminder>strong{
  display:inline;
  color:var(--chapter-copy)!important;
  font-family:var(--chapter-body-font)!important;
  font-size:var(--chapter-body-size)!important;
  line-height:var(--chapter-body-leading)!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

.library-index-chapter .notice p,
.library-index-chapter .full-library-reminder p{
  margin:.3rem 0 0!important;
  color:var(--chapter-copy)!important;
}

/* AUTHORITATIVE CHANGE LOG THEME
   Every chapter, comparison panel, and sidebar card inherits these shared tokens.
   No page-specific palette may replace these surface or text colors. */
.chapter,
.chapter.update-chapter,
.chapter.new-installation-chapter,
.chapter.compare-chapter,
.chapter.library-index-chapter{
  color:var(--chapter-ink)!important;
  background:var(--chapter-panel)!important;
  border-color:var(--chapter-border)!important;
}

/* Generated Compare Versions content uses the same dark chapter surfaces. */
.compare-chapter .compare-results,
.compare-chapter .compare-summary,
.compare-chapter .compare-release,
.compare-chapter .advanced-warning{
  color:var(--chapter-copy)!important;
  background:var(--chapter-panel-deep)!important;
  border-color:var(--chapter-border)!important;
}

.compare-chapter .compare-summary h2,
.compare-chapter .compare-summary h3,
.compare-chapter .compare-summary h4,
.compare-chapter .compare-release h2,
.compare-chapter .compare-release h3,
.compare-chapter .compare-release h4,
.compare-chapter .advanced-warning>strong{
  color:var(--chapter-ink)!important;
}

.compare-chapter .compare-summary p,
.compare-chapter .compare-summary li,
.compare-chapter .compare-release p,
.compare-chapter .compare-release li,
.compare-chapter .advanced-warning p,
.compare-chapter .advanced-warning li,
.compare-chapter .compare-summary .downloads li{
  color:var(--chapter-copy)!important;
}

.compare-chapter .compare-summary .downloads li{
  background:transparent!important;
  border:0!important;
}

/* Sidebar version cards inherit one light-text rule.
   Status and category colors are accents only; they never change text to black. */
.rail button,
.rail button.install,
.rail button.current,
.rail button.current-release,
.rail button.previous,
.rail button.unreleased{
  color:var(--chapter-ink)!important;
  background-color:var(--chapter-panel-deep)!important;
  border-color:var(--chapter-border)!important;
  border-left-color:var(--category,var(--chapter-border))!important;
}

.rail button strong,
.rail button small,
.rail button em,
.rail button div,
.rail button.current strong,
.rail button.current small,
.rail button.current em,
.rail button.current-release strong,
.rail button.current-release small,
.rail button.previous strong,
.rail button.previous small,
.rail button.unreleased strong,
.rail button.unreleased small{
  color:var(--chapter-ink)!important;
}

.rail button small,
.rail button em{
  color:var(--chapter-muted)!important;
}

.rail button>span{
  color:var(--category,var(--chapter-muted))!important;
}