/* =====================================================================
   Texas Soccer Fields — Material-style theme on top of Bootstrap 5.3
   All colors live in the :root tokens below.
   ===================================================================== */

:root {
  /* Greens */
  --tsf-primary: #4e7a1f;          /* brand green (from the original logo, darkened for contrast) */
  --tsf-primary-rgb: 78, 122, 31;
  --tsf-primary-dark: #3a5d15;
  --tsf-primary-deep: #2a4410;
  --tsf-primary-light: #8db654;
  --tsf-primary-container: #dcebc6; /* tonal fills: chips, tonal buttons */
  --tsf-on-primary-container: #1f3409;
  --tsf-surface: #ffffff;
  --tsf-surface-tint: #f3f7ee;     /* page background */
  --tsf-surface-variant: #e8efe0;
  --tsf-outline: #c5d1b8;
  --tsf-outline-soft: #e3e9dc;
  --tsf-text: #1c2117;
  --tsf-text-muted: #5a6352;
  --tsf-warn-bg: #fff4e0;
  --tsf-warn-text: #6b4300;
  --tsf-danger-bg: #fde8e6;
  --tsf-danger-text: #8c1d18;

  --tsf-radius-sm: 8px;
  --tsf-radius: 16px;
  --tsf-radius-lg: 24px;
  --tsf-elev-1: 0 1px 2px rgba(28, 33, 23, .08), 0 1px 3px 1px rgba(28, 33, 23, .06);
  --tsf-elev-2: 0 1px 2px rgba(28, 33, 23, .10), 0 2px 6px 2px rgba(28, 33, 23, .08);
  --tsf-elev-3: 0 4px 8px 3px rgba(28, 33, 23, .10), 0 1px 3px rgba(28, 33, 23, .12);

  /* Bootstrap overrides */
  --bs-primary: var(--tsf-primary);
  --bs-primary-rgb: var(--tsf-primary-rgb);
  --bs-link-color: var(--tsf-primary-dark);
  --bs-link-color-rgb: 58, 93, 21;
  --bs-link-hover-color: var(--tsf-primary-deep);
  --bs-link-hover-color-rgb: 42, 68, 16;
  --bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bs-body-color: var(--tsf-text);
  --bs-body-bg: var(--tsf-surface-tint);
  --bs-border-color: var(--tsf-outline-soft);
  --bs-border-radius: var(--tsf-radius-sm);
  --bs-focus-ring-color: rgba(var(--tsf-primary-rgb), .3);
}

html { scroll-padding-top: 80px; }
body {
  background: var(--tsf-surface-tint);
  color: var(--tsf-text);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }
a { text-underline-offset: 2px; }
h1, h2, h3, .h1, .h2, .h3 { font-weight: 500; letter-spacing: -.01em; }
h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); }
h2, .h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.text-muted { color: var(--tsf-text-muted) !important; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: #fff; padding: 8px 16px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

/* Self-hosted Roboto */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/roboto-latin-700-normal.woff2) format("woff2"); }

/* Material Symbols (Rounded) — inline SVG sprite, see icon() in src/helpers.php */
.msi { width: 1.25em; height: 1.25em; fill: currentColor; flex: 0 0 auto; display: inline-block; vertical-align: -0.28em; }

/* ---------------------------------------------------------------- app bar */
.app-bar {
  background: var(--tsf-primary);
  background: linear-gradient(180deg, var(--tsf-primary) 0%, var(--tsf-primary-dark) 100%);
  box-shadow: var(--tsf-elev-2);
  position: sticky; top: 0; z-index: 1030;
}
.app-bar .navbar { min-height: 64px; padding-block: 0; }
.app-bar .navbar-brand { color: #fff; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 1.2rem; letter-spacing: .01em; }
.app-bar .navbar-brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.app-bar .nav-link { color: rgba(255,255,255,.88); font-weight: 500; border-radius: 20px; padding: 8px 16px !important; display: flex; align-items: center; gap: 6px; }
.app-bar .nav-link:hover, .app-bar .nav-link:focus-visible, .app-bar .nav-link.active { color: #fff; background: rgba(255,255,255,.14); }
/* Open dropdown toggle ("Metro Areas"): light gray instead of Bootstrap's black */
.app-bar .navbar-nav .nav-link.show, .app-bar .navbar-nav .nav-link.show:focus { color: #dfe5d8; background: rgba(255,255,255,.14); }
.app-bar .navbar-toggler { border: 0; color: #fff; padding: 8px; border-radius: 50%; }
.app-bar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.app-bar .dropdown-menu { border: 0; border-radius: var(--tsf-radius-sm); box-shadow: var(--tsf-elev-3); padding: 8px 0; max-height: 70vh; overflow: auto; }
.app-bar .dropdown-item { padding: 10px 20px; display: flex; justify-content: space-between; gap: 24px; }
.app-bar .dropdown-item:active { background: var(--tsf-primary-container); color: var(--tsf-on-primary-container); }
.app-bar .header-search { max-width: 320px; }
@media (max-width: 991.98px) {
  .app-bar .navbar-collapse { padding-bottom: 12px; }
  .app-bar .dropdown-menu { box-shadow: none; background: rgba(255,255,255,.08); }
  .app-bar .dropdown-item { color: #fff; }
  .app-bar .dropdown-item .count { color: rgba(255,255,255,.7) !important; }
  /* Highlighted item on phones/tablets: white row, dark green text */
  .app-bar .dropdown-item:hover, .app-bar .dropdown-item:focus, .app-bar .dropdown-item:active { background: #fff; color: var(--tsf-primary-deep); }
  .app-bar .dropdown-item:hover .count, .app-bar .dropdown-item:focus .count, .app-bar .dropdown-item:active .count { color: var(--tsf-primary) !important; }
  .app-bar .header-search { max-width: none; margin-top: 8px; }
}

/* ---------------------------------------------------------------- search field (Material filled, pill) */
.search-field { position: relative; }
.search-field .form-control {
  height: 56px; border-radius: 28px; border: 1px solid transparent;
  padding-left: 52px; padding-right: 120px; font-size: 1.05rem;
  background: var(--tsf-surface); box-shadow: var(--tsf-elev-2);
}
.search-field .form-control:focus { border-color: var(--tsf-primary); box-shadow: var(--tsf-elev-3), 0 0 0 3px rgba(var(--tsf-primary-rgb), .18); }
.search-field .lead-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--tsf-text-muted); width: 24px; height: 24px; pointer-events: none; }
.search-field .btn-search { position: absolute; right: 6px; top: 6px; bottom: 6px; border-radius: 22px; padding: 0 20px; }
.search-field.compact .form-control { height: 40px; border-radius: 20px; padding-left: 40px; padding-right: 16px; font-size: .95rem; box-shadow: none; background: rgba(255,255,255,.95); }
.search-field.compact .lead-icon { left: 12px; width: 20px; height: 20px; }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1050;
  background: var(--tsf-surface); border-radius: var(--tsf-radius); box-shadow: var(--tsf-elev-3);
  padding: 8px 0; margin: 0; list-style: none; display: none; max-height: 60vh; overflow: auto;
}
.suggest.open { display: block; }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 10px 18px; color: var(--tsf-text); text-decoration: none; }
.suggest a .msi { color: var(--tsf-primary); }
.suggest a small { color: var(--tsf-text-muted); display: block; }
.suggest a:hover, .suggest a.active { background: var(--tsf-surface-variant); }
.suggest .all { border-top: 1px solid var(--tsf-outline-soft); margin-top: 6px; color: var(--tsf-primary-dark); font-weight: 500; }

/* ---------------------------------------------------------------- buttons */
.btn { --bs-btn-border-radius: 20px; --bs-btn-font-weight: 500; --bs-btn-padding-x: 20px; --bs-btn-padding-y: 8px; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary {
  --bs-btn-bg: var(--tsf-primary); --bs-btn-border-color: var(--tsf-primary);
  --bs-btn-hover-bg: var(--tsf-primary-dark); --bs-btn-hover-border-color: var(--tsf-primary-dark);
  --bs-btn-active-bg: var(--tsf-primary-deep); --bs-btn-active-border-color: var(--tsf-primary-deep);
  --bs-btn-disabled-bg: var(--tsf-primary); --bs-btn-disabled-border-color: var(--tsf-primary);
}
.btn-primary:hover { box-shadow: var(--tsf-elev-1); }
.btn-tonal {
  --bs-btn-bg: var(--tsf-primary-container); --bs-btn-color: var(--tsf-on-primary-container); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #cfe3b3; --bs-btn-hover-color: var(--tsf-on-primary-container); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: #c2d9a2; --bs-btn-active-color: var(--tsf-on-primary-container); --bs-btn-active-border-color: transparent;
}
.btn-outline {
  --bs-btn-color: var(--tsf-primary-dark); --bs-btn-border-color: var(--tsf-outline);
  --bs-btn-hover-bg: rgba(var(--tsf-primary-rgb), .08); --bs-btn-hover-color: var(--tsf-primary-deep); --bs-btn-hover-border-color: var(--tsf-outline);
  --bs-btn-active-bg: rgba(var(--tsf-primary-rgb), .14); --bs-btn-active-color: var(--tsf-primary-deep);
  background: var(--tsf-surface);
}
.btn-icon { --bs-btn-padding-x: 10px; border-radius: 50%; }

/* ---------------------------------------------------------------- cards / surfaces */
.m-card {
  background: var(--tsf-surface); border-radius: var(--tsf-radius); box-shadow: var(--tsf-elev-1);
  border: 0; overflow: hidden;
}
.m-card > .m-card-body { padding: 20px 24px; }
@media (max-width: 575.98px) { .m-card > .m-card-body { padding: 16px; } }
.m-card-title { font-size: 1.1rem; font-weight: 500; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; color: var(--tsf-primary-deep); }
.m-card-title .msi { color: var(--tsf-primary); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--tsf-outline); background: var(--tsf-surface); color: var(--tsf-text); font-size: .875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.chip.tonal { background: var(--tsf-primary-container); border-color: transparent; color: var(--tsf-on-primary-container); }
.chip .msi { width: 18px; height: 18px; }
a.chip:hover { background: var(--tsf-surface-variant); color: var(--tsf-text); }

/* ---------------------------------------------------------------- page header band */
.page-band { background: var(--tsf-surface); border-bottom: 1px solid var(--tsf-outline-soft); padding: 20px 0 24px; }
.page-band h1 { margin: 4px 0 6px; }
.page-band .lead { font-size: 1rem; color: #3d4536; margin: 0; max-width: 820px; }
.breadcrumb { --bs-breadcrumb-divider: "›"; font-size: .875rem; margin: 0; }
.breadcrumb a { color: var(--tsf-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--tsf-primary-dark); text-decoration: underline; }

/* ---------------------------------------------------------------- home */
.hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(141, 182, 84, .35), transparent 60%),
    linear-gradient(180deg, var(--tsf-primary-dark) 0%, var(--tsf-primary-deep) 100%);
  color: #fff; padding: 40px 0 72px;
}
.hero h1 { color: #fff; font-weight: 500; margin-bottom: 8px; }
.hero p.lead { color: rgba(255,255,255,.86); font-size: 1.1rem; margin-bottom: 24px; }
.hero-photo { border-radius: var(--tsf-radius-lg); box-shadow: var(--tsf-elev-3); width: 100%; height: auto; aspect-ratio: 350 / 294; object-fit: cover; border: 4px solid rgba(255,255,255,.9); }
.hero-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; color: rgba(255,255,255,.9); font-size: .95rem; }
.hero-stats strong { color: #fff; font-size: 1.25rem; font-weight: 500; display: block; }
@media (max-width: 991.98px) { .hero-photo { aspect-ratio: 16 / 7; max-height: 260px; } }
.hero-tags a { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.hero-tags a:hover { background: rgba(255,255,255,.18); color: #fff; }
.home-overlap { margin-top: -44px; position: relative; z-index: 2; }

.metro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.metro-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 12px; background: var(--tsf-surface-tint); color: var(--tsf-text); text-decoration: none;
  border: 1px solid var(--tsf-outline-soft); transition: background .15s, box-shadow .15s, transform .15s;
}
@media (max-width: 575.98px) {
  .metro-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metro-tile { padding: 10px 12px; font-size: .92rem; }
  .metro-tile .name .msi { display: none; }
}
.metro-tile:hover { background: var(--tsf-surface); box-shadow: var(--tsf-elev-2); color: var(--tsf-primary-deep); transform: translateY(-1px); }
.metro-tile .name { font-weight: 500; display: flex; align-items: center; gap: 10px; }
.metro-tile .name .msi { color: var(--tsf-primary); }
.count-badge { background: var(--tsf-primary-container); color: var(--tsf-on-primary-container); border-radius: 12px; padding: 2px 10px; font-size: .8rem; font-weight: 500; min-width: 36px; text-align: center; }

.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.rank-list li { counter-increment: rank; }
.rank-list a { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 10px; text-decoration: none; color: var(--tsf-text); }
.rank-list a::before {
  content: counter(rank); flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tsf-surface-variant); color: var(--tsf-primary-deep); font-weight: 500; font-size: .85rem;
}
.rank-list li:nth-child(-n+3) a::before { background: var(--tsf-primary); color: #fff; }
.rank-list a:hover { background: var(--tsf-surface-tint); }
.rank-list .city { color: var(--tsf-text-muted); font-size: .875rem; display: block; }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.feature-list li { display: flex; gap: 10px; align-items: center; font-size: .95rem; }
.feature-list .msi { color: var(--tsf-primary); }

/* ---------------------------------------------------------------- data table (field lists) */
.list-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--tsf-outline-soft); }
.list-toolbar .filter { max-width: 340px; flex: 1 1 220px; }
.list-toolbar .filter .form-control { height: 40px; border-radius: 20px; padding-left: 40px; background: var(--tsf-surface-tint); border-color: transparent; }
.list-toolbar .filter .form-control:focus { background: #fff; border-color: var(--tsf-primary); }
.result-count { color: var(--tsf-text-muted); font-size: .9rem; }

.data-table { width: 100%; margin: 0; border-collapse: collapse; }
.data-table thead th {
  font-size: .8rem; font-weight: 500; color: var(--tsf-text-muted); text-transform: uppercase; letter-spacing: .05em;
  padding: 0 16px; height: 52px; border-bottom: 1px solid var(--tsf-outline); white-space: nowrap; background: var(--tsf-surface);
  position: sticky; top: 64px; z-index: 1;
}
.data-table thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.data-table thead th a:hover { color: var(--tsf-primary-deep); }
.data-table thead th a .msi { width: 18px; height: 18px; opacity: 0; transition: opacity .15s; }
.data-table thead th a:hover .msi { opacity: .5; }
.data-table thead th[aria-sort] a { color: var(--tsf-primary-deep); }
.data-table thead th[aria-sort] a .msi { opacity: 1; }
.data-table tbody td { padding: 0 16px; height: 56px; border-bottom: 1px solid var(--tsf-outline-soft); vertical-align: middle; }
.data-table tbody tr { cursor: pointer; transition: background .12s; }
.data-table tbody tr:hover { background: rgba(var(--tsf-primary-rgb), .06); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .name-cell a { font-weight: 500; color: var(--tsf-primary-deep); text-decoration: none; }
.data-table .name-cell a:hover { text-decoration: underline; }
.data-table .muted { color: var(--tsf-text-muted); }
.data-table .abbr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.data-table .tag { font-size: .72rem; font-weight: 500; padding: 1px 8px; border-radius: 6px; background: var(--tsf-surface-variant); color: var(--tsf-on-primary-container); margin-left: 6px; vertical-align: 1px; }
.data-table .tag.closed { background: var(--tsf-danger-bg); color: var(--tsf-danger-text); }
.data-table td.go { width: 40px; color: var(--tsf-text-muted); text-align: right; }

/* Phones: rows become compact two-line cards */
.mobile-sort { display: none !important; }
@media (max-width: 767.98px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tbody tr { position: relative; padding: 12px 44px 12px 16px; border-bottom: 1px solid var(--tsf-outline-soft); }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table tbody td { height: auto; padding: 0; border: 0; }
  .data-table .name-cell { font-size: 1rem; margin-bottom: 2px; }
  .data-table td[data-label] { display: inline; font-size: .875rem; color: var(--tsf-text-muted); }
  .data-table td[data-label]:empty { display: none; }
  .data-table td.city-cell::before { content: ""; }
  .data-table td.alias-cell:not(:empty)::after, .data-table td.abbr-cell:not(:empty)::after { content: " · "; }
  .data-table td.go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: auto; }
  .data-table thead th { position: static; }
  .mobile-sort { display: flex !important; }
}
.empty-state { padding: 48px 24px; text-align: center; color: var(--tsf-text-muted); }
.empty-state .msi { width: 48px; height: 48px; color: var(--tsf-primary-light); display: block; margin: 0 auto 8px; }

/* ---------------------------------------------------------------- detail page */
/* Phones/tablets: map → details → getting there → status → nearby. Desktop: details left; map + nearby right. */
.detail-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "main" "nearby"; }
.dg-main { grid-area: main; min-width: 0; }
.dg-map { grid-area: map; min-width: 0; }
.dg-nearby { grid-area: nearby; min-width: 0; }
@media (min-width: 992px) {
  .detail-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "main map" "main nearby"; }
  .dg-nearby { align-self: start; }
}
.detail-head .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.action-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.action-bar .divider { width: 1px; background: var(--tsf-outline); margin: 4px 4px; }
@media (max-width: 575.98px) {
  .action-bar .btn { flex: 1 1 calc(50% - 8px); }
  .action-bar .divider { display: none; }
}
.nav-btn.preferred { order: -1; }

.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; margin: 0; }
.kv dt, .kv dd { padding: 11px 0; border-bottom: 1px solid var(--tsf-outline-soft); margin: 0; }
.kv dt { color: var(--tsf-text-muted); font-weight: 400; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.kv dt .msi { color: var(--tsf-primary); width: 20px; height: 20px; }
.kv dd { font-weight: 500; overflow-wrap: anywhere; }
.kv > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 400px) { .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; } }

.map-frame { position: relative; aspect-ratio: 4 / 3; background: var(--tsf-surface-variant); }
@media (min-width: 576px) and (max-width: 991.98px) { .map-frame { aspect-ratio: 16 / 9; } }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.geo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--tsf-outline-soft); flex-wrap: wrap; }
.geo-row code { color: var(--tsf-text); font-size: .95rem; background: var(--tsf-surface-tint); padding: 4px 8px; border-radius: 6px; }
/* Small light-gray copy button (addresses) */
.copy-mini {
  position: relative; border: 0; background: transparent; color: #a3ab9b; padding: 4px; margin-left: 2px;
  border-radius: 50%; line-height: 0; vertical-align: middle; cursor: pointer; transition: color .15s, background .15s;
}
.copy-mini::after { content: ""; position: absolute; inset: -8px; } /* bigger tap target on phones */
.copy-mini .msi { width: 16px; height: 16px; vertical-align: 0; }
.copy-mini:hover { color: var(--tsf-text-muted); background: var(--tsf-surface-variant); }
.copy-mini:focus-visible { outline: 2px solid var(--tsf-primary); outline-offset: 1px; }
.copy-mini.copied { color: var(--tsf-primary); }
/* Report an error */
.report-link { font-size: .875rem; color: var(--tsf-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-top: 2px; }
.report-link .msi { width: 17px; height: 17px; }
.report-link:hover { color: var(--tsf-primary-dark); text-decoration: underline; }
.report-card { max-width: 720px; }
.report-card .form-label { font-weight: 500; font-size: .9rem; color: var(--tsf-text-muted); }
.report-card .form-control { border-radius: 10px; border-color: var(--tsf-outline); padding: 10px 14px; background: #fff; }
.report-card .form-select { border-radius: 10px; border-color: var(--tsf-outline); padding-top: 10px; padding-bottom: 10px; background-color: #fff; }
.report-card .form-select:focus { border-color: var(--tsf-primary); box-shadow: 0 0 0 3px rgba(var(--tsf-primary-rgb), .18); }
.report-card .form-control:focus { border-color: var(--tsf-primary); box-shadow: 0 0 0 3px rgba(var(--tsf-primary-rgb), .18); }
.report-card .form-control:disabled { background: var(--tsf-surface-tint); color: var(--tsf-text); opacity: 1; }
.report-card .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.report-card .form-label .fw-normal { color: var(--tsf-text-muted); font-size: .85rem; }

/* FAQ's */
.faq-card { max-width: 860px; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--tsf-outline-soft); }
.faq-item:first-child { padding-top: 4px; }
.faq-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.faq-q { font-size: 1.05rem; font-weight: 500; color: var(--tsf-primary-deep); display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; }
.faq-q .msi { color: var(--tsf-primary); margin-top: 1px; }
.faq-a { margin: 0 0 0 calc(1.25em + 10px); color: var(--tsf-text); }
/* Content pages (About Us, Privacy Policy, Terms of Use) */
.content-card { max-width: 860px; }
.prose-page { line-height: 1.65; }
.prose-page h2 { font-size: 1.15rem; font-weight: 500; color: var(--tsf-primary-deep); margin: 1.6rem 0 .5rem; }
.prose-page h2:first-child { margin-top: 0; }
.prose-page ol, .prose-page ul { padding-left: 1.4rem; }
.prose-page li { margin-bottom: .4rem; }
.prose-page li > ol { margin-top: .4rem; }
.prose-page p:last-child { margin-bottom: 0; }
.note { border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.note .msi { flex: 0 0 auto; margin-top: 1px; }
.note.warn { background: var(--tsf-warn-bg); color: var(--tsf-warn-text); }
.note.danger { background: var(--tsf-danger-bg); color: var(--tsf-danger-text); }
.note.info { background: var(--tsf-surface-tint); color: var(--tsf-text); }
.prose p:last-child { margin-bottom: 0; }
.nearby a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tsf-outline-soft); text-decoration: none; color: var(--tsf-text); }
.nearby li:last-child a { border-bottom: 0; }
.nearby a:hover strong { color: var(--tsf-primary-dark); text-decoration: underline; }
.nearby small { color: var(--tsf-text-muted); white-space: nowrap; }

.toast-lite {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%); background: #2c3227; color: #fff;
  padding: 12px 20px; border-radius: 8px; box-shadow: var(--tsf-elev-3); transition: transform .25s, visibility .25s; z-index: 2000; font-size: .95rem;
  visibility: hidden; transform: translate(-50%, 200%);
}
.toast-lite.show { transform: translate(-50%, 0); visibility: visible; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--tsf-primary-deep); color: rgba(255,255,255,.78); padding: 40px 0 24px; margin-top: 48px; font-size: .9rem; }
.site-footer h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 12px; font-weight: 500; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 3px 0; }
.site-footer .footer-metros { columns: 2; column-gap: 24px; }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 28px; padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- print (printer-friendly field sheet) */
.print-only { display: none; }
@media print {
  @page { margin: 14mm; }
  :root { --tsf-surface-tint: #fff; }
  body { background: #fff !important; font-size: 11pt; color: #000; }
  .app-bar, .site-footer, .action-bar, .no-print, .map-frame, .breadcrumb, .nearby-card, .skip-link, .toast-lite, ins.adsbygoogle { display: none !important; }
  .print-only { display: block !important; }
  .page-band { border: 0; padding: 0 0 8px; }
  .m-card { box-shadow: none !important; border: 1px solid #bbb; border-radius: 6px; break-inside: avoid; margin-bottom: 10px !important; }
  .m-card > .m-card-body { padding: 10px 14px; }
  .detail-grid { display: block; }
  .dg-map { margin-top: 10px; }
  .kv dt, .kv dd { padding: 5px 0; }
  a { color: #000 !important; text-decoration: none !important; }
  .chip { border-color: #999; }
  .print-head { display: flex !important; align-items: center; gap: 12px; border-bottom: 2px solid #4e7a1f; padding-bottom: 8px; margin-bottom: 12px; }
  .print-head img { width: 36px; height: 36px; }
  .print-url { font-size: 9pt; color: #333; }
}