/* App page: the App Store's order of sections in the directory's own voice. Tokens only (see :root in style.css). */

/* breadcrumb */
.crumbs { font-size: var(--fs-13); margin: 0 0 var(--s4); color: var(--muted); }
.crumbs .sep { color: var(--faint); margin: 0 var(--s1); }

/* header */
.app-head {
  display: grid; grid-template-columns: var(--icon-hero) minmax(0, 1fr) auto; gap: var(--s5);
  align-items: start; margin: 0 0 var(--s5);
}
.app-head h1 { margin: 0 0 var(--s1); overflow-wrap: anywhere; }
.app-by { margin: 0 0 var(--s2); }
.app-by .sep { color: var(--faint); }
.verified { color: var(--ok); }
.verified:hover { color: var(--ok); }
.app-sum { font-size: var(--fs-17); color: var(--muted); max-width: 60ch; margin: 0; line-height: 1.45; }
.app-act { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 220px; }
.app-act .meta { margin: var(--s2) 0 var(--s1); }
.app-act .linkbtn { font-size: var(--fs-13); }

/* fact strip */
/* flex, not equal grid columns: a cell grows to its content first (Platforms is the long one), then the
   spare width is shared, so the platform list stays on one line wherever it fits */
dl.facts {
  display: flex; margin: 0;
  border-top: var(--line); border-bottom: var(--line); padding: var(--s4) 0;
}
dl.facts > div { flex: 1 1 auto; text-align: center; padding: 0 var(--s3); border-left: var(--line); min-width: 0; }
dl.facts .tok { white-space: nowrap; }
dl.facts > div:first-child { border-left: 0; }
dl.facts dt { font-size: var(--fs-13); color: var(--muted); margin: 0 0 var(--s1); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
dl.facts dd.v { font-size: var(--fs-17); font-weight: var(--fw-strong); line-height: var(--lh-tight); color: var(--text); }
dl.facts dd.s { font-size: var(--fs-13); color: var(--muted); margin-top: var(--s1); }

/* screenshots band */
.shots { background: var(--wash); padding: var(--s5) 0; margin: var(--s6) 0; }
.shots-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--s3); min-height: var(--ctl-h); }
.shots-title { font-weight: var(--fw-strong); margin: 0; }
.shots-nav { display: flex; gap: var(--s2); }
.shots-nav .btn { width: var(--ctl-h); padding: 0; }
.shots-nav svg { width: var(--s4); height: var(--s4); fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--s4)) / 2); gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.shelf::-webkit-scrollbar { display: none; }
.slide { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; scroll-snap-align: start; min-width: 0; }
.slide img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--wash);
  border: var(--line-ctl); border-radius: var(--r-media);
}
.slide img.loaded { background: var(--bg); }

/* body sections */
.sec.first h2 { margin-top: 0; }
.alt-line { color: var(--muted); }
.notice {
  background: var(--wash); border-left: 3px solid var(--caution); padding: var(--s3) var(--s4);
  margin: var(--s4) 0 0; max-width: var(--w-prose);
}
.notice p { margin: 0; }
.notice p + p { margin-top: var(--s2); }

/* What's New */
.wn-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2); }
.wn-ver { font-weight: var(--fw-strong); }
.wn-head .meta { white-space: nowrap; }
.notes { overflow-wrap: anywhere; }
.notes p, .notes ul { margin: 0 0 var(--s2); }
.notes ul { padding-left: var(--s5); }
.notes .nh { font-weight: var(--fw-strong); margin-top: var(--s3); }
.notes .nh:first-child { margin-top: 0; }
/* clamped: every block sits on the same 24px line grid, so the clip lands exactly after line 4 */
.notes.clamped { max-height: calc(4 * var(--lh) * var(--fs-15)); overflow: hidden; }
.notes.clamped > *, .notes.clamped .nh { margin: 0; }
.notes.clamped li, .notes.clamped p { line-height: var(--lh); }
.notes code { line-height: 1; }
.more-notes { margin: 0 0 var(--s4); }

/* disclosures (version history, all files) */
details.disc { margin: var(--s4) 0 0; border-bottom: var(--line); }
details.disc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) 0; border-top: var(--line); font-weight: var(--fw-strong);
}
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::before { content: "▸"; color: var(--muted); width: var(--s3); }
details.disc[open] > summary::before { content: "▾"; }
details.disc > summary:hover { color: var(--accent-hover); }
ul.hist { list-style: none; margin: 0; padding: 0; }
ul.hist li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; border-top: var(--line); }
ul.hist .hv { font-weight: var(--fw-strong); margin-right: var(--s2); }
ul.hist .hd { color: var(--muted); }
ul.hist .pre { color: var(--muted); font-size: var(--fs-13); margin-left: var(--s2); }

/* downloads */
table.cat.dl td { vertical-align: middle; }
table.cat.dl .c-act { width: 1%; white-space: nowrap; text-align: right; }
table.cat.dl .c-size { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
table.cat.dl .c-os { font-weight: var(--fw-strong); white-space: nowrap; }
table.cat.dl .sub { display: none; }
table.cat.dl .btn { height: var(--ctl-h); }
.files h3:first-child { margin-top: var(--s3); }
.files table.cat { margin-bottom: var(--s4); }
.fname { display: block; font-size: var(--fs-12); color: var(--faint); overflow-wrap: anywhere; }
.dl-note { font-size: var(--fs-13); color: var(--muted); margin: var(--s3) 0 0; }

/* information + links */
.info-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s6); }
dl.info { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); row-gap: var(--s5); margin: 0; }
dl.info dt { font-size: var(--fs-13); color: var(--muted); margin: 0 0 var(--s1); }
dl.info dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
dl.info .bio { display: block; font-size: var(--fs-13); color: var(--muted); margin-top: var(--s1); line-height: 1.45; }
ul.links { list-style: none; margin: 0; padding: 0; }
ul.links li { padding: var(--s3) 0; border-top: var(--line); }
ul.links li:first-child { border-top: 0; padding-top: 0; }

/* more by publisher */
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.more-item { display: grid; grid-template-columns: var(--icon-more) minmax(0, 1fr); gap: var(--s3); align-items: center; color: var(--text); }
.more-item:hover { color: var(--text); text-decoration: none; }
.more-item:hover .mi-name { text-decoration: underline; }
.mi-name { display: block; font-weight: var(--fw-strong); line-height: var(--lh-tight); }
.mi-kind { display: block; font-size: var(--fs-13); color: var(--muted); line-height: var(--lh-tight); }

/* lightbox */
dialog.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 100vh; overflow: visible;
  color: var(--on-scrim);
}
dialog.lightbox::backdrop { background: var(--scrim); }
dialog.lightbox :focus-visible { outline-color: var(--on-scrim); }
dialog.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
dialog.lightbox img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: var(--r-media); background: var(--bg); }
.lb-cap {
  background: var(--text); color: var(--on-scrim); font-size: var(--fs-15); padding: var(--s3) var(--s4);
  max-width: var(--w-prose); margin: var(--s3) auto 0; line-height: 1.45;
}
.lb-btn {
  position: fixed; width: calc(var(--s6) + var(--s2)); height: calc(var(--s6) + var(--s2));
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: 1px solid var(--on-scrim-line); border-radius: var(--r-ctl); background: transparent;
}
.lb-btn svg { width: var(--s5); height: var(--s5); fill: none; stroke: var(--on-scrim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: var(--s4); right: var(--s4); }
.lb-prev { left: var(--s4); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--s4); top: 50%; transform: translateY(-50%); }

/* 900 / 600 */
@media (max-width: 900px) {
  .shelf { grid-auto-columns: 80%; }
  .info-grid { grid-template-columns: 1fr; gap: 0; }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .app-head { grid-template-columns: var(--icon-hero) minmax(0, 1fr); gap: var(--s4); }
  .app-act { grid-column: 1 / -1; align-items: stretch; text-align: left; min-width: 0; }
  .app-act .btn-primary { width: 100%; }
  .app-act .linkbtn { align-self: flex-start; }
  dl.facts { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  dl.facts > div { text-align: left; border-left: 0; padding: var(--s3) 0; border-top: var(--line); }
  dl.facts > div:nth-child(-n+2) { border-top: 0; }
  dl.facts > div:nth-child(even) { padding-left: var(--s3); }
  dl.facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* a lone last cell spans, so its rule does too */
  .shelf { grid-auto-columns: 88%; }
  table.cat.dl .c-pkg, table.cat.dl .c-size { display: none; }
  table.cat.dl .sub { display: block; font-size: var(--fs-13); color: var(--muted); font-weight: var(--fw); white-space: normal; }
  table.cat.dl .c-os { white-space: normal; }
  .lb-prev, .lb-next { top: auto; bottom: var(--s4); transform: none; }
}