/*
 * Lemonize — documentation polish
 * Loaded after electric.css on the documentation pages only.
 * Adds rhythm between sections, frames the app screenshots and marks
 * the reader's position.
 */

/* ---------- section rhythm ---------- */
.docs-page .doc-shell > .doc-section + .doc-section > .container {
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid rgb(var(--border) / .12);
}

.docs-page .doc-section .doc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgb(var(--border) / .16);
  border-radius: 999px;
  background: rgb(var(--panel) / .7);
  color: rgb(var(--text-muted));
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.docs-page .doc-section .doc-kicker::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(90 120 0);
  content: "";
}

#theme-dark:checked ~ .page .doc-section .doc-kicker::before { background: rgb(var(--accent)); }

/* an h3 opens a sub-topic: give it a marker so the page stops reading as one slab */
.docs-page .doc-section h3 {
  position: relative;
  margin-top: clamp(30px, 3vw, 42px);
  padding-left: 18px;
}

.docs-page .doc-section h3::before {
  position: absolute;
  top: .34em;
  left: 0;
  width: 3px;
  height: .82em;
  border-radius: 2px;
  background: rgb(90 120 0);
  content: "";
}

#theme-dark:checked ~ .page .doc-section h3::before { background: rgb(var(--accent)); }

.docs-page .doc-procedure h3,
.docs-page .callout h3 { padding-left: 0; }
.docs-page .doc-procedure h3::before,
.docs-page .callout h3::before { display: none; }

/* ---------- real screenshots ---------- */
.docs-page .doc-shot {
  border: 1px solid rgb(var(--border) / .14);
  border-radius: 12px;
  background: rgb(var(--panel));
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 18px 40px -24px rgb(0 0 0 / 40%);
  overflow: hidden;
}

/* iPhone captures — real screens sit inside a restrained device outline so
   the documentation keeps the app chrome readable at a useful size. */
.docs-page .ios-doc-shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(26px, 3vw, 36px);
  align-items: start;
}

.docs-page .ios-iphone-shot {
  display: grid;
  gap: 16px;
  padding: 14px 14px 20px;
}

.docs-page .ios-iphone-frame {
  position: relative;
  width: min(100%, 252px);
  margin-inline: auto;
  padding: 7px;
  border: 8px solid #191814;
  border-radius: 36px;
  background: #191814;
  box-shadow: 8px 12px 0 rgb(22 19 14 / 18%);
}

.docs-page .ios-iphone-frame::before {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 1;
  width: 62px;
  height: 6px;
  border-radius: 99px;
  background: #191814;
  content: "";
  transform: translateX(-50%);
}

.docs-page .ios-iphone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
}

.docs-page .ios-iphone-shot figcaption {
  display: grid;
  gap: 7px;
  color: rgb(var(--text-muted));
  font-size: 13px;
  line-height: 1.5;
}

.docs-page .ios-iphone-shot figcaption strong {
  color: rgb(var(--text));
  font-size: 15px;
  line-height: 1.3;
}

@media (max-width: 680px) {
  .docs-page .ios-doc-shot-grid {
    grid-template-columns: 1fr;
  }

  .docs-page .ios-iphone-frame {
    width: min(100%, 270px);
  }
}

/* ---------- numbered procedure ---------- */
.docs-page .doc-procedure {
  border-radius: 12px;
  background: rgb(var(--panel) / .5);
}

.docs-page .doc-procedure li {
  border-left: 0;
  background: none;
}

.docs-page .doc-procedure li::before {
  position: absolute;
  top: 54px;
  bottom: -22px;
  left: 39px;
  width: 1px;
  background: rgb(var(--border) / .18);
  content: "";
}

.docs-page .doc-procedure li:last-child::before { display: none; }

.docs-page .doc-procedure-number {
  border-color: rgb(var(--border) / .22);
  background: rgb(var(--panel));
  box-shadow: 0 0 0 4px rgb(var(--surface));
}

/* ---------- callout ---------- */
.docs-page .callout {
  align-items: flex-start;
  border-color: rgb(var(--accent) / .34);
  border-radius: 12px;
  background: rgb(var(--accent) / .07);
}

/* ---------- defaults list ---------- */
.docs-page .defaults-list {
  border-top: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(var(--border) / .14);
}

.docs-page .defaults-list > div {
  padding: 14px 18px;
  border-bottom: 1px solid rgb(var(--border) / .1);
}

.docs-page .defaults-list > div:last-child { border-bottom: 0; }
.docs-page .defaults-list > div:nth-child(odd) { background: rgb(var(--border) / .022); }
.docs-page .defaults-list dt { font-size: 14px; }
.docs-page .defaults-list dd { font-size: 14.5px; }

/* ---------- sidebar ---------- */
/* a page's own sections, nested under it and shown only while you read that page.
   Before this the sidebar mixed pages and in-page anchors at the same level, across
   groups: settings.html had no page entry at all and lit up five scattered rows. */
.doc-menu .doc-sub {
  display: grid;
  gap: 1px;
  margin: 3px 0 9px 11px;
  padding-left: 9px;
  border-left: 1px solid rgb(var(--border) / .16);
}

.doc-menu .doc-sub a {
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 500;
  opacity: .78;
}

.doc-menu .doc-sub a:hover { opacity: 1; }


/* every sidebar entry pointing at the page you are reading, anchors included */
.doc-menu .doc-jump a.is-here {
  border-left: 2px solid rgb(90 120 0);
  padding-left: 9px;
  background: rgb(var(--border) / .09);
  color: rgb(var(--text));
}

.doc-menu .doc-jump a[aria-current="page"] { font-weight: 600; }

/* inside that nested list every row belongs to the current page, so repeating the
   "you are here" background on all five would just smear it. Needs (0,4,1) to beat
   the .is-here rule above. */
.doc-menu .doc-jump .doc-sub a.is-here {
  border-left: 0;
  padding-left: 9px;
  background: none;
  color: inherit;
}

.doc-menu .doc-jump .doc-sub a.is-here:hover { background: rgb(var(--border) / .05); }

#theme-dark:checked ~ .page .doc-menu .doc-jump a.is-here { border-left-color: rgb(var(--accent)); }

/* ---------- previous / next ---------- */
/* .doc-shell is a two-column grid (sidebar | content): an element appended by doc.js
   would otherwise land in the sidebar column. */
.doc-shell > .doc-pager {
  grid-column: 2;
  width: 100%;
}

.doc-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgb(var(--border) / .12);
}

.doc-pager a {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid rgb(var(--border) / .14);
  border-radius: 12px;
  background: rgb(var(--panel) / .5);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.doc-pager a:hover {
  border-color: rgb(var(--border) / .3);
  background: rgb(var(--panel));
}

.doc-pager .doc-pager-dir {
  color: rgb(var(--text-muted));
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.doc-pager .doc-pager-title {
  color: rgb(var(--text));
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

.doc-pager .doc-pager-next { text-align: right; }
.doc-pager a:only-child { grid-column: 1 / -1; max-width: 50%; }
.doc-pager .doc-pager-next:only-child { justify-self: end; }

@media (max-width: 620px) {
  .doc-pager { grid-template-columns: 1fr; }
  .doc-pager a:only-child { max-width: none; }
}

/* Current app screenshots stay readable and open at their native resolution. */
.docs-page .doc-screen-stack {
  display: grid;
  gap: 24px;
  margin-top: 28px;
}

.docs-page .doc-screen {
  margin: 24px 0;
}

.docs-page .doc-screen-stack .doc-screen {
  margin: 0;
}

.docs-page .doc-screen figcaption,
.docs-page .doc-image-note {
  padding: 16px 20px;
  color: rgb(var(--text-muted));
  font-size: 13px;
  line-height: 1.6;
}

.docs-page .doc-shot a {
  display: block;
  cursor: zoom-in;
}

.docs-page .doc-shot a:focus-visible {
  outline: 3px solid rgb(90 120 0);
  outline-offset: -3px;
}

.docs-page .doc-cloud-flow {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(0, 1.8fr);
  gap: 20px;
  align-items: center;
  margin-top: 28px;
}

.docs-page .doc-cloud-flow .ios-iphone-shot {
  grid-row: 1 / 3;
  margin: 0;
}

.docs-page .doc-cloud-flow .doc-screen {
  margin: 0;
  align-self: start;
}

.docs-page .doc-cloud-transfer {
  text-align: center;
  color: rgb(var(--text-muted));
}

.docs-page .doc-cloud-transfer strong {
  display: block;
  color: rgb(var(--text));
  font-size: 22px;
}

.docs-page .doc-cloud-transfer p {
  margin: 6px 0;
  font-size: 14px;
}

.docs-page .doc-cloud-transfer > span:first-child { display: none; }
.docs-page .doc-cloud-transfer > span { font-size: 28px; }

@media (max-width: 680px) {
  .docs-page .doc-cloud-flow { grid-template-columns: minmax(0, 1fr); }
  .docs-page .doc-cloud-flow .ios-iphone-shot { grid-row: auto; }
  .docs-page .doc-cloud-transfer > span:first-child { display: block; }
}