/* Record pages, lake pages, their lists and the neighborhood outlines: the public Atlanta site only (scripts/build.mjs leaves this file out of the
   club and the home site, except that the club's pages for the place-restricted records use it). It adds to site.css and uses its tokens, so light
   and dark follow the page. No script: the layout is CSS grid and the highlight of a cited source is :target. */
/* a text-only index: the name as the link, the record's own one-liner (or its date) under it, two lines at most */
.reclist{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));column-gap:44px;border-top:1px solid var(--rule)}
@media (max-width:420px){.reclist{grid-template-columns:minmax(0,1fr)}}
.reclist li{border-bottom:1px solid var(--line);min-width:0}
.reclist a{display:block;height:100%;padding:12px 0;color:var(--ink);text-decoration:none}
.reclist .nm{display:block;font-weight:650;font-size:18px;line-height:1.3;color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);text-underline-offset:.2em}
.reclist .sub{display:-webkit-box;margin-top:2px;font-size:15.5px;line-height:1.4;color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reclist a:hover .nm{text-decoration-color:currentColor;text-decoration-thickness:2px}
/* a lens hub: one row for each record, as columns (name, date or period, sources) with the confidence label, when it is not high, under the name;
   a phone keeps the name and sets the date and the source count on a second line */
.reclist.rows{display:block;margin-top:18px}
.reclist.rows a{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(9em,1fr) 12.5em;column-gap:24px;align-items:baseline}
.reclist.rows .when,.reclist.rows .srcs{font-size:16px;line-height:1.4;color:var(--muted);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
.reclist.rows .conf{grid-column:1 / -1;margin-top:2px;font-size:15.5px;font-style:italic;line-height:1.4;color:var(--muted)}
@media (max-width:719px){
  .reclist.rows a{display:block}
  .reclist.rows .when,.reclist.rows .srcs{display:inline;font-size:15.5px}
  .reclist.rows .when:not(:empty)::after{content:" · "}
  .reclist.rows .conf{display:block}
}
/* the Records page: the store in three numbers, then one card for each of the four modes with its own counts */
.recstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;max-width:var(--col);margin:26px 0 8px;padding:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.recstats div{display:flex;flex-direction:column-reverse;padding:14px 0 12px}
.recstats dt{font-size:16px;line-height:1.3;color:var(--muted)}
.recstats dd{margin:0;font-family:var(--mono);font-weight:700;font-size:clamp(26px,5vw,36px);line-height:1.15;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
ul.doors.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* the cards are h2 (the page's h1, then these); this sets one apart from the page's other h2s and gives it the look of the home site's h3 doors (site.css .door h3) */
ul.doors.four .door h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.01em;margin:2px 0 14px;padding:0 0 10px;border-top:0;border-bottom:2px solid var(--red);text-wrap:wrap}
@media (max-width:860px){ul.doors.four .door h2{margin-bottom:12px}}
ul.doors.four .tally{margin-bottom:8px;font-size:16px;line-height:1.45;color:var(--muted)}
ul.doors.four .tally .n{font-family:var(--mono);font-weight:700;color:var(--ink)}
/* a neighborhood's outline: a plain shape in the page's muted ink, north at the top */
.outline{display:block;width:100%;max-width:520px;height:auto;max-height:70vh;margin:6px 0 4px;color:var(--muted)}

/* ---------- a record's page and a lake's page: the text, and beside it the sources it rests on ----------
   One column on a phone: the text, then the Sources aside, then the related pages. From 960px up, two columns: the text (about two thirds) on the left,
   and on the right the aside, sticky just under the page header, scrolling on its own when it is taller than the screen. The citation numbers in the
   text link to the numbered sources (a.cite href="#sN"); the one a reader followed is the :target, set off with the selection color. */
.rec-main,.rec-after{min-width:0}
.rec-aside{min-width:0;margin:44px 0 0;padding:16px 20px 12px;background:var(--panel);border:1px solid var(--line)}
.rec-aside h2{margin:0 0 4px;padding:0 0 8px;border-top:0;border-bottom:2px solid var(--red);font-size:21px;letter-spacing:0}
.rec-aside .src{margin:6px 0 14px;padding:0 0 0 36px;border-top:0}
.rec-aside .src li{padding:8px 0 8px 6px;font-size:16.5px;line-height:1.45}
.rec-aside .src .muted{display:block}
.rec-aside .src li::after{left:-36px}
.rec-aside .src li:last-child::after{border-bottom:0}
.rec-aside .src li:target{background:var(--select);box-shadow:-36px 0 0 var(--select),20px 0 0 var(--select)}
.rec-aside #sources > p{margin:10px 0 14px;font-size:16.5px;line-height:1.45}
.rec-credit{margin-top:4px;padding-top:12px;border-top:1px solid var(--rule);font-size:16px;line-height:1.5;color:var(--muted)}
.rec-credit p{margin:0 0 2px}
.rec-credit ul.inline{margin:0;column-gap:1.4em}
.rec-credit ul.inline a{display:inline-block;padding:8px 0}
.rec-sure{margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.rec-sure p{margin:0 0 4px;font-size:16px;line-height:1.5;color:var(--muted)}
.rec-sure .tag{white-space:normal}
@media (min-width:960px){
  main.page > .rec-grid{display:grid;max-width:none;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);grid-template-rows:auto 1fr;grid-template-areas:"main aside" "after aside";column-gap:48px;align-items:start}
  .rec-main{grid-area:main}
  .rec-after{grid-area:after}
  .rec-aside{grid-area:aside;position:sticky;top:84px;margin-top:0;max-height:calc(100vh - 84px - 16px);overflow-y:auto}
}