/* sightpane.com guides and the guides index, 2026-10-13.
   src/pages/sp-guides.mjs draws them on the shared pieces (the dusk band
   head, the app windows of pages/app.css, the FAQ rows and the closing).
   Only what is new lives here, .spg-. One long read, a quiet contents
   list on the left that stays in view and one column of about 66
   characters on the right, generous space between sections, hairlines
   instead of boxes. */

/* the mark in the nav and footer is Sightpane's own on these pages */
.sp-through { display: block; }

/* ---------- the head ---------- */
.spg-eye::before { content: none; }
.spg-eye a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; transition: color 150ms ease-out; }
.spg-eye a:hover { color: var(--tx); }
.spg-eye .spg-eye-mk { display: block; width: 16px; height: 16px; flex: none; color: #fff3f0; }
.spg-head h1 { display: block; max-width: 18em; }
.spg-head .spg-answer { max-width: 60ch; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.spg-date { margin: 20px 0 0; color: rgba(255, 255, 255, .62); font-size: 14px; }

/* ---------- the read ---------- */
.spg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px); gap: 64px; padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(48px, 5vw, 80px); }
.spg-toc { position: sticky; top: 104px; align-self: start; max-width: 260px; }
.spg-toc p { margin: 0 0 14px; color: var(--pd-dim); font-size: 13px; }
.spg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.spg-toc a { display: block; padding: 6px 0; color: var(--pd-dim); font-size: 14px; line-height: 1.4; text-decoration: none; transition: color 150ms ease-out; }
.spg-toc a:hover { color: var(--pd-tx); }

.spg-sec { scroll-margin-top: 104px; outline: none; }
.spg-sec + .spg-sec { margin-top: 72px; }
.spg-sec h2 { margin: 0 0 20px; color: var(--pd-tx); font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; }
.spg-sec > p, .spg-ul li { color: var(--pd-mid); font-size: 17px; line-height: 1.7; }
.spg-sec > p { margin: 0; }
.spg .spg-sec > * + * { margin-top: 18px; }
.spg .spg-sec > .spg-fig { margin-top: 32px; }
.spg .spg-sec > .spg-fig + * { margin-top: 32px; }
.spg-sec a { color: var(--pd-tx); text-decoration: underline; text-decoration-color: var(--pd-edge-2); text-underline-offset: 3px; }
.spg-sec a:hover { text-decoration-color: currentColor; }

.spg-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spg-ul li { position: relative; padding-left: 22px; }
.spg-ul li::before { content: ''; position: absolute; left: 3px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--pd-dim); }

/* steps, numbered hairline rows */
.spg-steps { list-style: none; margin: 0; padding: 0; }
.spg-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; padding: 22px 0; border-top: 1px solid var(--pd-edge); }
.spg-steps li:last-child { border-bottom: 1px solid var(--pd-edge); }
.spg-n { color: var(--pd-faint); font-size: 14px; font-variant-numeric: tabular-nums; }
.spg-steps h3 { margin: 0; color: var(--pd-tx); font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.spg-steps p { margin: 6px 0 0; color: var(--pd-mid); font-size: 16px; line-height: 1.6; }

/* the app window, the landing's scene at the column's width */
.spg-fig { aspect-ratio: 4 / 3; }
.spg-fig .ap-win { top: 11%; }

/* the comparison, a quiet table that scrolls on its own on a phone */
.spg-table { overflow-x: auto; border-radius: 16px; border: 1px solid var(--pd-edge); background: var(--pd-card); overscroll-behavior-x: contain; }
.spg-table:focus-visible { outline: 2px solid var(--pd-tx); outline-offset: 2px; }
.spg-table table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.spg-table th, .spg-table td { padding: 16px 18px; text-align: left; vertical-align: top; }
.spg-table thead th { color: var(--pd-dim); font-size: 13px; font-weight: 400; border-bottom: 1px solid var(--pd-edge); }
.spg-table tbody th { width: 30%; color: var(--pd-tx); font-weight: 500; }
.spg-table td { color: var(--pd-mid); }
.spg-table tbody tr + tr > * { border-top: 1px solid var(--pd-edge); }
.spg-table tr.is-us > * { background: var(--pd-card-hi); }

/* the questions, the site's FAQ rows at the column's width */

/* sources */
.spg-src > p { font-size: 15px; color: var(--pd-dim); }
.spg-src .spg-ul li { font-size: 15px; }

/* more guides */
.spg-more { margin-top: 88px; padding-top: 32px; border-top: 1px solid var(--pd-edge); }
.spg-more h2 { margin: 0 0 16px; color: var(--pd-dim); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.spg-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.spg-more li a, .spg-list li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 20px 24px; border-radius: 16px; background: var(--pd-card); border: 1px solid var(--pd-edge); color: var(--pd-tx); text-decoration: none; transition: border-color 200ms ease-out, background-color 200ms ease-out; }
.spg-more li a:hover, .spg-list li a:hover { border-color: var(--pd-edge-2); background: var(--pd-card-hi); }
.spg-more b, .spg-list b { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.spg-more li span, .spg-list-tx > span { grid-column: 1; color: var(--pd-dim); font-size: 15px; line-height: 1.5; }
.spg-more li i, .spg-list li i { grid-column: 2; grid-row: 1 / span 2; color: var(--pd-dim); font-style: normal; transition: translate 200ms ease-out, color 200ms ease-out; }
.spg-more li a:hover i, .spg-list li a:hover i { translate: 3px 0; color: var(--pd-tx); }
.spg-more > p { margin: 20px 0 0; }

/* ---------- the index ---------- */
.spg-hub-body { grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; }
.spg-list-sec { max-width: 880px; }
.spg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spg-list li a { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 26px 28px; }
.spg-list .spg-n { align-self: start; padding-top: 3px; }
.spg-list-tx { display: grid; gap: 6px; }
.spg-list li i { grid-column: 3; grid-row: 1; }

@media (max-width: 1000px) {
  .spg-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 56px; }
  .spg-toc { display: none; }
}
@media (max-width: 600px) {
  .spg-head .spg-answer { font-size: 17px; }
  .spg-sec + .spg-sec { margin-top: 56px; }
  .spg-sec h2 { font-size: 22px; }
  .spg-sec > p, .spg-ul li { font-size: 16px; line-height: 1.65; }
  .spg-steps li { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0; }
  .spg-steps h3 { font-size: 17px; }
  .spg-steps p { font-size: 15.5px; }
  .spg-fig { aspect-ratio: 4 / 5; }
  /* the comparison as stacked rows, each kind with its two lines under it */
  .spg-table { overflow: visible; }
  .spg-table table, .spg-table tbody, .spg-table tr, .spg-table th, .spg-table td { display: block; min-width: 0; width: auto; }
  .spg-table thead { display: none; }
  .spg-table tbody tr { padding: 18px 18px 6px; }
  .spg-table tbody tr + tr { border-top: 1px solid var(--pd-edge); }
  .spg-table tbody tr + tr > * { border-top: 0; }
  .spg-table tbody th { width: auto; padding: 0 0 10px; font-size: 16px; }
  .spg-table td { padding: 0 0 12px; }
  .spg-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--pd-dim); font-size: 13px; }
  .spg-table tr.is-us { background: var(--pd-card-hi); }
  .spg-table tr.is-us > * { background: none; }
  .spg-fig .ap-win { top: 14%; }
  .spg-more li a { padding: 18px; }
  .spg-list li a { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 20px 18px; }
  .spg-list li i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spg-toc a, .spg-eye a, .spg-more li a, .spg-list li a, .spg-more li i, .spg-list li i { transition: none; }
}