/* =====================================================================
   ROOTS3 -- Resource directory
   =====================================================================
   Extends assets/roots3.css. Same teal ramp, same gold, same fonts as
   index.php and results.php, because this is the same product on the
   same domain and should not announce itself as something new.

   ONE DELIBERATE CHOICE. The three result groups are colour-coded by
   what an organization actually does, not by how far away it is:
   deep green for direct care, teal for direct help, grey for support.
   Someone scanning the page learns the difference without reading a
   legend, and the difference is the whole point of the filtering.
   ===================================================================== */

:root {
  --care:      #0f6b3f;
  --care-soft: #e8f5ee;
  --help:      #2f8b82;
  --help-soft: #eaf4f3;
  --supp:      #7d918e;
  --supp-soft: #f1f3f2;
  --warn:      #b3541e;
}

.r3-wrap.dir   { max-width: 1080px; }
.r3-wrap.narrow{ max-width: 780px; }

.hdr-right { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.hdr-link {
  color: var(--teal-300); text-decoration: none; font-size: 13px;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
}
.hdr-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.hdr-link.on { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; }

.crisis-bar { background: var(--teal-900); padding: 0 22px 14px; }

/* --- numbered steps -------------------------------------------------- */
.step {
  display: flex; gap: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 16px;
}
.step-n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal-700); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.step-body { flex: 1; min-width: 0; }
.step-body h1 { font-size: 25px; margin: 2px 0 4px; }
.step-body h2 { font-size: 20px; margin: 2px 0 4px; }
.lede { color: var(--ink-light); font-size: 14px; margin: 0 0 16px; }

/* --- needs ----------------------------------------------------------- */
.need-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 9px;
}
.need-grid.tight { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.need {
  display: block; position: relative; padding: 12px 13px 12px 38px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.need:hover { border-color: var(--teal-300); }
.need input { position: absolute; left: 13px; top: 14px; accent-color: var(--teal-700); }
.need-t { display: block; font-weight: 650; font-size: 14px; color: var(--ink); }
.need-d { display: block; font-size: 12px; color: var(--ink-light); margin-top: 3px; line-height: 1.45; }
.need.on { background: var(--teal-50); border-color: var(--teal-500); }

.more { margin-top: 14px; }
.more summary {
  cursor: pointer; font-size: 13.5px; font-weight: 650;
  color: var(--teal-700); padding: 8px 0;
}
.more[open] summary { margin-bottom: 10px; }

/* --- where ----------------------------------------------------------- */
.where { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.where .zip {
  width: 118px; padding: 11px 13px; font-size: 17px; letter-spacing: 2px;
  border: 1px solid var(--line); border-radius: 8px;
}
.where select {
  padding: 11px 13px; font-size: 14px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff;
}

/* --- results header -------------------------------------------------- */
.res-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin: 26px 0 14px;
  padding-top: 20px; border-top: 2px solid var(--line);
}
.res-t { font-size: 21px; margin: 0; }
.res-s { font-size: 13px; color: var(--ink-light); margin: 4px 0 0; }
.res-ctl { display: flex; gap: 7px; flex-wrap: wrap; }

.dir-map {
  height: 400px; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 20px;
}

/* --- result blocks --------------------------------------------------- */
.block { margin-bottom: 26px; }
.block-h { margin-bottom: 12px; }
.block-h h3 {
  font-size: 17px; margin: 0; color: var(--teal-900);
  display: flex; align-items: center; gap: 9px;
}
.block-h h3 .count {
  font-size: 12px; font-weight: 700; background: var(--teal-100);
  color: var(--teal-900); padding: 2px 9px; border-radius: 20px;
}
.block-h p { font-size: 13px; color: var(--ink-light); margin: 4px 0 0; }

.org-list { display: flex; flex-direction: column; gap: 8px; }
.org {
  display: flex; gap: 14px; justify-content: space-between; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 13px 15px; border-left: 5px solid var(--supp);
}
.org.t3 { border-left-color: var(--care); background: linear-gradient(90deg, var(--care-soft), #fff 46%); }
.org.t2 { border-left-color: var(--help); background: linear-gradient(90deg, var(--help-soft), #fff 46%); }
.org.t1 { border-left-color: var(--supp); }
.org.post { opacity: .82; }
.org-main { flex: 1; min-width: 0; }
.org-n { font-weight: 700; font-size: 14.5px; color: var(--teal-900); }
.org-m { font-size: 12.5px; color: var(--ink-light); margin-top: 3px; }
.org-tags { margin-top: 7px; display: flex; gap: 5px; flex-wrap: wrap; }
.org-side { flex: none; text-align: right; display: flex; flex-direction: column; gap: 6px; }
.mini { font-size: 11.5px; color: var(--ink-light); text-decoration: none; }
.mini:hover { text-decoration: underline; }

/* --- recommended ----------------------------------------------------- */
.rec-block .block-h h3 { color: #7a5a0d; }
.rec {
  background: linear-gradient(180deg, var(--gold-soft), #fff 60%);
  border: 1px solid #ecd9a8; border-left: 5px solid var(--gold);
  border-radius: 9px; padding: 16px 18px; margin-bottom: 10px;
}
.rec-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.rec-n { font-weight: 800; font-size: 16px; color: var(--teal-900); }
.rec-m { font-size: 12.5px; color: var(--ink-light); margin-top: 3px; }
.rec-b { font-size: 13.5px; line-height: 1.6; margin: 10px 0 0; }
.rec-by { font-size: 12px; color: #7a5a0d; font-style: italic; margin: 8px 0 0; }
.acts { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }

.code {
  font: 11px ui-monospace, Menlo, Consolas, monospace;
  background: var(--teal-50); color: var(--teal-700);
  padding: 1px 5px; border-radius: 3px;
}
.mono { font: 12px ui-monospace, Menlo, Consolas, monospace; }

/* --- tags and badges ------------------------------------------------- */
.tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.tag {
  font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 4px;
  background: var(--paper); color: var(--ink-light); border: 1px solid var(--line);
}
.tag-hi { background: var(--gold-soft); color: #7a5a0d; border-color: #ecd9a8; }
.tag-q  { background: transparent; border-style: dashed; font-weight: 500; }
.tag.warn { background: #fbe9e7; color: #7a2e22; border-color: #e3b3ab; }
.warn-t { color: var(--warn); font-weight: 650; }

.ev {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}
.ev-rct            { background: var(--care); color: #fff; }
.ev-peer_reviewed  { background: var(--teal-700); color: #fff; }
.ev-program_eval   { background: var(--teal-500); color: #04211e; }
.ev-clinician_rec  { background: var(--gold); color: #2b2003; }
.ev-national_scale { background: var(--teal-100); color: var(--teal-900); }
.ev-unrated        { background: transparent; color: var(--ink-light); border: 1px dashed var(--line); }

.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.st-new       { background: var(--gold); color: #2b2003; }
.st-reviewing { background: var(--teal-100); color: var(--teal-900); }
.st-accepted  { background: var(--care); color: #fff; }
.st-declined  { background: #eee; color: #777; }
.st-duplicate { background: #eee; color: #777; }

/* --- empty and closing ----------------------------------------------- */
.empty, .know, .thanks {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.know { margin-top: 26px; background: var(--teal-50); border-color: var(--teal-300); }
.empty h3, .know h3, .thanks h1 { margin: 0 0 8px; }
.empty p, .know p, .thanks p { font-size: 14px; color: var(--ink-light); line-height: 1.65; margin: 0 0 10px; }

/* --- nomination form -------------------------------------------------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nom .fs {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px;
}
.nom legend {
  font-size: 15px; font-weight: 750; color: var(--teal-900); padding: 0 8px;
}
.nom legend b { color: var(--warn); font-size: 11px; font-weight: 700; }
.f { display: block; margin-bottom: 14px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .f2 { grid-template-columns: 1fr; } }
.fl { display: block; font-size: 12px; font-weight: 700; color: var(--teal-700);
      text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.fl b { color: var(--warn); }
.fi, .ft {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.ft { min-height: 110px; resize: vertical; line-height: 1.55; }
.fh { display: block; font-size: 12px; color: var(--ink-light); margin-top: 5px; line-height: 1.5; }
.radios, .modes { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.rd, .ck { font-size: 13.5px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.states { margin-top: 14px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; margin-top: 7px; }
.st { font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.submit { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* --- admin ------------------------------------------------------------ */
body.r3-admin { background: var(--paper); }
.ok { background: var(--care-soft); border: 1px solid var(--care); color: #0b4a2c;
      border-radius: 9px; padding: 12px 15px; margin-bottom: 16px; font-size: 13.5px; }
.note-card { background: var(--card); border: 1px solid var(--line);
             border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.note-card h2 { font-size: 16px; margin: 0 0 8px; }
.note-card .muted { font-size: 13.5px; line-height: 1.65; margin: 0 0 8px; }

.tier-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ts { background: var(--card); border: 1px solid var(--line);
      border-left: 5px solid var(--supp); border-radius: 9px; padding: 13px 18px; }
.ts.t3 { border-left-color: var(--care); }
.ts.t2 { border-left-color: var(--help); }
.ts.t1 { border-left-color: var(--supp); }
.ts.t0 { border-left-color: #cdcdc8; }
.ts-v { font-size: 24px; font-weight: 800; color: var(--teal-900);
        font-variant-numeric: tabular-nums; }
.ts-k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
        color: var(--ink-light); font-weight: 700; margin-top: 2px; }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters label { font-size: 13px; color: var(--ink-light); }
.filters select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; }
.chip {
  font-size: 13px; text-decoration: none; padding: 7px 13px; border-radius: 20px;
  background: #fff; color: var(--ink-light); border: 1px solid var(--line);
}
.chip:hover { border-color: var(--teal-300); }
.chip.on { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.chip b { margin-left: 5px; }

table.admin.ntee td { vertical-align: middle; }
table.admin.ntee tr.t3 td:first-child { border-left: 4px solid var(--care); }
table.admin.ntee tr.t2 td:first-child { border-left: 4px solid var(--help); }
table.admin.ntee tr.t1 td:first-child { border-left: 4px solid var(--supp); }
table.admin.ntee tr.t0 td:first-child { border-left: 4px solid #e0e0db; }
.tsel { padding: 5px 7px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 6px; }
td.small { font-size: 12px; }

.nom-card { background: var(--card); border: 1px solid var(--line);
            border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px; }
.nom-card.clin { border-left: 5px solid var(--gold); background: linear-gradient(90deg, var(--gold-soft), #fff 40%); }
.nom-h { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.nom-n { font-weight: 750; font-size: 16px; color: var(--teal-900); }
.nom-m { font-size: 12px; color: var(--ink-light); margin-top: 3px; }
.why { margin: 12px 0; padding: 12px 15px; background: var(--paper);
       border-left: 3px solid var(--teal-300); border-radius: 0 7px 7px 0;
       font-size: 13.5px; line-height: 1.6; }
.nom-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; margin: 8px 0; }
.nom-acts { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 12px;
            padding-top: 12px; border-top: 1px solid var(--line); }
.nom-acts .note { flex: 1; min-width: 180px; }

.rcard { background: var(--card); border: 1px solid var(--line);
         border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.rhead { display: flex; gap: 12px; align-items: center; padding: 14px 18px; cursor: pointer; }
.rhead:hover { background: var(--teal-50); }
.rname { font-weight: 750; font-size: 15px; color: var(--teal-900);
         display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.rmeta { font-size: 12px; color: var(--ink-light); margin-top: 3px; }
.rbody { padding: 4px 18px 20px; border-top: 1px solid var(--line); }
.frow { display: grid; grid-template-columns: 160px 1fr; gap: 14px;
        align-items: start; margin-top: 16px; }
@media (max-width: 720px) { .frow { grid-template-columns: 1fr; } }
.frow > label { font-size: 11.5px; font-weight: 750; color: var(--teal-700);
                text-transform: uppercase; letter-spacing: .06em; padding-top: 10px; }
.addrow { display: flex; gap: 8px; margin-top: 12px; }
.addrow .fi { max-width: 380px; }

.finder { position: relative; }
.fres { position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
        background: #fff; border: 1px solid var(--line); border-radius: 8px;
        max-height: 260px; overflow-y: auto; margin-top: 3px;
        box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.fres div { padding: 9px 12px; font-size: 12.5px; cursor: pointer;
            border-bottom: 1px solid var(--line); }
.fres div:hover { background: var(--teal-50); }

/* --- quality floor ---------------------------------------------------- */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- the working narration (while the search runs) -------------------- */
.working { position: fixed; inset: 0; background: rgba(6,32,29,.55);
           display: flex; align-items: center; justify-content: center;
           z-index: 60; padding: 20px; }
.working-card { background: #fff; border-radius: 14px; max-width: 620px;
                width: 100%; padding: 26px 30px;
                box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.working-card h2 { margin: 0 0 14px; font-size: 20px; color: var(--teal-900); }
.wsteps { margin: 0; padding: 0 0 0 22px; }
.wsteps li { font-size: 14px; line-height: 1.55; margin-bottom: 10px;
             color: #b9c4c2; transition: color .3s; }
.wsteps li.on { color: var(--ink); }
.wsteps li.on::marker { color: var(--care); font-weight: 800; }

/* --- how these were chosen -------------------------------------------- */
.how { background: var(--card); border: 1px solid var(--line);
       border-radius: var(--radius); padding: 4px 18px; margin-bottom: 18px; }
.how summary { cursor: pointer; font-weight: 700; font-size: 14px;
               color: var(--teal-700); padding: 12px 0; }
.how-steps { margin: 0 0 14px; padding-left: 22px; }
.how-steps li { font-size: 13.5px; line-height: 1.6; margin-bottom: 8px; }
.how-steps b { color: var(--teal-900); font-variant-numeric: tabular-nums; }

/* --- national prominence ----------------------------------------------- */
.natlead { background: linear-gradient(180deg, var(--gold-soft), #fff);
           border: 1px solid #ecd9a8; border-left: 6px solid var(--gold);
           border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px; }
.natlead-k { font-weight: 800; font-size: 15px; color: #7a5a0d; }
.natlead p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.anywhere { display: inline-block; background: var(--gold); color: #2b2003;
            font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
            text-transform: uppercase; padding: 3px 9px; border-radius: 4px;
            margin-right: 9px; vertical-align: 2px; }
.rec { position: relative; }
.rec-ribbon { position: absolute; top: 14px; right: -8px;
              background: var(--gold); color: #2b2003; font-size: 10.5px;
              font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
              padding: 4px 12px; border-radius: 4px 0 0 4px;
              box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.rec-ribbon::after { content: ''; position: absolute; right: 0; top: 100%;
                     border: 4px solid transparent; border-top-color: #a8842e;
                     border-left-color: #a8842e; }
.rec .rec-top { padding-right: 150px; }
.org.nat { border-left-color: var(--gold);
           background: linear-gradient(90deg, var(--gold-soft), #fff 40%); }
.natflag { display: inline-block; background: var(--gold); color: #2b2003;
           font-size: 10px; font-weight: 800; text-transform: uppercase;
           letter-spacing: .05em; padding: 2px 7px; border-radius: 4px;
           margin-left: 8px; vertical-align: 1px; }

/* --- why chips ---------------------------------------------------------- */
.whylbl { font-size: 11px; font-weight: 800; color: var(--teal-700);
          text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.why-tag { background: var(--teal-50); border-color: var(--teal-300);
           color: var(--teal-900); }
@media (max-width: 560px) { .rec .rec-top { padding-right: 0; }
  .rec-ribbon { position: static; display: inline-block; margin-bottom: 8px; } }

/* =====================================================================
   ADMIN DASHBOARD
   ===================================================================== */
.pip { background: var(--gold); color: #2b2003; border-radius: 10px;
       padding: 0 6px; font-size: 10.5px; margin-left: 4px; }
h2.sec { font-size: 17px; color: var(--teal-900); margin: 28px 0 4px;
         padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.sec-n { font-size: 13px; color: var(--ink-light); margin: 0 0 14px; }

.todo { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 20px 22px; margin-bottom: 8px; }
.todo h2 { font-size: 17px; margin: 0 0 14px; color: var(--teal-900); }
.todo-row { display: flex; gap: 14px; align-items: flex-start;
            padding: 13px 0; border-top: 1px solid var(--line); }
.todo-row:first-of-type { border-top: 0; }
.todo-k { flex: none; width: 92px; font-size: 10.5px; font-weight: 800;
          text-transform: uppercase; letter-spacing: .06em; padding: 4px 0;
          color: var(--ink-light); }
.todo-row.stop .todo-k { color: #a3301c; }
.todo-row.warn .todo-k { color: #8a5a10; }
.todo-row.ok   .todo-k { color: var(--care); }
.todo-b { flex: 1; min-width: 0; }
.todo-b b { font-size: 14.5px; color: var(--teal-900); }
.todo-b p { margin: 4px 0 0; font-size: 13px; color: var(--ink-light);
            line-height: 1.55; }
.todo-row.stop { background: linear-gradient(90deg, #fdeeeb, transparent 55%); }
.todo-row.warn { background: linear-gradient(90deg, var(--gold-soft), transparent 55%); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
         gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line);
       border-left: 5px solid var(--line); border-radius: 10px; padding: 15px 17px; }
.kpi.big { grid-column: span 2; }
@media (max-width: 700px) { .kpi.big { grid-column: span 1; } }
.kpi.good { border-left-color: var(--care); }
.kpi.mid  { border-left-color: var(--gold); }
.kpi.bad  { border-left-color: #c0442c; }
.kpi.t3   { border-left-color: var(--care); }
.kpi.t2   { border-left-color: var(--help); }
.kpi.t1   { border-left-color: var(--supp); }
.kpi.t0   { border-left-color: #d8d8d3; }
.kpi-v { font-size: 27px; font-weight: 800; color: var(--teal-900);
         font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi.big .kpi-v { font-size: 40px; }
.kpi-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
         font-weight: 750; color: var(--ink-light); margin-top: 3px; }
.kpi-n { font-size: 12.5px; color: var(--ink-light); line-height: 1.5;
         margin-top: 8px; }
.kpi .btn { margin-top: 10px; }

table.admin.ledger td { vertical-align: top; }
table.admin .r { text-align: right; font-variant-numeric: tabular-nums; }
tr.row-ok  td:first-child { border-left: 4px solid var(--care); }
tr.row-mid td:first-child { border-left: 4px solid var(--gold); }
tr.row-bad td:first-child { border-left: 4px solid #c0442c; }
.state { font-size: 10.5px; font-weight: 800; text-transform: uppercase;
         letter-spacing: .05em; padding: 3px 8px; border-radius: 4px; }
.s-complete   { background: var(--care); color: #fff; }
.s-inprogress { background: var(--gold); color: #2b2003; }
.s-neverrun   { background: transparent; color: var(--ink-light);
                border: 1px dashed var(--line); }

/* --- per-step explainers on the mapping page -------------------------- */
.job-x { margin: 9px 0 4px; }
.job-x summary { cursor: pointer; font-size: 12.5px; font-weight: 700;
                 color: var(--teal-700); padding: 5px 0; }
.jx { margin: 6px 0 2px; display: grid; grid-template-columns: 132px 1fr;
      gap: 5px 14px; }
@media (max-width: 620px) { .jx { grid-template-columns: 1fr; gap: 2px 0; }
  .jx dt { margin-top: 8px; } }
.jx dt { font-size: 10.5px; font-weight: 800; text-transform: uppercase;
         letter-spacing: .05em; color: var(--teal-700); padding-top: 2px; }
.jx dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.job-m b { color: var(--teal-900); }

/* --- the public-site banner injected into index.php ------------------- */
.r3-findbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--teal-50), #fff 70%);
  border: 1px solid var(--teal-300); border-left: 6px solid var(--teal-700);
  border-radius: 12px; padding: 16px 20px; margin: 0 0 20px;
}
.r3-findbar .fb-t { font-weight: 750; font-size: 15px; color: var(--teal-900); }
.r3-findbar .fb-d { font-size: 13px; color: var(--ink-light); margin-top: 3px;
                    line-height: 1.5; }
.r3-findbar .fb-a { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .r3-findbar .fb-a { margin-left: 0; width: 100%; } }

/* =====================================================================
   RESULTS-FIRST LAYOUT
   After a search the picker folds away and the answer is the page.
   ===================================================================== */
.pick.folded { display: none; }
.recap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
         background: var(--card); border: 1px solid var(--line);
         border-left: 5px solid var(--teal-700); border-radius: 11px;
         padding: 13px 17px; margin-bottom: 16px; }
.recap-b { flex: 1; min-width: 0; }
.recap-k { font-size: 10.5px; font-weight: 800; text-transform: uppercase;
           letter-spacing: .07em; color: var(--ink-light); }
.recap-v { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.rchip { font-size: 12.5px; font-weight: 600; background: var(--teal-50);
         color: var(--teal-900); border: 1px solid var(--teal-300);
         padding: 3px 10px; border-radius: 20px; }
.rchip.loc { background: var(--paper); border-color: var(--line);
             color: var(--ink-light); font-weight: 500; }

.res-head { padding-top: 0; border-top: 0; margin-top: 4px; }
.res-t { font-size: 25px; }
.res-s { font-size: 14.5px; }
.res-s b { color: var(--teal-900); font-variant-numeric: tabular-nums; }
.jumps { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.jumps a { font-size: 12.5px; font-weight: 650; text-decoration: none;
           background: #fff; color: var(--teal-700); border: 1px solid var(--line);
           padding: 5px 12px; border-radius: 20px; }
.jumps a:hover { border-color: var(--teal-500); background: var(--teal-50); }
.block { scroll-margin-top: 16px; }
.res-head { scroll-margin-top: 12px; }

/* --- installer -------------------------------------------------------- */
.ins-row { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0;
           border-top: 1px solid var(--line); }
.ins-row:first-of-type { border-top: 0; }
.ins-n { flex: none; width: 25px; height: 25px; border-radius: 50%;
         background: var(--teal-700); color: #fff; font-weight: 800;
         font-size: 12.5px; display: flex; align-items: center;
         justify-content: center; }
code.tiny { font: 11px ui-monospace, Menlo, Consolas, monospace;
            color: var(--teal-700); background: var(--paper);
            padding: 1px 6px; border-radius: 3px; display: inline-block;
            margin-top: 4px; }