/* Shared styles for the Listing Camera guide pages (copied from the home page's inline styles) */
/* Sticky top bar, modeled on .nav */
.x-bar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 6px;
  border-radius: var(--r-pill);
  box-shadow: var(--hark-shadow);
  background: var(--fill-primary);
  color: var(--text-primary-on);
}
.x-bar .x-brand, .x-bar .x-bar__links a { color: var(--text-primary-on); }
.x-bar :focus-visible { outline-color: var(--fill-primary-on); }
.x-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding-right: 8px;
  font: var(--type-body-strong);
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.x-brand img { width: 34px; height: 34px; border-radius: 9px; }
.x-bar__links { display: flex; gap: 2px; }
.x-bar__links a {
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font: var(--type-label);
  text-decoration: none;
}
.x-bar__links a:hover { background: var(--hover-wash-primary-on); }
.x-bar .btn { border-radius: var(--r-pill); min-height: 36px; padding-inline: 16px; }
@media (max-width: 860px) { .x-bar__links { display: none; } }
@media (max-width: 599px) { .x-bar .btn { min-height: var(--tap); } }

/* FAQ accordion, hairline rows like a table */
.x-faq { border-top: 1px solid var(--stroke-secondary); max-width: 820px; }
.x-faq details { border-bottom: 1px solid var(--stroke-secondary); }
.x-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: var(--tap);
  padding: 16px 0;
  font: var(--type-body-strong);
  cursor: pointer;
  list-style: none;
}
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fill-tertiary);
  font: var(--type-label);
  transition: transform var(--dur-quick) var(--ease-out);
}
.x-faq details[open] summary::after { transform: rotate(45deg); }
.x-faq details p { padding: 0 44px 18px 0; color: var(--text-secondary); max-width: 68ch; }

/* Footer */
.x-foot-brand { display: flex; align-items: center; gap: 10px; }
.x-foot-brand img { width: 28px; height: 28px; border-radius: 7px; }
.x-foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Guide article */
.x-guide-head { display: grid; gap: 12px; max-width: 760px; }
.x-guide-head h1 { font: var(--type-display); letter-spacing: 0; }
.x-guide-head .x-lede { font-size: var(--size-prose); color: var(--text-secondary); max-width: 64ch; }
.x-byline { font-size: var(--size-small); color: var(--text-secondary); }
.x-crumbs { font-size: var(--size-small); color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 6px; }
.x-crumbs a { color: inherit; }
.x-article { max-width: 72ch; }
.x-article h2 { font: var(--type-heading); margin-top: 18px; }
.x-article h3 { font: var(--type-body-strong); margin-top: 8px; }
.x-article ul, .x-article ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.x-article p, .x-article li { line-height: 1.6; }
.x-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0; }
.x-figs figure { margin: 0; }
.x-figs img { width: 100%; height: auto; display: block; border-radius: var(--r-m); box-shadow: var(--hark-shadow); }
.x-figs figcaption, .x-figcap { font-size: var(--size-small); color: var(--text-secondary); padding-top: 8px; }
@media (max-width: 599px) { .x-figs { grid-template-columns: minmax(0, 1fr); } }
.x-note { padding: 18px 22px; border-radius: var(--r-m); background: var(--fill-tertiary); }
.x-cardlink { text-decoration: none; display: grid; gap: 8px; }
.x-cardlink:hover h3 { text-decoration: underline; }