:root{ --border:#D6D6D6; --text:#111; --bg:#fff;
  --teal:#01A490; --blue:#00AEEF; --purple:#92278F; --red:#ED1C24; --orange:#F47920; }
.yp-shell, .yp-shell *{
  box-sizing:border-box;
  font-family: Verdana, sans-serif;
  color:var(--text);
  letter-spacing: normal;
  line-height: 1.35;
}
.yp-shell{ border-bottom:1px solid var(--border); }
.yp-band{display:grid;grid-template-columns:repeat(5,1fr);height:4px}
.yp-band > i:nth-child(1){background:var(--teal)}
.yp-band > i:nth-child(2){background:var(--blue)}
.yp-band > i:nth-child(3){background:var(--purple)}
.yp-band > i:nth-child(4){background:var(--red)}
.yp-band > i:nth-child(5){background:var(--orange)}
.yp-wrap{max-width:1152px;margin:0 auto;padding:16px}
.yp-h1{font-weight:700;font-size:44px;letter-spacing:-0.02em;color:var(--purple);margin:8px 0 2px 0}
.yp-sub{font-size:12px;margin:0 0 8px 0}
.yp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.yp-card{border:1px solid var(--border);background:#fff;position:relative}
.yp-card .cband{height:4px;background:#eee}
.yp-pad{padding:12px}
.yp-small{font-size:12px}
.yp-title{font-family:"Cachet Bold", Verdana, sans-serif}
.yp-xs{font-size:11px}
.yp-muted{color:#444}
.yp-btn{border:1px solid var(--border);background:#fff;padding:6px 10px;font-size:12px;margin-right:6px;margin-bottom:6px;cursor:pointer}
.yp-btn[aria-pressed="true"]{border-width:2px;background:#f4f4f4}
.yp-chip{border:1px solid var(--border);padding:2px 8px;font-size:12px;margin:2px;background:#fff}
.yp-grade{position:absolute;top:8px;right:8px;border:1px solid var(--border);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#fff;font-weight:400;text-transform:uppercase}
.yp-inline{display:flex;gap:6px;align-items:center;justify-content:space-between}
.yp-link{color:#0066cc;text-decoration:underline;cursor:pointer;font-size:12px}
.yp-input{border:1px solid var(--border);padding:8px;font-size:14px;width:100%;max-width:340px}
.yp-nav{margin:8px 0}
.yp-filterbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.yp-hidden{display:none}
.yp-tooltip{position:absolute;background:#111;color:#fff;padding:4px 6px;border-radius:2px;font-size:11px;transform:translate(-8px,-30px);white-space:nowrap;pointer-events:none}


/* --------------------------
   WP-THEME INSULATION LAYER
   Increases selector specificity under .yp-shell
   to keep our look consistent with the standalone.
---------------------------*/
.yp-shell .yp-card,
.yp-shell .yp-chip,
.yp-shell .yp-btn,
.yp-shell .yp-input{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Cards, grid, and inputs */
.yp-shell .yp-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;
  gap:16px !important; /* Tailwind gap-4 parity */
}
.yp-shell .yp-card{ border:1px solid var(--border) !important; background:#fff !important; }
.yp-shell .yp-card .cband{ height:4px !important; }
.yp-shell .yp-input{ border:1px solid var(--border) !important; max-width:448px !important; }

/* Typography parity */
.yp-shell .yp-small{ font-size:12px !important; }
.yp-shell .yp-xs{ font-size:11px !important; }
.yp-shell .yp-link{ font-size:12px !important; text-decoration:underline !important; }

/* Grade badge and labels */
.yp-shell .yp-grade{ text-transform:uppercase !important; }

/* Buttons / chips */
.yp-shell .yp-btn{ border:1px solid var(--border) !important; background:#fff !important; }
.yp-shell .yp-btn[aria-pressed="true"]{ border-width:2px !important; background:#f4f4f4 !important; }

/* Header title parity (standalone uses Cachet Bold + purple) */
.yp-shell .yp-h1{ font-size:44px !important; color:var(--purple) !important; }


/* --------------------------
   HARD TYPOGRAPHY + LINK RESET
   Ensure Verdana headings and inline links; insulate from WP theme.
---------------------------*/
/* Headings and titles use Verdana; main masthead keeps Cachet Bold */
.yp-shell h1, .yp-shell h2, .yp-shell h3, .yp-shell h4, .yp-shell h5, .yp-shell h6,
.yp-shell .yp-h1, .yp-shell .yp-card h3 {
  font-family: Verdana, sans-serif !important;
  letter-spacing: normal !important;
}
.yp-shell .yp-title, .yp-shell .yp-h1 {
  font-family: "Cachet Bold", Verdana, sans-serif !important;
}
.yp-shell .yp-card h3 { font-weight: 700 !important; }

/* Compact-card "View role" link should be plain underline, not a button */
.yp-shell .yp-link,
.yp-shell a.yp-link,
.yp-shell .yp-card .yp-link,
.yp-shell .yp-card a.yp-link {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline !important;
  text-decoration: underline !important;
  color: inherit !important; /* keep family color set inline */
}

/* Force uppercase for all grade badges (standard and compact) */
.yp-shell .yp-grade,
.yp-shell [class*="grade"] {
  text-transform: uppercase !important;
}