/* The .tech design standard (design owner, November 11, 2026). One layer, loaded last
   on every Field Guide page, so each family lands on the same tokens, page edge, type
   scale and controls. The rules here are the standard: fix a family by deleting its
   local rule, not by adding a new one. See DESIGN_REFERENCES.md.

   Scale: H1 28/700 (26 on phones) · H2 20/700 · titles 16/600 · body 16/400 ·
   meta 14 · micro 12. Ink #1f1f1f, secondary #6b6b6b, lines #e8e8e8 and #dcdcdc,
   well #f6f6f4. Radii 12 (cards, photos, panels) and 8 (buttons, fields), pills for
   chips. Reading pages sit in one 1180 px column; phones have a 16 px gutter. */

/* ---------- 1. Tokens: the Field Guide values, in place of two near-identical sets ---------- */
html.gw-ds3:has(body[data-ds3-guide]) {
  --gw-neutral-ink: #1f1f1f;
  --gw-neutral-muted: #6b6b6b;
  --gw-neutral-hairline: #e8e8e8;
  --gw-neutral-border: #dcdcdc;
  --gw-neutral-surface: #f6f6f4;
  --gw-action-hover: #3d3d3d;
  --gw-focus: #1f1f1f;
  --gw-body: 16px;
  --gw-body-phone: 16px;
  --gw-lead: 16px;
  --fg-page: 1180px;
  --fg-gutter: 40px;
  /* Older housing pages: their teal and rust text becomes ink and gray. */
  --pd-bone: #1f1f1f;
  --pd-ash: #6b6b6b;
  --pd-faint: #6b6b6b;
  --product-ink: #1f1f1f;
}
html.gw-ds3:has(body[data-ds3-guide]) body { --pd-bone: #1f1f1f; --pd-ash: #6b6b6b; --pd-faint: #6b6b6b; --product-ink: #1f1f1f; }
/* Charts are ink and grays: darkest for A, lightest for F. */
html.gw-ds3.ut-courses:has(body[data-ds3-guide]) {
  --cp-a: #1f1f1f; --cp-b: #5a5a5a; --cp-c: #8f8f8f; --cp-d: #bdbdbd; --cp-f: #dcdcdc;
  --cp-signal: #1f1f1f; --cp-signal-text: #1f1f1f;
}
@media (max-width: 760px) {
  html.gw-ds3:has(body[data-ds3-guide]) { --gw-gutter: 16px; --fg-gutter: 16px; }
}

/* ---------- 2. Page edge: reading pages share one 1180 px column ---------- */
body[data-ds3-guide][data-gw-ds3-family] > main:not(.v2-prop):not(.v2-list-page):not(.cm-main),
body[data-ds3-guide].v2 > main:is(.v2-privacy, .v2-picks),
body[data-gw-ds3] > main.nf-main {
  box-sizing: border-box !important;
  width: min(var(--fg-page, 1180px), calc(100% - 2 * var(--fg-gutter, 40px))) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
/* Narrow pages keep their measure and start at the same left edge. */
body[data-ds3-guide].v2 > main:is(.v2-privacy, .v2-picks) > * { max-width: 760px; }
body[data-ds3-guide] main > article.cp { margin-inline: 0 !important; }
body[data-ds3-guide] .guide-checked,
body[data-ds3-guide] .guide-end-notes {
  width: min(var(--fg-page, 1180px), calc(100% - 2 * var(--fg-gutter, 40px)));
  padding-inline: 0;
}
body[data-ds3-guide] .v2-foot-in,
body[data-ds3-guide] .v2-foot-base { max-width: var(--fg-page, 1180px); padding-inline: 0; width: calc(100% - 2 * var(--fg-gutter, 40px)); box-sizing: border-box; }

/* ---------- 3. Type: six sizes ---------- */
body[data-ds3-guide] { color: var(--gw-ink); }
html.gw-ds3 body[data-ds3-guide]:not([data-gw-ds3="home"]) main h3 {
  font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.3 !important;
}
/* Small group labels inside lists and panels stay labels. */
html.gw-ds3 body[data-ds3-guide] main :is(.rp-row-in, .v2-row-in, .cp-flow-col) h3,
html.gw-ds3 body[data-ds3-guide] main :is(h3.cl-h3, .rp-view > h4) { font-size: 14px !important; font-weight: 600 !important; }
html.gw-ds3 body[data-ds3-guide] main :is(.mccombs-reading, .transfer-tool) h4 { font-size: 16px !important; font-weight: 600 !important; }
/* "In this guide" is a label, not a section heading. */
html.gw-ds3 body[data-ds3-guide] main :is(.query-rail, .mccombs-rail, nav) > h2 {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important; line-height: 1.5 !important;
  text-transform: uppercase; color: var(--gw-muted) !important;
}
/* Reading text: 16 on a 1.6 line, in every article, guide and older housing page. */
body[data-ds3-guide] :is(.query-reading, .mccombs-reading, .guide-reading, .decision-main, .profile-main, .student-main) { font-size: 16px !important; line-height: 1.6 !important; }
body[data-ds3-guide] :is(.query-reading, .mccombs-reading, .decision-main, .profile-main, .student-main) :is(p, li, dd, summary, th, td) { font-size: inherit; line-height: inherit; }
body[data-ds3-guide] main :is(.query-reading, .mccombs-reading) :is(details > summary, tr > th, th > a, h4),
body[data-ds3-guide] main :is(.query-degree-school > summary, .mccombs-dek, .mccombs-dek strong, .query-sources > p, .wc-controls > button, .wc-profile-link span, .nf-row-title, .cp-credit > h3) { font-size: 16px !important; }
body[data-ds3-guide] main :is(.query-tool, .transfer-tool) > h3 { font-size: 16px !important; }
/* Nothing under 12 px. */
body[data-ds3-guide] main :is(.chapter-index, .chapter-number, .small-label, .guide-source-disclosure > summary, .cp-bar-pct, .cp-history-y > span, .ds3-property-cover > figcaption),
body[data-ds3-guide] main :is(.guide-main, .profile-main, .student-main) :is(li > span, li > time, span > time, summary > span:not(.topic-toggle), td > a) { font-size: 12px !important; }
body[data-ds3-guide] main .hub-title > small { font-size: 14px; }
/* One family. */
body[data-ds3-guide] main :is(h1, h2, h3, h4, p, li, dt, dd, th, td, summary, label, input, select, button, small, time, figcaption, span, a, strong) { font-family: var(--gw-font, Figtree, system-ui, sans-serif) !important; }
body[data-ds3-guide] main :is(.student-fact-meta, .student-fact-meta span) { letter-spacing: 0; text-transform: none; font-size: 12px; }
/* Links in running text: ink, underlined. */
body[data-ds3-guide] main :is(p, dd) > a:not([class]) { color: var(--gw-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 4. Buttons: one dark primary, one bordered secondary ---------- */
body[data-ds3-guide] main :is(a.query-primary, .primary-button, a.cp-button, .query-tool > button, .ut-tool-actions > button:first-child, .v2-btn-dark, a.rp-btn) {
  box-sizing: border-box !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px !important; padding: 0 20px !important;
  border: 1px solid var(--gw-ink) !important; border-radius: 8px !important;
  background: var(--gw-ink) !important; color: #fff !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important;
  text-decoration: none !important; text-align: center;
}
body[data-ds3-guide] main :is(a.query-primary, .primary-button, a.cp-button, .query-tool > button, .ut-tool-actions > button:first-child, .v2-btn-dark, a.rp-btn):hover { background: var(--gw-action-hover) !important; border-color: var(--gw-action-hover) !important; }
body[data-ds3-guide] main a.query-primary { padding-block: 10px !important; }
body[data-ds3-guide] main :is(.secondary-button, .ut-tool-actions > button:not(:first-child), .v2-btn-light, .v2-more, .rp-more) {
  box-sizing: border-box !important;
  min-height: 48px !important; padding: 0 20px !important;
  border: 1px solid var(--gw-ink) !important; border-radius: 8px !important;
  background: #fff !important; color: var(--gw-ink) !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important;
}
body[data-ds3-guide] main :is(.secondary-button, .ut-tool-actions > button:not(:first-child), .v2-btn-light, .v2-more, .rp-more):hover { background: var(--gw-card) !important; }
body[data-ds3-guide] main .query-tool-fields > button { min-height: 48px; border-radius: 8px; border-color: var(--gw-rule-strong); font-size: 14px !important; font-weight: 600 !important; }

/* ---------- 5. Chips and section links: 44 px pills, 14/600 ---------- */
body[data-ds3-guide] main :is(.v2-chip, .rp-chip, .fgt-chip, .ut-task-nav > a, .cp-toc > a, .cm-lenses > .gw-chip, .index-letters > a) {
  box-sizing: border-box !important; min-height: 44px !important;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px !important; border-radius: 999px !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap;
}
body[data-ds3-guide] main :is(.ut-task-nav > a, .cp-toc > a, .cm-lenses > .gw-chip, .index-letters > a) { border: 1px solid var(--gw-rule-strong) !important; color: var(--gw-ink) !important; background: #fff; text-decoration: none; }
body[data-ds3-guide] main .index-letters > a { min-width: 44px; padding: 0 !important; }

/* ---------- 6. Fields: 48 px tall, 8 px corners ---------- */
body[data-ds3-guide] main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.rp-find input):not(.dgm-search input), select, textarea) {
  box-sizing: border-box; min-height: 48px; border-radius: 8px !important; font-size: 16px !important;
}
body[data-ds3-guide] main :is(.mccombs-reading, .transfer-tool) select { border: 1px solid var(--gw-input-line); padding-inline: 12px; background-color: #fff; }

/* ---------- 7. Shape: 12 for cards and panels, 8 for small things ---------- */
body[data-ds3-guide] main :is(.cp-card, .cp-dist, .cp-history, a.index-subject, .cp-chip, .query-tool, .decision-inputs, .guide-search-bar, .guide-topics, .v2-living-facts > div, .v2-place-photo > img) { border-radius: 12px !important; }
body[data-ds3-guide] main :is(.fgt-open, .guide-main nav > a, .cl-wl) { border-radius: 8px !important; }
body[data-ds3-guide] main .ds3-property-cover > figcaption { border-radius: 999px; }

/* ---------- 8. Breadcrumbs: one quiet line ---------- */
body[data-ds3-guide] main :is(.v2-crumbs, .rp-crumbs, .cp-crumbs, .study-breadcrumb, .query-path, .pd-breadcrumb),
body[data-ds3-guide] main :is(.v2-crumbs, .rp-crumbs, .cp-crumbs, .study-breadcrumb, .query-path, .pd-breadcrumb) :is(a, span, li) {
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--gw-muted) !important;
}
body[data-ds3-guide] main :is(.v2-crumbs, .rp-crumbs, .cp-crumbs, .study-breadcrumb, .query-path, .pd-breadcrumb) a { text-decoration: none !important; }
body[data-ds3-guide] main :is(.v2-crumbs, .rp-crumbs, .cp-crumbs, .study-breadcrumb, .query-path, .pd-breadcrumb) a:hover { color: var(--gw-ink) !important; text-decoration: underline !important; }
body[data-ds3-guide] main .query-hero > .query-kicker { display: none; }

/* ---------- 9. Focus and motion ---------- */
body[data-ds3-guide] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--gw-ink) !important; outline-offset: 2px !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-ds3-guide] *, body[data-ds3-guide] *::before, body[data-ds3-guide] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 10. Phone chip rows scroll inside the 16 px gutter ---------- */
@media (max-width: 760px) {
  body[data-ds3-guide] main .v2-chips { min-width: 0; max-width: 100vw; box-sizing: border-box; }
  body[data-ds3-guide] main .ut-task-nav { margin-inline: -16px !important; padding-inline: 16px !important; max-width: 100vw; box-sizing: border-box; }
}

/* ---------- 11. Leftovers from older templates ---------- */
/* Home actions: the guides' 48 px pills. */
body[data-ds3-guide] .guide-actions > :is(.guide-primary, .guide-secondary) { min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; }
/* Compare, dorm and West Campus pages: 16 px text, ink in place of rust and teal. */
html.gw-ds3 body[data-ds3-guide] main :is(.decision-hero > p, .decision-section > p, .decision-section-body > p, .decision-fine, .decision-fine > *, .pd-disclosure > summary, .pd-disclosure > p) { font-size: 16px !important; }
html.gw-ds3 body[data-ds3-guide] main :is(.ledger-total > dd, .wc-profile-action, .wc-profile-action > span, .wc-profile-link span, .chapter-index) { color: var(--gw-ink) !important; }
html.gw-ds3 body[data-ds3-guide] main :is(.student-fact-meta > span, .price-freshness > time) { color: var(--gw-muted) !important; }
html.gw-ds3 body[data-ds3-guide] main :is(.profile-main, .guide-main, .student-main) :is(li > span, li > time, span > time, td > a, summary > span:not(.topic-toggle)) { font-size: max(12px, 1em); }
html.gw-ds3 body[data-ds3-guide] main :is(.wc-controls > button, .cm-controls > button) { border-radius: 8px !important; }
html.gw-ds3 body[data-ds3-guide] main .ds3-property-cover > figcaption { border-radius: 999px !important; font-size: 12px !important; }
/* A footer that sits inside a page's main column fills that column. */
body[data-ds3-guide] main :is(.v2-foot-in, .v2-foot-base) { width: 100%; }

/* ---------- 12. Home: rankings and resources are rows, not boxes ----------
   Boxes are for things you save or open (places). Links and rankings are rows
   with a thin rule, the value at the end, and no icon. */
body[data-ds3-guide] .guide-rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
body[data-ds3-guide] .guide-rank-tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--gw-rule); border-radius: 0; background: none;
}
body[data-ds3-guide] .guide-rank-tile:hover { background: none; }
body[data-ds3-guide] .guide-rank-tile:hover strong { text-decoration: underline; text-underline-offset: 3px; }
body[data-ds3-guide] .guide-rank-tile svg { display: none; }
body[data-ds3-guide] .guide-rank-tile span { flex: 0 1 55%; text-align: right; }
body[data-ds3-guide] .guide-start-grid { gap: 0 48px; }
body[data-ds3-guide] .guide-start-card { padding: 16px 0; border: 0; border-top: 1px solid var(--gw-rule); border-radius: 0; background: none; }
body[data-ds3-guide] .guide-start-card:hover { background: none; }
body[data-ds3-guide] .guide-start-card:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  body[data-ds3-guide] .guide-rank-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 13. Breadcrumb, Related row, small targets (standard markup pass) ---------- */
body[data-ds3-guide] main .fg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gw-muted); }
body[data-ds3-guide] main .fg-crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--gw-muted); text-decoration: none; }
body[data-ds3-guide] main .fg-crumbs a:hover { color: var(--gw-ink); text-decoration: underline; text-underline-offset: 3px; }
body[data-ds3-guide] main .fg-related { margin: 48px 0 0; max-width: 680px; }
body[data-ds3-guide] main .fg-related ul { margin: 12px 0 0; padding: 0; list-style: none; }
body[data-ds3-guide] main .fg-related li { margin: 0; padding: 0; border-top: 1px solid var(--gw-rule); }
body[data-ds3-guide] main .fg-related li:last-child { border-bottom: 1px solid var(--gw-rule); }
body[data-ds3-guide] main .fg-related a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; color: var(--gw-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
body[data-ds3-guide] main .fg-related a::after { content: "→"; font-weight: 400; color: var(--gw-muted); }
body[data-ds3-guide] main .fg-related a:hover { text-decoration: underline; text-underline-offset: 3px; }
body[data-ds3-guide] .fg-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.gw-ds3 body[data-ds3-guide] main h3.rp-label { font-size: 14px !important; font-weight: 600 !important; }
/* Targets: 24 px at least (WCAG 2.5.8). */
body[data-ds3-guide] main :is(.profile-main td > a, [data-v2-row] a, .guide-credit a, .v2-credit a, .query-path a) { display: inline-block; min-height: 24px; line-height: 24px; }
/* Zero specificity: a component's own row height always wins. */
:where(body[data-ds3-guide] main summary) { min-height: 24px; }
body[data-ds3-guide] .fg-pin--dot { min-width: 24px; min-height: 24px; justify-content: center; }

/* ---------- 14. Long lists: first rows, then one "Show all N" ----------
   Only where scripting is on, so a page without JavaScript lists everything. */
[data-fg-more] { display: none; }
@media (scripting: enabled) {
  body[data-ds3-guide] [data-fg-clip="3"]:not(.is-open) > li:nth-child(n+4),
  body[data-ds3-guide] [data-fg-clip="4"]:not(.is-open) > li:nth-child(n+5),
  body[data-ds3-guide] [data-fg-clip="6"]:not(.is-open) > li:nth-child(n+7),
  body[data-ds3-guide] [data-fg-clip="12"]:not(.is-open) > li:nth-child(n+13),
  body[data-ds3-guide] [data-fg-clip="graded"]:not(.is-open) > li:not([data-graded="1"]) { display: none !important; }
  body[data-ds3-guide] main [data-fg-more] {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-height: 48px; margin: 16px 0 0; padding: 0 20px; border: 1px solid var(--gw-ink); border-radius: 8px;
    background: #fff; color: var(--gw-ink); font: 600 16px/1.25 var(--gw-font, Figtree, system-ui, sans-serif); cursor: pointer;
  }
  body[data-ds3-guide] main [data-fg-more]:hover { background: var(--gw-card); }
}

/* ---------- 15. Residence halls on the listing page ---------- */
body[data-ds3-guide] .v2-prop-hall .v2-quote-add { display: none !important; }
body[data-ds3-guide] main .v2-facts { margin: 0; }
body[data-ds3-guide] main .v2-facts > div { padding: 12px 0; border-top: 1px solid var(--gw-rule); }
body[data-ds3-guide] main .v2-facts > div:first-child { border-top: 0; padding-top: 0; }
body[data-ds3-guide] main .v2-facts dt { color: var(--gw-muted); font-size: 14px; font-weight: 500; }
body[data-ds3-guide] main .v2-facts dd { margin: 2px 0 0; font-size: 16px; }

/* ---------- 16. Type scale cleanup: 12, 14, 15, 16, 20 and the page title ----------
   15 is the label size (Field Guide COMMON.md). 13, 17, 18, 19 and 21–30 are not sizes. */
html.gw-ds3 body[data-ds3-guide] main :is(.v2-cc-year, .v2-living-foot, .v2-living-foot :is(a, strong), .v2-living-when, .v2-rank,
  .hub-gpa > small, .index-subject > small, .cp-bar-letter, .cp-chip-gpa, .cp-history-x > span, .guide-edition, .guide-edition :is(span, time),
  .guide-finish > p, .cm-foot > p, .cm-foot a, .dgm-full > span, .mccombs-university-rules > a, .fg-crumbs :is(a, span)) { font-size: 14px !important; }
html.gw-ds3 body[data-ds3-guide] main :is(.v2-prop, .v2-list-page, .cp, .query-reading, .mccombs-reading) :is(dt, dt > small, span > small, li > small, th, legend) { font-size: 14px; }
html.gw-ds3 body[data-ds3-guide] main .v2-living-facts li > a,
html.gw-ds3 body[data-ds3-guide] main .v2-rows li > a { font-size: 14px; }
html.gw-ds3 body[data-ds3-guide] main :is(.query-rail, .query-mobile-contents) li > span,
html.gw-ds3 body[data-ds3-guide] main :is(.query-reading, .query-hero) span > time,
html.gw-ds3 body[data-ds3-guide] main .guide-main :is(li > time, summary > span:not(.topic-toggle)) { font-size: 12px !important; }
body[data-ds3-guide] .v2-foot-base p, body[data-ds3-guide] .v2-foot-base a { font-size: 14px; }
body[data-ds3-guide] .v2-maker-dot { font-size: 12px; }
/* Lead paragraphs and hub links read at body size; their weight carries the emphasis. */
html.gw-ds3 body[data-ds3-guide] main :is(.cp-lede, .cp-dek, .cp-prose > p, .cp-details > p, .cp-prose p > :is(a, span, strong)) { font-size: 16px !important; line-height: 1.6 !important; }
html.gw-ds3 body[data-ds3-guide] main .ut-guide-index li > a { font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; min-height: 24px; }
html.gw-ds3 body[data-ds3-guide] main .v2-prop :is(.v2-cc-lines, .v2-rows) :is(div > dd, p > strong) { font-size: 16px; }
/* Numbers that answer a card or a row: 20/700. The page's one headline number keeps the stat size. */
html.gw-ds3 body[data-ds3-guide] main :is(.hub-gpa > strong, .v2-living-est > strong, .wc-offer > strong, .cp-history-readout > strong, .gw-featured-tools strong > span, .cp-facts dd, .cp-stats dd) { font-size: 20px !important; font-weight: 700 !important; }
body[data-ds3-guide] .guide-footer-brand > strong { font-size: 20px; }

/* ---------- 17. Detail rows outside the listing kit: the same closed row ----------
   56 px tall, 16/600 label, a quiet marker; the listing and report rows already match. */
html.gw-ds3 body[data-ds3-guide] main :is(.query-mobile-contents, .query-reading details, .decision-inputs, .decision-section details, .cp-details, .query-degree-school, .mccombs-reading details, .public-tools-list details, .guide-end-row) > summary {
  box-sizing: border-box; min-height: 56px !important; padding-block: 8px !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--gw-ink) !important;
}
html.gw-ds3 body[data-ds3-guide] main .cp-details > summary { display: flex; align-items: center; gap: 8px; }

/* Map dots: a 24 px hit area around the 8 px dot. */
html.gw-ds3 body[data-ds3-guide] .fg-pin.fg-pin--dot { min-width: 24px !important; min-height: 24px !important; }