/* =====================================================================
   ROOTS3 -- Veteran Resource Navigator
   Extends the ROOTS2 teal token system. One signature element: the
   gold star rail that lifts Veteran Serving Organizations to the top.
   ===================================================================== */
:root {
  --teal-50:#eef6f5; --teal-100:#dcecea; --teal-300:#8fc4be;
  --teal-500:#2f8b82; --teal-700:#1d5f59; --teal-900:#123f3b;
  --ink:#1e2a28; --ink-light:#5a6b68;
  --gold:#d9a021; --gold-soft:#fbf3df;
  --paper:#f7f5f1; --card:#ffffff; --line:#e3ded6;
  --radius:10px;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
       color:var(--ink); background:var(--paper); }
a { color:var(--teal-700); }

.r3-header { background:var(--teal-900); color:#fff; padding:14px 22px;
             display:flex; align-items:baseline; gap:14px; }
.r3-header .brand { font-size:20px; font-weight:800; letter-spacing:.4px; }
.r3-header .sub   { font-size:13px; color:var(--teal-300); }
.r3-wrap { max-width:1240px; margin:0 auto; padding:20px; }
.r3-card { background:var(--card); border:1px solid var(--line);
           border-radius:var(--radius); padding:20px; margin-bottom:18px; }
h1 { font-size:24px; margin:0 0 6px; color:var(--teal-900); }
h2 { font-size:17px; margin:0 0 10px; color:var(--teal-900); }
.muted { color:var(--ink-light); font-size:13px; }

/* Intake: searchable chip grid */
.chip-search { width:100%; padding:10px 12px; border:1px solid var(--line);
               border-radius:8px; font-size:14px; margin-bottom:12px; }
.chip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
             gap:10px; }
.chip { display:flex; gap:9px; align-items:flex-start; padding:10px 12px;
        border:1px solid var(--line); border-radius:8px; background:#fff;
        cursor:pointer; transition:border-color .12s, background .12s; }
.chip:hover { border-color:var(--teal-300); }
.chip input { margin-top:3px; accent-color:var(--teal-700); }
.chip .lbl { font-weight:600; font-size:14px; }
.chip .dsc { font-size:12px; color:var(--ink-light); }
.chip.checked { background:var(--teal-50); border-color:var(--teal-500); }
.chip.hidden { display:none; }

textarea.freeform { width:100%; min-height:110px; padding:10px 12px;
  border:1px solid var(--line); border-radius:8px; font:inherit; resize:vertical; }
.zip-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
input.zip { width:120px; padding:10px 12px; border:1px solid var(--line);
            border-radius:8px; font-size:16px; letter-spacing:2px; }
.btn { display:inline-block; background:var(--teal-700); color:#fff; border:0;
       padding:11px 22px; border-radius:8px; font-size:15px; font-weight:700;
       cursor:pointer; }
.btn:hover { background:var(--teal-900); }
.btn.small { padding:6px 12px; font-size:13px; }
.btn.ghost { background:#fff; color:var(--teal-700); border:1px solid var(--teal-500); }
.btn.gold  { background:var(--gold); color:#3a2c05; }
.notice { background:var(--gold-soft); border:1px solid #ecd9a8;
          border-radius:8px; padding:10px 14px; font-size:13px; }
.err { background:#fbe9e7; border:1px solid #e3b3ab; color:#7a2e22;
       border-radius:8px; padding:10px 14px; margin-bottom:14px; }

/* Results layout: rail + map */
.results-grid { display:grid; grid-template-columns:390px 1fr; gap:18px; }
@media (max-width: 940px){ .results-grid { grid-template-columns:1fr; } }
#map { height:640px; border-radius:var(--radius); border:1px solid var(--line); }
.rail { max-height:640px; overflow-y:auto; padding-right:4px; }
.ngo-item { background:var(--card); border:1px solid var(--line);
            border-radius:8px; padding:11px 13px; margin-bottom:9px; cursor:pointer; }
.ngo-item:hover { border-color:var(--teal-500); }
.ngo-item .nm { font-weight:700; font-size:14px; color:var(--teal-900); }
.ngo-item .mt { font-size:12px; color:var(--ink-light); margin-top:2px; }
.ngo-item.vso { border-left:5px solid var(--gold); background:linear-gradient(90deg,var(--gold-soft),#fff 55%); }
.star { color:var(--gold); font-size:14px; }
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 7px;
         border-radius:20px; background:var(--teal-100); color:var(--teal-900); }
.badge.vso { background:var(--gold-soft); color:#7a5a0d; border:1px solid #ecd9a8; }
.score-pill { float:right; font-size:12px; font-weight:800; color:var(--teal-700); }

/* Stats strip */
.stats-strip { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
               gap:10px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px;
        padding:10px 12px; }
.stat .v { font-size:20px; font-weight:800; color:var(--teal-900); }
.stat .k { font-size:11px; text-transform:uppercase; letter-spacing:.6px;
           color:var(--ink-light); }

/* Choropleth controls + legend */
.layer-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
             margin-bottom:10px; }
.layer-bar select { padding:8px 10px; border:1px solid var(--line);
                    border-radius:8px; font-size:14px; }
.legend { background:#fff; padding:8px 10px; border-radius:8px;
          border:1px solid var(--line); font-size:12px; line-height:1.5;
          box-shadow:0 1px 4px rgba(0,0,0,.12); }
.legend .sw { display:inline-block; width:14px; height:12px; margin-right:6px;
              vertical-align:-1px; border:1px solid rgba(0,0,0,.15); }

/* Map popup table */
.pop-table { border-collapse:collapse; font-size:12px; }
.pop-table td { padding:2px 6px; vertical-align:top; }
.pop-table td:first-child { color:var(--ink-light); white-space:nowrap; }
.pop-name { font-weight:800; font-size:14px; color:var(--teal-900); margin-bottom:4px; }

/* Pending spinner */
.pending { text-align:center; padding:70px 20px; }
.spin { width:38px; height:38px; border:4px solid var(--teal-100);
        border-top-color:var(--teal-700); border-radius:50%;
        animation:r3spin 1s linear infinite; margin:0 auto 16px; }
@keyframes r3spin { to { transform:rotate(360deg); } }

/* Admin tables */
table.admin { width:100%; border-collapse:collapse; background:#fff;
              border:1px solid var(--line); border-radius:var(--radius); }
table.admin th { text-align:left; font-size:12px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--ink-light); padding:9px 10px;
  border-bottom:2px solid var(--line); background:var(--teal-50); }
table.admin td { padding:8px 10px; border-bottom:1px solid var(--line);
                 font-size:13px; vertical-align:middle; }
table.admin input[type=text], table.admin input[type=number] {
  width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:6px; }
.tag-on  { color:var(--teal-700); font-weight:800; }
.tag-off { color:#b0aca3; }

/* =====================================================================
   COMMON CRISIS PILL (Aug 7). One definition for every page. The red
   dot that used to sit inside the index.php copy is gone; both pages
   now use identical markup:
     <span class="crisis-pill2">In crisis?
       <b>Call 988, press 1</b> &middot; or text 838255</span>
   ===================================================================== */
/* THE RED CALL PILL (Aug 7 clarification): solid red, white text, so
   it reads as red at a glance on every page -- the earlier pale-pink
   version disappeared into the card. Same rule, same markup,
   everywhere. */
.crisis-pill2 {
  display:inline-flex; align-items:center; gap:6px;
  background:#b3261e; border:1.5px solid #8a1f1f; border-radius:999px;
  padding:6px 16px; font-size:.9rem; color:#fff; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.crisis-pill2 b { color:#fff; margin:0 4px; text-decoration:underline;
  text-underline-offset:2px; }