/* trusted_help.css — the Trusted Help directory.
 *
 * "Quiet List" design (founder reference trusted-help-sample-4, 2026-08-28):
 * a framed two-column desktop layout (tinted intro panel | results), underline
 * category tabs, hairline provider rows with round tint logos, an outlined
 * neutral Call/Email secondary action, and the helped action as quiet muted
 * inline text. Mobile stacks the same pieces frameless. All colors ride the
 * theme tokens so dark mode holds. */

/* ── Layout ─────────────────────────────────────────────────────────── */
.wg-trusted-main { max-width: 1200px; margin: 0 auto; padding: 4px 16px 32px; }
.wg-trusted-muted { color: var(--wg-muted); text-align: center; padding: 18px 0; }

.wg-tr-layout { display: block; }
@media (min-width: 900px) {
  .wg-tr-layout {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch;
    border: 1px solid var(--wg-border-soft); border-radius: 20px; overflow: hidden;
    background: var(--wg-raised); box-shadow: var(--wg-shadow-card); min-height: 540px;
  }
}

/* ── Intro panel ────────────────────────────────────────────────────── */
.wg-tr-intro { padding: 20px 2px 4px; }
@media (min-width: 900px) {
  .wg-tr-intro { background: var(--wg-tint); padding: 42px 34px; }
}
.wg-tr-eyebrow { font-size: 0.68rem; font-weight: 800; color: var(--wg-color-dark); text-transform: uppercase; letter-spacing: 0.11em; }
.wg-tr-intro h1 { font-size: clamp(1.9rem, 6vw, 2.35rem); line-height: 1.07; letter-spacing: -0.045em; margin: 7px 0 10px; text-wrap: balance; }
.wg-tr-introtx { font-size: 0.84rem; line-height: 1.5; color: var(--wg-muted); margin: 0 0 20px; max-width: 46ch; }

.wg-tr-search {
  height: 49px; background: var(--wg-tint); border: 1px solid var(--wg-border-soft); border-radius: 14px;
  display: flex; align-items: center; gap: 9px; padding: 0 13px;
}
@media (min-width: 900px) {
  .wg-tr-search { background: var(--wg-raised); }
}
.wg-tr-search .wg-ico-in { width: 16px; height: 16px; color: var(--wg-muted); flex: none; }
.wg-tr-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--wg-text); font: inherit; font-size: 16px; }
.wg-tr-search:focus-within { border-color: var(--wg-color); }

.wg-tr-trust { display: none; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--wg-border-soft); gap: 9px; color: var(--wg-color-dark); }
.wg-tr-trust .wg-ico-in { flex: none; width: 18px; height: 18px; }
.wg-tr-trust p { font-size: 0.72rem; line-height: 1.45; margin: 0; }
/* Mobile: the trust note becomes a tinted box after the list. */
.wg-tr-trust-m { display: flex; margin-top: 18px; padding: 11px; border-top: 0; background: var(--wg-tint); border-radius: 13px; }
@media (min-width: 900px) {
  .wg-tr-trust { display: flex; }
  .wg-tr-trust-m { display: none; }
}

/* ── Results column ─────────────────────────────────────────────────── */
.wg-tr-results { padding: 14px 0 0; }
@media (min-width: 900px) {
  .wg-tr-results { padding: 34px 30px; min-width: 0; }
}
.wg-tr-resulttop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.wg-tr-resulttop h2 { font-size: 1rem; margin: 0; }
/* "Are you one of these professionals?" / "My cards": its own full-width
   row right under the search field, for members and guests alike. */
.wg-tr-mycards {
  display: flex; align-items: center; justify-content: center; width: 100%;
  margin-top: 12px; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--wg-border-soft); border-radius: 14px; background: var(--wg-raised);
  color: var(--wg-color-dark); font: inherit; font-weight: 700; font-size: 0.78rem;
  text-align: center; cursor: pointer;
}
.wg-tr-mycards:hover { border-color: var(--wg-color); }
.wg-tr-mycards:focus-visible { outline: 2px solid var(--wg-color); outline-offset: 2px; }

/* Underline category tabs. */
.wg-tr-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--wg-border-soft); margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.wg-tr-tabs::-webkit-scrollbar { display: none; }
.wg-tr-tab {
  flex: none; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--wg-muted); font: inherit; font-weight: 700; font-size: 0.76rem; padding: 6px 1px 10px; cursor: pointer; white-space: nowrap;
}
.wg-tr-tab.is-on { color: var(--wg-color-dark); border-bottom-color: var(--wg-color); }
.wg-tr-tab:focus-visible { outline: 2px solid var(--wg-color); outline-offset: 2px; border-radius: 4px; }
/* Clinic specialty sub-filter: a lighter second row of the same tabs. */
.wg-tr-subtabs { border-bottom: 0; margin: 2px 0 0; gap: 14px; }
.wg-tr-subtabs .wg-tr-tab { font-size: 0.72rem; padding: 6px 1px 8px; }
.wg-tr-footnote { font-size: 0.7rem; color: var(--wg-muted); margin: 12px 0 0; }

/* ── Provider rows ──────────────────────────────────────────────────── */
.wg-tr-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 5px 12px;
  align-items: center; padding: 15px 0; border-bottom: 1px solid var(--wg-border-soft);
}
.wg-tr-logo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--wg-tint); color: var(--wg-color-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 0.9rem;
  border: 1px solid var(--wg-border-soft); align-self: start;
}
.wg-tr-rowmain { min-width: 0; }
.wg-tr-name { font-size: 0.86rem; font-weight: 800; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wg-tr-check { color: var(--wg-color); display: inline-flex; }
.wg-tr-check .wg-ico-in { width: 14px; height: 14px; }
.wg-tr-type { font-size: 0.72rem; color: var(--wg-muted); margin-top: 3px; }
.wg-tr-rowdesc {
  font-size: 0.76rem; color: var(--wg-muted); line-height: 1.45; margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wg-tr-detail { font-size: 0.72rem; color: var(--wg-muted); margin-top: 3px; }

/* Actions: Call / Email / Website as quiet outlined secondaries; the helped
   action stays a near-invisible inline whisper (founder spec). */
/* With Message + Call + Directions + the quiet helped action a row can carry
   four items: it MUST wrap. An unwrapped overflow here made the whole page
   wider than the phone screen, which detaches iOS position:fixed elements
   (the bottom tab bar drifted mid-page - founder report 2026-08-28). */
.wg-tr-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 11px; }
.wg-tr-act {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 13px; border: 1px solid var(--wg-border-soft); border-radius: 9px;
  background: transparent; color: var(--wg-text); font: inherit; font-weight: 700; font-size: 0.72rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.wg-tr-act:hover { border-color: var(--wg-border); text-decoration: none; background: var(--wg-surface); }
.wg-tr-act:focus-visible { outline: 2px solid var(--wg-color); outline-offset: 2px; }
.wg-tr-quiet {
  display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent;
  color: var(--wg-muted); font: inherit; font-weight: 500; font-size: 0.66rem; opacity: 0.72; padding: 4px 0; cursor: pointer; white-space: nowrap;
}
.wg-tr-quiet .wg-ico-in { width: 11px; height: 11px; }
.wg-tr-quiet:hover { opacity: 1; }
.wg-tr-quiet:focus-visible { outline: 2px solid var(--wg-color); outline-offset: 2px; border-radius: 4px; opacity: 1; }
.wg-tr-quiet.is-on { color: var(--wg-color-dark); opacity: 1; }

@media (max-width: 899.98px) {
  .wg-tr-row { grid-template-columns: 42px minmax(0, 1fr); }
  .wg-tr-logo { width: 42px; height: 42px; }
  .wg-tr-acts { grid-column: 2; justify-content: flex-start; gap: 15px; margin-top: 5px; }
  .wg-tr-act { min-height: 30px; padding: 0 12px; }
}

/* ── My cards picker + statuses (unchanged behavior) ────────────────── */
.wg-tr-pickcard { max-width: 420px; }
.wg-tr-pickrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--wg-border-soft); border-radius: var(--wg-radius-card); background: var(--wg-raised); font: inherit; text-align: left; cursor: pointer; color: var(--wg-text); }
.wg-tr-pickrow:hover { border-color: var(--wg-color); }
.wg-tr-picklogo { width: 40px; height: 40px; border-radius: var(--wg-radius); object-fit: cover; flex: none; }
.wg-tr-pickmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wg-tr-pickmain small { color: var(--wg-danger-ink); font-size: 0.76rem; }
.wg-tr-st { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.wg-tr-st.is-pending { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }
.wg-tr-st.is-rejected { background: var(--wg-danger-tint); color: var(--wg-danger-ink); }
.wg-tr-st.is-live { background: var(--wg-tint); color: var(--wg-color-dark); }
.wg-tr-st.is-hidden { background: var(--wg-surface); color: var(--wg-muted); border: 1px solid var(--wg-border-soft); }
.wg-tr-picknew { width: 100%; justify-content: center; margin-top: 4px; }

/* ── The submission form modal (unchanged behavior) ─────────────────── */
.wg-modal-card.wg-tr-formcard { max-width: 560px; max-height: 88vh; overflow-y: auto; margin: 0; }
.wg-tr-formnote { margin: 0 0 12px; color: var(--wg-muted); font-size: 0.88rem; line-height: 1.45; }
.wg-tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wg-tr-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.wg-tr-field > span { color: var(--wg-muted); font-weight: 600; }
.wg-tr-field input, .wg-tr-field select, .wg-tr-field textarea { padding: 9px 11px; border: 1px solid var(--wg-border); border-radius: var(--wg-radius); background: var(--wg-raised); color: var(--wg-text); font: inherit; font-size: 16px; }
.wg-tr-wide { grid-column: 1 / -1; }
.wg-tr-searchbtn { align-self: flex-start; }
.wg-tr-map { height: 180px; border-radius: var(--wg-radius); overflow: hidden; border: 1px solid var(--wg-border-soft); margin: 6px 0; }
.wg-tr-map[hidden] { display: none; }
.wg-tr-formbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* Remove + Hide sit left of the row; Cancel/Send stay right. */
.wg-tr-removebtn { color: var(--wg-danger-ink); }
#trf-hide { margin-right: auto; }
.wg-tr-formbtns { flex-wrap: wrap; }
.wg-tr-langchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-tr-langchip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--wg-border-soft); background: var(--wg-surface); color: var(--wg-muted); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.wg-tr-langchip.is-on { background: var(--wg-color); border-color: var(--wg-color); color: var(--wg-on-brand); }
.wg-tr-langchip:focus-visible { outline: 2px solid var(--wg-color); outline-offset: 2px; }
/* Education & admissions block (2026-09-06): shown only for that category.
   Its own grid so the two short inputs sit side by side like the rest. */
.wg-tr-edu { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wg-tr-edu[hidden] { display: none; }
.wg-tr-cb { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; cursor: pointer; }
.wg-tr-cb input { margin-top: 3px; accent-color: var(--wg-color); }
/* The rule note reuses the trust box look, visible at every width. */
.wg-tr-trust.wg-tr-edurule { display: flex; margin: 0; padding: 11px; border-top: 0; background: var(--wg-tint); border-radius: 13px; }
.wg-tr-imgrow { display: flex; align-items: center; gap: 10px; }
.wg-tr-imgprev { max-width: 180px; max-height: 100px; border-radius: var(--wg-radius); border: 1px solid var(--wg-border-soft); object-fit: cover; }

/* ── Suggest-a-clinic modal (unchanged behavior) ────────────────────── */
.wg-clsug-card { max-width: 460px; max-height: 86vh; overflow-y: auto; }
.wg-clsug-note { margin: 4px 0 10px; color: var(--wg-muted); font-size: 0.88rem; line-height: 1.45; }
.wg-clsug-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 0.86rem; }
.wg-clsug-field > span { color: var(--wg-muted); font-weight: 600; }
.wg-clsug-field input, .wg-clsug-field select, .wg-clsug-field textarea { padding: 9px 11px; border: 1px solid var(--wg-border); border-radius: var(--wg-radius); background: var(--wg-raised); color: var(--wg-text); font: inherit; font-size: 16px; }
.wg-clsug-field .wg-btn { align-self: flex-start; }
.wg-clsug-map { height: 160px; border-radius: var(--wg-radius); overflow: hidden; margin: 6px 0; border: 1px solid var(--wg-border-soft); }
.wg-clsug-map[hidden] { display: none; }

/* Suggest button on the clinics tab: rendered as a quiet outlined action. */
.wg-tr-sugrow { margin: 10px 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .wg-trusted-main * { transition: none !important; }
}

/* First screen (2026-09): skeleton while the list renders, a real failure
   state, and the add-card entry after the entries. */
.wg-tr-skel { display: grid; gap: 10px; }
.wg-tr-skel > div { height: 84px; border-radius: 14px; background: linear-gradient(90deg, var(--wg-surface, #f2f4f3) 25%, var(--wg-border-soft, #e9ecea) 50%, var(--wg-surface, #f2f4f3) 75%); background-size: 200% 100%; animation: wg-tr-shimmer 1.2s linear infinite; }
@keyframes wg-tr-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wg-tr-skel > div { animation: none; } }
.wg-tr-fail { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 0; }
.wg-tr-results .wg-tr-mycards { margin-top: 16px; }
.wg-tr-fail { border: 1px solid var(--wg-border-soft); border-radius: 14px; padding: 14px; background: var(--wg-surface, var(--wg-raised)); }
.wg-tr-fail b { font-size: .95rem; }
.wg-tr-fail p { margin: 0; }
.wg-tr-fail-numbers { margin: 12px 0 0; font-size: .84rem; line-height: 1.6; color: var(--wg-muted); }