/* South Bend Help Finder styles. Design elevation pass (Lane P2):
   one token system everywhere (spec Part 1). One palette: green for
   structure, gold reserved for call-a-human actions, blue #2563eb for
   certified marks only. Radii: 12px controls, 16px cards and panels,
   999px pills only. One focus ring. No element changes size, border
   width, or position on toggle, press, or selection. */
:root{
  --green:#14532d; --green-deep:#0e3d21; --green-tint:#dcfce7; --green-wash:#f0fdf4;
  --gold:#facc15; --ink:#17251b; --muted:#475569; --line:#d6ddd2; --paper:#f6f7f4;
  --card:#ffffff; --blue:#2563eb;
  --shadow:0 1px 2px rgba(23,37,27,.05),0 4px 16px rgba(23,37,27,.05);
  --gutter:16px;
}
@media(min-width:560px){:root{--gutter:20px}}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--paper);color:var(--ink);font-size:1.0625rem;line-height:1.55}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:#fff;font-weight:700;padding:.8rem 1.1rem;z-index:20;border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid #b45309;outline-offset:2px}

/* Top strip: static, slim, in palette. Replaces the sticky rust banner. */
.top-strip{background:#fef3c7;color:#92400e;font-weight:600;font-size:.9375rem;text-align:center;padding:8px 16px}

header{background:var(--green);color:#fff;padding:24px 0 20px}
header .wrap{max-width:720px;margin:0 auto;padding:0 var(--gutter)}
header h1{margin:0 0 8px;font-size:1.75rem;font-weight:700;line-height:1.15}
.tagline{margin:0 0 16px;font-size:1rem;line-height:1.5;max-width:34rem}
.lang-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lang-btn,.call211{min-height:52px;border-radius:999px;padding:8px 16px;font-size:1rem;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer}
.lang-btn.active{background:#fff;color:var(--green)}
.call211{background:var(--gold);color:var(--ink);border-color:var(--gold);text-decoration:none;font-weight:700;display:inline-flex;align-items:center}

main{max-width:720px;margin:0 auto;padding:8px var(--gutter) 16px}
h2{font-size:1.375rem;font-weight:700;line-height:1.25;margin:24px 0 8px}
h2:focus{outline:3px solid #b45309;outline-offset:2px}
/* Chat heading is focused by script when the panel opens; keep that
   programmatic focus ring-free, keep the one ring for keyboard focus. */
#chat-h:focus:not(:focus-visible){outline:none}
#report-h:focus:not(:focus-visible),#day-h:focus:not(:focus-visible){outline:none}

/* Need picker: two columns at every width, constant borders, icon cells. */
.need-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:560px){.need-grid{grid-template-columns:1fr 1fr 1fr}}
.need-grid button{min-height:64px;font-size:1.0625rem;border-radius:12px;border:2px solid var(--green);background:#fff;color:var(--ink);cursor:pointer;text-align:left;padding:12px;display:flex;align-items:center;gap:8px;transition:background 150ms ease,color 150ms ease}
.need-grid button.on{background:var(--green-tint)}
.tile-ic{flex:0 0 28px;display:flex;align-items:center;justify-content:center;color:var(--green)}
.tile-ic svg{width:24px;height:24px}
.tile-check{flex:0 0 20px;text-align:center;font-weight:700;color:var(--green);visibility:hidden}
.need-grid button.on .tile-check{visibility:visible}
.tile-lbl{flex:1 1 auto;overflow-wrap:anywhere}

/* Toggle pills: Open now, Near me, Closest first, List, Map.
   The check slot is always rendered (invisible until selected), so
   selection never moves anything. Selected state is tint plus check
   only, deliberately no weight change: a bolder auto-width label
   would widen the pill by a few pixels and shift its neighbor,
   which the pixel-identical toggle rule forbids. The same rule is
   applied to the need tiles, the language buttons, and .pd-tab. */
.open-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.open-toggle{min-height:52px;font-size:1.0625rem;border-radius:999px;border:2px solid var(--green);background:#fff;color:var(--ink);cursor:pointer;padding:8px 16px;display:inline-flex;align-items:center;gap:6px;transition:background 150ms ease,color 150ms ease}
.open-toggle::before{content:"✓";font-weight:700;color:var(--green);width:1em;text-align:center;visibility:hidden}
.open-toggle.on{background:var(--green-tint)}
.open-toggle.on::before{visibility:visible}
.btn-ic{display:inline-flex;align-items:center;color:var(--green)}
.btn-ic svg{width:20px;height:20px}

.view-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.search-label{display:block;font-weight:600}
.search-label input{display:block;width:100%;min-height:52px;font-size:1.0625rem;padding:8px 12px;border:2px solid #6b7280;border-radius:12px;margin-top:8px}
#search::placeholder{color:var(--muted);opacity:1}
.count{color:var(--muted);font-size:.9375rem;margin:8px 0 0}
.loading-line{color:var(--muted);font-weight:600;font-size:1.05rem}
.today-note{background:#fffbeb;border:1px solid #f59e0b;border-radius:12px;padding:12px 16px;margin:12px 0 0}
.hidden{display:none!important}
.data-error{background:#fef2f2;border:2px solid #b91c1c;border-radius:12px;padding:16px;margin:12px 0}
.today-divider{font-weight:700;background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;border-radius:12px;padding:8px 12px;margin:16px 0 0}

/* Map frame: loading veil, brand pins, restyled zoom. */
#map-wrap{margin:12px 0 0;position:relative}
#map{height:320px;width:100%;border:1px solid var(--line);border-radius:16px;position:relative;z-index:0;background:#e8efe6}
.map-veil{position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:#e8efe6;border-radius:16px;color:var(--muted);font-weight:600;padding:16px;text-align:center}
.pin-wrap{background:none;border:none}
.pin-ic{display:block;width:30px;height:30px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 1px 4px rgba(23,37,27,.35);position:relative}
.pin-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff}
.pin-ic.cert{box-shadow:0 0 0 3px var(--blue),0 1px 4px rgba(23,37,27,.35)}
.leaflet-bar{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.leaflet-bar a{width:48px;height:48px;line-height:48px;color:var(--ink);border-bottom:1px solid var(--line);background:#fff}
.leaflet-bar a:last-child{border-bottom:none}
.leaflet-control-attribution{background:transparent!important;font-size:11px;color:var(--muted)}
.leaflet-control-attribution a{color:var(--muted)}

/* Buttons: one system, three tiers plus toggle pills (above). */
.big-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;background:var(--green);color:#fff;border:none;border-radius:12px;padding:12px 20px;font-size:1.0625rem;font-weight:700;text-decoration:none;cursor:pointer;transition:background 150ms ease}
.big-btn:active{background:var(--green-deep)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:#fff;color:var(--ink);border:2px solid var(--green);border-radius:12px;padding:8px 16px;font-size:1.0625rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background 150ms ease,color 150ms ease}
.mini{min-height:48px;border-radius:12px;border:1px solid var(--green);background:#fff;color:var(--ink);padding:8px 16px;cursor:pointer;font-size:1rem;transition:background 150ms ease,color 150ms ease}
.mini.danger{color:#7f1d1d;border-color:#b91c1c}

/* Resource card (spec order): title, trust row, state row, chips,
   facts, call strip, source row, action row. */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:16px 0;box-shadow:var(--shadow)}
.card h3{margin:0;font-size:1.25rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card-head h3{flex:1 1 auto;min-width:0}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.cert-badge{color:var(--blue);font-weight:700;font-size:.9375rem;white-space:nowrap}
.cert-star{color:var(--blue)}
.cert-line{font-size:.875rem;color:var(--blue);font-weight:600;margin:8px 0 0}
.badge{font-size:.875rem;font-weight:700;border-radius:999px;padding:2px 10px}
.badge.v{background:var(--green-tint);color:var(--green)}
.badge.u{background:#fef3c7;color:#92400e}
.state-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.state{font-size:.9375rem;font-weight:700;border-radius:999px;padding:2px 10px;display:inline-block}
.state.open{background:var(--green-tint);color:var(--green)}
.state.closed{background:#fee2e2;color:#7f1d1d}
.state.call{background:#fef3c7;color:#92400e}
.state.pattern{background:#ede9fe;color:#4c1d95}
.today-hours{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chip{background:#e0f2e4;border-radius:999px;padding:2px 10px;font-size:.875rem;font-weight:600}
.fact{display:flex;gap:8px;margin:12px 0 0}
.fact-ic{flex:0 0 28px;display:flex;justify-content:center;padding-top:3px;color:var(--green)}
.fact-ic svg{width:22px;height:22px}
.fact-label{font-weight:700}
.dist{font-weight:700;color:var(--green)}
.card>p{margin:12px 0 0}
a.phone-row{display:inline-flex;align-items:center;min-height:48px;color:var(--green);font-weight:700}
.verify-box{background:#fffbeb;border-left:4px solid #f59e0b;border-radius:12px;padding:12px 16px;margin:12px 0 0}
.verify-box p{margin:4px 0}
.call-strip{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;background:var(--gold);color:var(--ink);font-weight:700;font-size:1.0625rem;border-radius:12px;text-decoration:none;padding:8px 16px;margin:12px 0 0}
.call-strip svg{width:22px;height:22px;flex:none}
details.src{margin:12px 0 0}
.src summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600;color:var(--green)}
.src-line{font-size:.9375rem;margin:0}
.src-link{display:flex;align-items:center;min-height:48px;padding:8px 0;color:var(--green);font-weight:600}
.report-row{margin:2px 0 0}
.report-link{background:none;border:none;padding:8px 0;min-height:48px;color:var(--green);font: inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.report-place{font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.actions a,.actions button{min-height:52px;min-width:0;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:12px;font-size:1rem;font-weight:600;text-decoration:none;border:2px solid var(--green);background:#fff;color:var(--ink);cursor:pointer;flex:1 1 0;text-align:center;transition:background 150ms ease,color 150ms ease}
.actions a.call-strip{flex:1 1 100%;background:var(--gold);border:none;color:var(--ink);font-weight:700;margin:0}
.a-add.added,.a-save.added{background:var(--green-tint)}
@media(max-width:379px){.actions a,.actions button{flex:1 1 40%}}

/* Panels and shared panel pieces. */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:24px 0;box-shadow:var(--shadow)}
.panel h2{margin-top:0}
.small{font-size:.9375rem;color:var(--muted)}
.privacy{font-size:.9375rem;background:var(--green-wash);border-radius:12px;padding:12px 16px}
.day-msg{background:#fef2f2;border:1px solid #b91c1c;border-radius:12px;padding:12px 16px;font-weight:600}
.empty-block{background:var(--green-wash);border-radius:12px;padding:20px;margin:12px 0}
.empty-block p{margin:0}
.empty-block p+p{margin-top:8px}

/* My Day and Saved: compact rows. */
#day-list,#saved-list{list-style:none;padding:0;margin:0}
.stop-row{border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0}
.stop-name{display:block;font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.stop-status{display:block;color:var(--muted);font-size:.9375rem;margin-top:4px}
.stop-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px}

/* My Plan checkbox rows: icon cell keeps wrapped lines in one column. */
.checks{display:grid;gap:8px;margin:12px 0}
.checks label{display:flex;gap:10px;align-items:center;background:var(--green-wash);border:1px solid #bbf7d0;border-radius:12px;padding:12px;font-size:1.02rem;overflow-wrap:anywhere}
.checks input{width:24px;height:24px;flex:none}
.plan-ic{flex:0 0 28px;display:flex;align-items:center;justify-content:center;color:var(--green)}
.plan-ic svg{width:24px;height:24px}
.plan-lbl{flex:1 1 auto}
#plan-list li{margin:12px 0}
#plan-list .script{background:#fffbeb;border-left:4px solid #f59e0b;border-radius:12px;padding:12px 16px;margin-top:8px;font-style:italic}

/* Account: methods separated by "or" hairlines, socials are secondary. */
.acct-social{display:grid;gap:8px;margin:12px 0 0}
.acct-social .btn-secondary{width:100%}
.or-sep{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:.9375rem;font-weight:600}
.or-sep::before,.or-sep::after{content:"";flex:1 1 auto;border-top:1px solid var(--line)}
.acct-form{margin:12px 0}
.acct-form label{display:block;font-weight:600}
.acct-form input{display:block;width:100%;min-height:52px;font-size:1.0625rem;padding:8px 12px;border:2px solid #6b7280;border-radius:12px;margin:8px 0 12px}
.acct-form select,.acct-form textarea{display:block;width:100%;min-height:52px;font-size:1.0625rem;padding:8px 12px;border:2px solid #6b7280;border-radius:12px;margin:8px 0 12px;font-family:inherit}

/* Footer: a designed closing block. */
footer{max-width:720px;margin:24px auto 0;padding:24px var(--gutter) 48px;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem;overflow-wrap:anywhere}
.foot-star{font-weight:600;color:var(--blue);font-size:1rem}
.foot-close{color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-links a{display:inline-flex;align-items:center;min-height:48px;color:var(--green);font-weight:600}
.foot-back{display:inline-flex;align-items:center;min-height:48px;color:var(--green);font-weight:600}
.version-line{font-weight:600;color:var(--muted)}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ===== Chat agent ===== */
.chat-entry-row{margin:16px 0 0}
.chat-panel{padding:20px}
.chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.chat-head h2{margin-top:0}
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;padding:4px 0;margin:12px 0 0}
.chat-msg{max-width:92%;border-radius:16px;padding:12px 16px;overflow-wrap:anywhere}
.chat-msg p{margin:4px 0}
.chat-msg.bot{background:var(--green-wash);border:1px solid #bbf7d0;align-self:flex-start;box-shadow:var(--shadow)}
.chat-msg.user{background:var(--green);color:#fff;align-self:flex-end}
.chat-msg.user p{font-weight:600}
.chat-place{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin:8px 0;box-shadow:var(--shadow)}
.chat-place>p{margin:12px 0 0}
.chat-place>p:first-child{margin-top:0}
.chat-place-name{font-size:1.05rem}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chat-chip{min-height:52px;border-radius:999px;border:2px solid var(--green);background:#fff;color:var(--ink);cursor:pointer;padding:8px 16px;font-size:1rem;text-decoration:none;display:inline-flex;align-items:center;transition:background 150ms ease,color 150ms ease}
.chat-chip.link{background:var(--gold);border-color:var(--gold);font-weight:700;color:var(--ink)}
.chat-form{display:flex;gap:8px;margin-top:12px}
.chat-form input{flex:1 1 auto;min-width:0;min-height:52px;font-size:1.0625rem;padding:8px 12px;border:2px solid #6b7280;border-radius:12px}
.chat-form button{flex:none;min-height:52px;border-radius:12px}

/* ===== Forms ===== */
.form-row{border-top:1px solid var(--line);padding:12px 0}
.form-card{border:1px solid var(--line);border-radius:16px;padding:20px;margin:16px 0;background:#fff;box-shadow:var(--shadow)}
.form-card h3{margin:0 0 8px}
.form-field{margin:12px 0}
.form-label{display:block;font-weight:700;margin-bottom:8px}
.form-req{font-weight:400;color:var(--muted)}
.form-field input[type=text],.form-field input[type=date]{display:block;width:100%;min-height:52px;font-size:1.0625rem;padding:8px 12px;border:2px solid #6b7280;border-radius:12px}
.form-opt{display:inline-flex;align-items:center;gap:8px;background:var(--green-wash);border:1px solid #bbf7d0;border-radius:12px;padding:8px 12px;margin:4px 8px 4px 0;font-size:1rem}
.form-opt input{width:22px;height:22px;flex:none}
.form-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#form-gate{font-weight:600}
.panel p,.panel li,.card p{max-width:65ch}
.btn-secondary:active,.mini:active,.open-toggle:active,.chat-chip:active,.need-grid button:active,.actions a:active,.actions button:active{background:var(--green-tint)}

/* Stage 2 today line: spacing only. The pill itself is the shipped
   .state treatment (same padding, same color families); the pantry's
   one-line note rides beside it in plain text. */
.today-row{margin-top:8px}
.today-note-text{font-weight:600}