/* Community Resource Directory — front-end styles (scoped to .crd) */
.crd{
  /* contrast-checked for WCAG 2.1 AA on their backgrounds */
  --bg:#f6f7f9;--card:#fff;--ink:#1c2430;--muted:#4f5b69;--line:#d7dce4;
  --brand:#1a567f;--chip:#eef3f8;--chip-ink:#235072;
  --green:#1c6f46;--green-bg:#e6f4ec;--amber:#7e5800;--amber-bg:#faeed3;--gray:#48535f;--gray-bg:#e9ebef;
  --font:'Public Sans',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Fraunces','Iowan Old Style',Georgia,"Times New Roman",serif;
  --shadow:0 1px 2px rgba(16,30,54,.05),0 3px 10px rgba(16,30,54,.06);
  --shadow-lg:0 6px 20px rgba(16,30,54,.11);
  color:var(--ink);font:16px/1.55 var(--font);
  /* contain the directory on a soft surface so white cards/fields read clearly */
  background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:clamp(14px,2.4vw,26px);
}
.crd *{box-sizing:border-box}
/* Defensive: our component rules set display: on classes, which would override the
   [hidden] attribute's display:none. This wins (class+attr specificity) so ANY
   toggled element (reset btn, QR panel, correction form, active-cat chip) hides reliably. */
.crd [hidden]{display:none}
.crd a{color:var(--brand)}
/* WCAG 1.4.1: inline links in card text must be distinguishable by more than color */
.crd-c a{text-decoration:underline;text-underline-offset:.15em}
.crd-title{margin:0 0 14px;font-family:var(--font-head);font-weight:600;font-size:clamp(1.5rem,3.5vw,2rem);line-height:1.15;letter-spacing:.005em;color:var(--ink)}
.crd-banner{background:#fff7e6;border:1px solid #f0dca8;color:#6b5200;font-size:.86rem;padding:9px 12px;border-radius:10px;margin-bottom:14px}
.crd-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#crd-q{flex:1;min-width:220px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:1rem;background:#fff}
.crd select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.92rem}
.crd-btn,.crd button.crd-btn{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:.9rem;color:var(--ink)}
.crd-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
#crd-cat{min-width:210px}
.crd-activecat{margin-top:11px;font-size:.88rem;color:var(--muted)}
.crd-catchip{display:inline-flex;align-items:center;gap:6px;margin-left:6px;background:var(--chip);color:var(--chip-ink);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 12px;font-size:.86rem;font-weight:600}
.crd-catchip-x{border:0;background:rgba(16,30,54,.08);color:inherit;cursor:pointer;min-width:22px;height:22px;border-radius:50%;font-size:.72rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.crd-catchip-x:hover{background:rgba(16,30,54,.16)}
.crd-count{color:var(--muted);font-size:.9rem;margin:14px 0 4px}
.crd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.crd-c{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);transition:box-shadow .15s ease,transform .15s ease}
.crd-c:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.crd-c h2{margin:0;font-family:var(--font-head);font-weight:600;font-size:1.2rem;line-height:1.2;letter-spacing:.005em}
.crd-org{color:var(--muted);font-size:.88rem;margin-top:1px}
.crd-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.crd-badge{font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:4px 8px;border-radius:7px;white-space:nowrap;flex:none}
.b-high{color:var(--green);background:var(--green-bg)}
.b-med{color:var(--amber);background:var(--amber-bg)}
.b-low{color:var(--gray);background:var(--gray-bg)}
.crd-chips{display:flex;gap:5px;flex-wrap:wrap}
.crd-chip{background:var(--chip);color:var(--chip-ink);border-radius:6px;padding:2px 8px;font-size:.72rem}
.crd-chip.dv{background:#fde8e8;color:#9a2a2a}
.crd-chip.voucher{background:#fbeede;color:#8a5a00}
.crd-narr{font-size:.92rem}
.crd-meta{display:grid;grid-template-columns:18px 1fr;gap:6px 8px;font-size:.86rem;color:#33414f}
.crd-meta .ic{opacity:.7;text-align:center}
.crd-src{border-top:1px dashed var(--line);margin-top:4px;padding-top:8px;font-size:.74rem;color:var(--muted)}
.crd-report{align-self:flex-start;background:none;border:none;color:var(--brand);cursor:pointer;font-size:.8rem;padding:0;text-decoration:underline}
.crd-cform{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.crd-cform[hidden]{display:none}  /* author display:flex overrides UA [hidden]; restore hidden-by-default */
.crd-cform input,.crd-cform textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.85rem;font-family:inherit}
.crd-cform textarea{min-height:60px;resize:vertical}
.crd-cactions{display:flex;align-items:center;gap:10px}
.crd-cmsg{font-size:.8rem;color:var(--muted)}
.crd-empty{padding:36px;text-align:center;color:var(--muted);grid-column:1/-1}

/* --- accessibility: visible focus + adequate touch targets --- */
.crd :focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.crd a:focus-visible{outline-offset:1px}
.crd-report{min-height:40px;display:inline-flex;align-items:center}      /* easier to tap */
.crd-btn{min-height:40px;display:inline-flex;align-items:center;gap:6px}
@media(prefers-reduced-motion:reduce){.crd *{transition:none!important}}
@media(prefers-contrast:more){.crd-c,.crd select,#crd-q,.crd-btn{border-color:#000}}

/* --- actions row (count + print/QR) --- */
.crd-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 4px}
.crd-actions .crd-count{margin:0}
.crd-actions-r{display:flex;gap:8px;flex-wrap:wrap}
.crd-qrpanel{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.crd-qrpanel[hidden]{display:none}  /* author display:flex overrides UA [hidden]; keep it hidden until the button toggles it */
.crd-qrpanel p{margin:0;font-size:.88rem;color:var(--muted)}
.crd-qr{width:132px;height:132px;flex:none}
.crd-qr svg{width:132px;height:132px;display:block}
@media(max-width:520px){.crd-grid{grid-template-columns:1fr}.crd-qrpanel{flex-direction:column;text-align:center}}

/* --- fallback if someone prints the page directly (the Print packet button is the primary path) --- */
@media print{
  .crd-banner,.crd-controls,.crd-activecat,.crd-actions,.crd-qrpanel,.crd-report,.crd-cform{display:none!important}
  .crd-grid{display:block}
  .crd-c{break-inside:avoid;border:none;border-bottom:1px solid #999;border-radius:0;padding:8px 0}
  .crd a{color:#000;text-decoration:none}
}

/* --- subtle elevation so fields/panels separate from the surface (no contrast change) --- */
#crd-q,.crd select,.crd-btn{box-shadow:0 1px 2px rgba(16,30,54,.05)}
.crd-banner,.crd-qrpanel{box-shadow:var(--shadow)}
.crd-cform{background:#fcfdfe;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:6px}
@media print{ #crd-q,.crd select,.crd-btn,.crd-c,.crd-banner{box-shadow:none} }