/* Field Guide standard, v1 (Nov 12, 2026). The same file on every guide; fg-standard.mjs loads it last on every page.
   Tokens first: new CSS uses these names, never a literal size, weight, radius or grey. */
:root {
  /* type: ten steps, at most six on a page */
  --fg-t-caption: 12px; --fg-t-small: 14px; --fg-t-body: 16px; --fg-t-lead: 18px; --fg-t-title: 20px;
  --fg-t-stat: 24px; --fg-t-h1: 28px; --fg-t-h1-wide: 36px; --fg-t-display: 44px; --fg-t-hero: 60px;
  --fg-w-regular: 400; --fg-w-medium: 500; --fg-w-semibold: 600; --fg-w-bold: 700;
  /* shape and rhythm */
  --fg-r-small: 4px; --fg-r-control: 8px; --fg-r-card: 12px; --fg-r-pill: 999px;
  --fg-s-1: 4px; --fg-s-2: 8px; --fg-s-3: 12px; --fg-s-4: 16px; --fg-s-5: 24px; --fg-s-6: 32px; --fg-s-7: 48px; --fg-s-8: 64px;
  --fg-tap: 44px; --fg-measure: 72ch;
  /* the page width every centred container follows; it grows on wide screens (review, Nov 12: "all this empty space on the sides") */
  --fg-page: 1180px; --fg-page-read: 1180px;
  /* neutrals (the school colour stays on the mark) */
  --fg-ink: #1f1f1f; --fg-ink-2: #3d3d3d; --fg-secondary: #6b6b6b; --fg-line-strong: #dcdcdc; --fg-line: #e8e8e8; --fg-well: #f6f6f4; --fg-white: #fff;
}

.fg-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* One H1 everywhere: 26 on phones, 28 on tablets, 36 from 1024 px. Landing pages, the list-and-map pages and the
   long-form report keep their own display size; a new display page opts out with data-fg-display on <main>. */
html[data-fg-std] main h1 { font-weight: var(--fg-w-bold) !important; text-wrap: balance; }
html[data-fg-std] main h2 { text-wrap: balance; }
html[data-fg-std] main:not(.fl):not(.fl-home):not(.v2-list-page):not(.mf-main):not(.research-report):not([data-fg-display]) h1 { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -.015em; }
@media (min-width: 761px) {
  html[data-fg-std] main:not(.fl):not(.fl-home):not(.v2-list-page):not(.mf-main):not(.research-report):not([data-fg-display]) h1 { font-size: var(--fg-t-h1) !important; }
}
@media (min-width: 1024px) {
  html[data-fg-std] main:not(.fl):not(.fl-home):not(.v2-list-page):not(.mf-main):not(.research-report):not([data-fg-display]) h1 { font-size: var(--fg-t-h1-wide) !important; line-height: 1.12 !important; letter-spacing: -.02em; }
}
/* Text the browser would size on its own (13.33 px <small>) sits on the scale too. */
html[data-fg-std] main small { font-size: var(--fg-t-small); }
html[data-fg-std] main :is(sub, sup) { font-size: var(--fg-t-caption); }

/* Shared tables and opened rows: the name of the row is 16 px and its note 14; opened text reads at 16. */
html[data-fg-std] main table.ds3-ledger th[scope="row"] { font-size: var(--fg-t-body); line-height: 1.35; }
html[data-fg-std] main table.ds3-ledger th[scope="row"] small { font-size: var(--fg-t-small); line-height: 1.4; }
html[data-fg-std] main .fg-dets .in :is(p, li, dd) { font-size: var(--fg-t-body); line-height: 1.5; }

/* Breadcrumb: directly above the H1, in the H1's own container. The whole trail on desktop, the parent alone on phones. */
.fg-crumbs { margin: 0 0 2px; font-size: var(--fg-t-small); font-weight: var(--fg-w-medium); color: var(--fg-secondary); text-align: left; grid-column: 1 / -1; flex: 0 0 auto; width: 100%; }
/* When the title sits in a row with other things, the trail takes the row above it. */
:where(header, div, section, article, hgroup):has(> .fg-crumbs) { flex-wrap: wrap; }
/* App-like pages (the apartment list and map, the place finder, the full map, landing pages) open on the tool; the trail stays in the page's data. */
html[data-fg-std] main:is(.fl, .fl-home, .v2-list-page, .mf-main, .ds3-full-map, [data-fg-display]) .fg-crumbs { display: none; }
.fg-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fg-s-2); margin: 0; padding: 0; list-style: none; }
.fg-crumbs li { display: none; align-items: center; gap: var(--fg-s-2); min-width: 0; margin: 0; padding: 0; }
.fg-crumbs li:last-child { display: inline-flex; }
.fg-crumbs li:last-child::before { content: "\2039" / ""; font-size: var(--fg-t-lead); line-height: 1; color: var(--fg-secondary); }
html[data-fg-std] main .fg-crumbs a { display: inline-flex; align-items: center; min-height: var(--fg-tap); padding: 0; font-size: var(--fg-t-small); font-weight: var(--fg-w-medium); color: var(--fg-secondary); background: none; text-decoration: none; }
html[data-fg-std] main .fg-crumbs a:hover { color: var(--fg-ink); text-decoration: underline; text-underline-offset: 3px; }
html[data-fg-std] main .fg-crumbs + h1 { margin-top: 0; }
@media (min-width: 761px) {
  .fg-crumbs li { display: inline-flex; }
  .fg-crumbs li:last-child::before { content: none; }
  .fg-crumbs li + li::before { content: "/" / ""; font-size: var(--fg-t-small); color: var(--fg-secondary); opacity: .6; }
  html[data-fg-std] main .fg-crumbs a { min-height: 32px; }
}

/* "On this page": one row of section links on long reading pages. Scrolls sideways on phones. */
.fg-toc { margin: var(--fg-s-4) 0 var(--fg-s-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fg-toc::-webkit-scrollbar { display: none; }
.fg-toc ul { display: flex; gap: var(--fg-s-2); margin: 0; padding: 0 0 2px; list-style: none; white-space: nowrap; }
.fg-toc li { margin: 0; padding: 0; }
html[data-fg-std] main .fg-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-pill); background: var(--fg-white); font-size: var(--fg-t-small); font-weight: var(--fg-w-medium); color: var(--fg-ink); text-decoration: none; }
html[data-fg-std] main .fg-toc a:hover { border-color: var(--fg-ink); }
@media (min-width: 761px) { .fg-toc ul { flex-wrap: wrap; white-space: normal; } }
html[data-fg-std] main h2[id], html[data-fg-std] main section[id] { scroll-margin-top: 88px; }

/* Keyboard focus looks the same on every control. */
html[data-fg-std] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--fg-ink); outline-offset: 2px; border-radius: var(--fg-r-small); }

@media (prefers-reduced-motion: reduce) { html[data-fg-std] *, html[data-fg-std] *::before, html[data-fg-std] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* The header search is a real field (review, Nov 12): type in the pill, results appear under it. */
/* complete on its own, so it looks the same on a guide whose header never had the pill (.tech) */
/* The brand mark beside the wordmark is the favicon's drawing: a filled tile with a white letter and dot. The old
   marks were outlines, so any stroke a header sets on its mark is cleared. */
html[data-fg-std] svg.fg-mark { flex: none; stroke: none; }
html[data-fg-std] svg.fg-mark :is(g, rect, path, circle) { stroke: none; }
html[data-fg-std] :is(.ds3-brand, .gw-brand) svg.fg-mark { width: 26px; height: 26px; }
/* A chip row scrolls inside itself, but as a flex item it grew to the width of its chips, so the whole page
   scrolled sideways on phones (Nov 12: Lubbock's home was 548 px wide at 390, San Marcos's 484). */
html[data-fg-std] .v2-controls > .v2-chips { min-width: 0; max-width: calc(100% + 32px); }
form.ds3-mini-search.fg-search { position: relative; display: flex; align-items: center; gap: var(--fg-s-2); min-height: 46px; margin: 0; padding: 4px 5px 4px 18px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-pill); box-shadow: 0 3px 12px rgb(0 0 0 / 10%); background: var(--fg-white); font-size: var(--fg-t-small); cursor: text; }
form.fg-search button[type="submit"] i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ds3-brand, var(--fg-ink)); color: #fff; }
form.fg-search button[type="submit"] svg { width: 16px; height: 16px; }
form.fg-search:focus-within { border-color: var(--fg-ink); box-shadow: 0 0 0 1px var(--fg-ink), 0 3px 12px rgb(0 0 0 / 10%); }
form.fg-search input { flex: 1 1 auto; width: clamp(180px, 24vw, 320px); min-width: 0; height: 36px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: var(--fg-t-small); font-weight: var(--fg-w-medium); color: var(--fg-ink); appearance: none; -webkit-appearance: none; }
form.fg-search input::placeholder { color: var(--fg-secondary); opacity: 1; font-weight: var(--fg-w-regular); }
form.fg-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
html[data-fg-std] form.fg-search input, html[data-fg-std] form.fg-search input:focus, html[data-fg-std] form.fg-search input:focus-visible { outline: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }
form.fg-search button { flex: none; margin: 0; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; line-height: 0; }
.fg-search-panel { position: absolute; z-index: 80; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max(100%, min(560px, 92vw)); max-height: min(70vh, 560px); overflow: auto; padding: 6px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-card); background: var(--fg-white); box-shadow: 0 12px 32px rgb(0 0 0 / 14%); text-align: left; }
.fg-search-panel a[role="option"] { display: flex; align-items: center; justify-content: space-between; gap: var(--fg-s-4); min-height: var(--fg-tap); padding: 8px 12px; border-radius: var(--fg-r-control); color: var(--fg-ink); text-decoration: none; }
.fg-search-panel a[role="option"]:hover, .fg-search-panel a[aria-selected="true"] { background: var(--fg-well); }
/* the old pill styled every span inside it as a divided, muted label */
.fg-search-panel a span { display: grid; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; color: var(--fg-ink); }
.fg-search-panel a strong { font-size: var(--fg-t-body); font-weight: var(--fg-w-semibold); line-height: 1.3; color: var(--fg-ink); }
.fg-search-panel a small { display: flex; min-width: 0; font-size: var(--fg-t-small); color: var(--fg-secondary); }
.fg-search-panel a small b { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--fg-w-regular); }
/* the price is a <bdi>, not an <i>: the old pill draws every <i> inside it as a 36 px dark circle */
.fg-search-panel a small bdi { flex: none; white-space: pre; color: var(--fg-ink-2); }
.fg-search-panel a em { flex: none; font-style: normal; font-size: var(--fg-t-caption); font-weight: var(--fg-w-medium); color: var(--fg-secondary); }
.fg-search-panel mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fg-search-panel .fg-search-all { justify-content: center; font-size: var(--fg-t-small); font-weight: var(--fg-w-semibold); border-top: 1px solid var(--fg-line); border-radius: 0 0 var(--fg-r-control) var(--fg-r-control); margin-top: 4px; }
.fg-search-label { margin: 0; padding: 12px 4px 4px; font-size: var(--fg-t-caption); font-weight: var(--fg-w-semibold); color: var(--fg-secondary); }
.fg-search-none { margin: 0; padding: 14px 12px; font-size: var(--fg-t-small); color: var(--fg-secondary); }
@media (max-width: 760px) { form.ds3-mini-search.fg-search { display: none; } }

/* Phones: a search button in the masthead opens the same field as a full-screen sheet. */
.fg-search-open, .fg-search-close { display: none; }
@media (max-width: 760px) {
  .fg-search-open { display: inline-grid; place-items: center; flex: none; width: var(--fg-tap); height: var(--fg-tap); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg-ink); cursor: pointer; }
  .fg-search-open svg { width: 22px; height: 22px; }
  html.fg-search-on { overflow: hidden; }
  html.fg-search-on form.ds3-mini-search.fg-search { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: var(--fg-s-2); position: fixed; inset: 0; z-index: 400; min-height: 0; margin: 0; padding: max(12px, env(safe-area-inset-top, 0px)) 16px 24px; overflow: auto; border: 0; border-radius: 0; box-shadow: none; background: var(--fg-white); }
  html.fg-search-on[data-fg-std] form.fg-search input, html.fg-search-on[data-fg-std] form.fg-search input:focus, html.fg-search-on[data-fg-std] form.fg-search input:focus-visible { flex: 1 1 0; width: auto; height: 48px; padding: 0 16px !important; border: 1px solid var(--fg-ink) !important; border-radius: var(--fg-r-pill) !important; font-size: var(--fg-t-body); }
  html.fg-search-on form.fg-search button[type="submit"] { display: none; }
  html.fg-search-on .fg-search-close { display: inline-flex; align-items: center; flex: none; min-height: 48px; padding: 0 4px 0 8px; border: 0; background: none; font: inherit; font-size: var(--fg-t-small); font-weight: var(--fg-w-semibold); color: var(--fg-ink); cursor: pointer; }
  html.fg-search-on .fg-search-panel:not([hidden]) { display: block; position: static; transform: none; flex: 0 0 100%; width: 100%; max-height: none; margin-top: var(--fg-s-2); padding: 0; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  html.fg-search-on .fg-search-panel a[role="option"] { padding: 10px 4px; border-bottom: 1px solid var(--fg-line); border-radius: 0; }
  html.fg-search-on .fg-search-panel a em { display: none; }
}

/* The maker's photo where the "SB" initials were: same round crop, same box. */
img.fg-maker-photo { display: block; padding: 0; object-fit: cover; border-radius: 50% !important; background: var(--fg-well); color: transparent; flex: none; }

/* Wide screens: the page grows with the window, and running text keeps a readable line. */
@media (min-width: 1536px) { :root { --fg-page: min(1440px, calc(100vw - 144px)); --fg-page-read: 1320px; } }
@media (min-width: 1800px) { :root { --fg-page: min(1600px, calc(100vw - 240px)); --fg-page-read: 1440px; } }
/* only plain prose paragraphs: a classed <p> or an <li> is often a full-width row */
@media (min-width: 1536px) { html[data-fg-std] main :where(p:not([class]), blockquote) { max-width: var(--fg-measure); } }