/* THE REFERENCE PAGES, in the new dress (30 Sept 2026): methods and sources, Sol for assistants, the embed
   builder and the page that is not here, over the kit (/sol.css). One sentence, then words at a reading
   width: cards and rows stand apart by a soft fill, never a rule, and code sits in a glass well with its
   own pill to copy it. */
.rh { padding: 92px 0 8px; text-align: center; }
.rh-words { width: var(--text); margin: 0 auto; }
.rh-eyebrow { font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); }
.rh-headline { margin-top: 12px; font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -.009em; color: var(--ink); text-wrap: balance; }
.rh-sub { max-width: 34em; margin: 22px auto 0; font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); text-wrap: balance; }
.rh-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.rh-chips:empty { display: none; }
.rh-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 980px; background: rgba(255, 255, 255, .14);
  font-size: 17px; line-height: 21px; font-weight: 500; letter-spacing: -.022em; color: var(--ink); text-decoration: none; transition: background-color .25s linear; }
.rh-chips a:hover { background: rgba(255, 255, 255, .22); }

/* a section: its headline, then its words */
.rsec { width: var(--text); max-width: 980px; margin: 96px auto 0; }
.rsec-head { margin-bottom: 26px; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.rsec-sub { margin: 36px 0 12px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: .009em; color: var(--ink); }
.rsec p { max-width: 42em; font-size: 19px; line-height: 30px; letter-spacing: .012em; color: rgba(255, 255, 255, .8); }
.rsec p + p { margin-top: 16px; }
.rsec a { color: var(--ink); text-underline-offset: .2em; }
/* a token is copied whole, so it never breaks at its hyphen (data-size, golden-morning) */
.rsec code { font: 500 .88em/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); white-space: nowrap; }

/* cards: a soft fill each, two across */
.rcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.rcard { padding: 30px 30px 32px; border-radius: var(--r); background: var(--bg-alt); }
.rcard h3 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: .009em; color: var(--ink); }
.rsec .rcard p { margin-top: 12px; font-size: 17px; line-height: 27px; letter-spacing: -.022em; }

/* rows: a name and what it does, a soft fill on every other one */
.rrows { margin: 0; padding: 0; list-style: none; }
.rrows li { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; gap: 4px 28px; padding: 16px 20px; border-radius: 14px; }
.rrows li:nth-child(odd) { background: var(--bg-alt); }
.rrows .rrow-name { font: 600 16px/24px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }
.rsec .rrows .rrow-what { font-size: 17px; line-height: 25px; letter-spacing: -.022em; color: var(--ink-2); }
/* rows whose names are words rather than code, and whose lines are read as prose: the privacy policy's
   services and periods, the support page's permissions (2 Oct 2026) */
.rrows-words .rrow-name { font: 600 17px/25px var(--font); letter-spacing: -.022em; }
.rsec .rrows-words .rrow-what { color: rgba(255, 255, 255, .8); }
/* a list inside running prose, at the paragraph's measure: a small dot before each item */
.rsec .rlist { max-width: 42em; }
.rsec .rlist li { position: relative; padding-left: 24px; font-size: 19px; line-height: 30px; letter-spacing: .012em; color: rgba(255, 255, 255, .8); }
.rsec .rlist li + li { margin-top: 8px; }
.rsec .rlist li::before { content: ""; position: absolute; left: 6px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .56); }
.rsec p + .rlist, .rsec .rlist + p, .rsec p + .rrows, .rsec .rrows + p, .rsec .rlist + .rrows, .rsec .rrows + .rlist { margin-top: 16px; }

/* code in a glass well, its pill under it */
.rsnip { margin: 18px 0 30px; }
.rcode { margin: 0; padding: 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, .08); overflow-x: auto;
  font: 500 14px/23px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); white-space: pre; }
.rcode.wraps { white-space: pre-wrap; word-break: break-all; }
.rcode:focus-visible, .rsnip button:focus-visible, .rpill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rpill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; padding: 10px 22px; border: 0; border-radius: 980px;
  background: rgba(255, 255, 255, .14); font: inherit; font-size: 17px; line-height: 21px; font-weight: 500; letter-spacing: -.022em; color: var(--ink);
  cursor: pointer; transition: background-color .25s linear; }
.rpill:hover { background: rgba(255, 255, 255, .22); }
.rpill[aria-pressed="true"] { background: rgba(255, 255, 255, .3); }

/* a short list of asks, each a soft tile */
.rasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rasks li { padding: 20px 22px; border-radius: 18px; background: var(--bg-alt); font-size: 17px; line-height: 25px; font-weight: 600; letter-spacing: -.022em; color: var(--ink); }

/* the embed builder: a city, what it shows, an evening and a size, then the embed itself as a reader's
   page would show it */
.rbuild-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rbuild-controls .rpill { margin-top: 0; }
.rbuild-sizes { margin-top: 12px; }
.rfield { position: relative; flex: 0 1 300px; min-width: 0; }
.rfield-show { flex-basis: 260px; }
/* the evening: a pill over the browser's own date picker, as the observations page sets one */
.rdate { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 48px; padding: 0 44px 0 20px; overflow: hidden; border-radius: 980px;
  background: rgba(255, 255, 255, .14); font-size: 17px; line-height: 21px; font-weight: 500; letter-spacing: -.022em; color: var(--ink); cursor: pointer; }
.rdate input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.rdate input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rdate:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.rfield select { width: 100%; min-height: 48px; padding: 0 44px 0 20px; border: 0; border-radius: 980px; background: rgba(255, 255, 255, .14);
  font: inherit; font-size: 17px; line-height: 21px; font-weight: 500; letter-spacing: -.022em; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.rfield select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rfield select option { color: #000; }
.rfield svg { position: absolute; right: 18px; top: 50%; width: 12px; height: 8px; margin-top: -4px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.rpreview { margin-top: 28px; padding: 22px; border-radius: var(--r); background: var(--bg-alt); }
.rpreview-note { margin-bottom: 14px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.016em; color: var(--ink-2); }

@media (max-width: 1068px) {
  .rh-headline { font-size: 48px; line-height: 52px; }
  .rsec-head { font-size: 34px; line-height: 40px; }
}
@media (max-width: 734px) {
  .rh { padding-top: 56px; }
  .rh-eyebrow { font-size: 17px; line-height: 21px; }
  .rh-headline { font-size: 34px; line-height: 40px; letter-spacing: .004em; }
  .rh-sub { font-size: 17px; line-height: 25px; }
  .rsec { margin-top: 64px; }
  .rsec-head { font-size: 28px; line-height: 34px; }
  .rsec p { font-size: 17px; line-height: 27px; }
  .rcards { grid-template-columns: 1fr; gap: 12px; }
  .rcard { padding: 24px 22px 26px; border-radius: 22px; }
  .rcard h3 { font-size: 21px; line-height: 27px; }
  .rsec .rcard p { font-size: 16px; line-height: 25px; }
  .rrows li { display: block; padding: 14px 16px; }
  .rsec .rrows .rrow-what { display: block; margin-top: 4px; font-size: 16px; line-height: 24px; }
  .rsec .rlist li { padding-left: 20px; font-size: 17px; line-height: 27px; }
  .rsec .rlist li::before { left: 4px; top: 11px; }
  .rcode { padding: 16px 18px; font-size: 13px; line-height: 21px; }
  .rfield, .rfield-show { flex-basis: 100%; }
  .rdate { flex: 0 1 auto; }
  .rpreview { padding: 14px; border-radius: 22px; }
}