/* Breadcrumbs */
.crumbs { display:flex; gap:.5rem; align-items:center; color:var(--muted); margin-bottom:.6rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }

/* Header */
.pd-hero { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1rem, 4vw, 2rem); align-items:center; }
@media (max-width: 900px){ .pd-hero { grid-template-columns: 1fr; } }

.pd-title { margin:.2rem 0 .2rem; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.pd-subtitle { margin:0 0 .6rem; color: var(--muted); }
.pd-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

.pd-cover { border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.pd-cover img { width: 100%; height: auto; display:block; }

/* Meta strip */
.pd-meta { display:grid; grid-template-columns: repeat(4,1fr); gap:.8rem; margin: 1.1rem 0 1rem; }
@media (max-width: 900px){ .pd-meta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pd-meta { grid-template-columns: 1fr; } }

.pd-meta-item { border:1px solid var(--border); border-radius: 12px; padding:.7rem .8rem; background: color-mix(in oklab, var(--surface) 88%, transparent); }
.pd-meta-label { display:block; font-size:.85rem; color: var(--muted); }
.pd-meta-value { font-weight: 600; }

/* Body */
.pd-body { display:grid; gap:.8rem; }
.pd-list { margin:.2rem 0 .6rem 1.1rem; }

/* Screenshots grid */
.pd-shots { display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; }
@media (max-width: 1000px){ .pd-shots { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .pd-shots { grid-template-columns: 1fr; } }
.pd-shot { border:1px solid var(--border); border-radius: 12px; overflow:hidden; background: color-mix(in oklab, var(--surface) 90%, transparent); }
.pd-shot img { width:100%; height:auto; display:block; }
.pd-shot figcaption { font-size:.9rem; color: var(--muted); padding:.5rem .6rem; }

/* Footer nav */
.pd-footer-nav { display:flex; justify-content:space-between; gap:.6rem; margin-top:1.2rem; }

/* GitHub wordmark sizing */
.icon-btn img {
  width: 110px;
  height: auto;
  /* no display here */
  vertical-align: middle;
}

/* Base visibility */
.gh-logo { display: inline-block; }
.gh-logo--dark { display: none; }

/* System-level dark (only when no manual override) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .gh-logo--light { display: none; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .gh-logo--dark  { display: inline-block; }
}

/* Manual overrides (theme toggle) */
html[data-theme="light"] .gh-logo--light { display: inline-block; }
html[data-theme="light"] .gh-logo--dark  { display: none; }

html[data-theme="dark"]  .gh-logo--light { display: none; }
html[data-theme="dark"]  .gh-logo--dark  { display: inline-block; }

/* App Store badge sizing */
.appstore-logo {
  width: 140px;   /* adjust width until it feels right */
  height: auto;
  vertical-align: middle;
}

/* Hide dark variant by default */
.appstore-logo--dark { display: none; }

/* System-level dark mode, unless overridden manually */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .appstore-logo--light { display: none; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .appstore-logo--dark  { display: inline-block; }
}

/* Manual overrides */
html[data-theme="light"] .appstore-logo--light { display: inline-block; }
html[data-theme="light"] .appstore-logo--dark  { display: none; }

html[data-theme="dark"]  .appstore-logo--light { display: none; }
html[data-theme="dark"]  .appstore-logo--dark  { display: inline-block; }