: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:20px}
/* .yp-small{font-size:12px} */
.yp-small{font-size:13px; font-family: "Verdana";}
.yp-title{font-family:"Cachet Bold", Verdana, sans-serif}
.yp-xs{font-size:11px}
.yp-muted{color:#444}

.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;border-radius:10px}
.yp-nav{margin:8px 0}
.yp-filterbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.yp-hidden{display:none}

/* CHIP STYLES */
.yp-btn{
  border:1px solid var(--border);
  background:#fff;
  padding:6px 12px;
  font-size:14px;
  margin-right:6px;
  margin-bottom:6px;
  cursor:pointer;
  border-radius:999px;   /* pill */
}
.yp-btn[aria-pressed="true"]{
    border-width: 2px;
    font-weight: 700;
    /* color: white;
    background: var(--purple); */
}
.yp-btn:hover{
    background:#DEDEDE;
}
.yp-chip{
  border:1px solid var(--border);
  padding:2px 10px;
  font-size:12px;
  margin:2px;
  background:#fff;
  border-radius:999px;  /* pill */
  display: inline-block;
}

.yp-grade{
  position:absolute;
  top:14px;
  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;
  border-radius:5px;   /* softened */
}

.yp-tooltip{
  position:absolute;
  background:#111;
  color:#fff;
  padding:4px 6px;
  border-radius:6px;
  font-size:11px;
  transform:translate(-8px,-30px);
  white-space:nowrap;
  pointer-events:none
}

/* --------------------------
   WP-THEME INSULATION LAYER
---------------------------*/
.yp-shell .yp-card,
.yp-shell .yp-chip,
.yp-shell .yp-btn,
.yp-shell .yp-input{
  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;
}
.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; border-radius:999px !important; }
.yp-shell .yp-btn[aria-pressed="true"]{ border-width:2px !important; background:#f4f4f4 !important; }
.yp-shell .yp-chip{ border-radius:999px !important; }

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

/* HARD TYPOGRAPHY + LINK RESET */
.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 */
.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;
  display: inline !important;
  text-decoration: underline !important;
  color: inherit !important;
}
.yp-card--clickable{ cursor:pointer !important; }
.yp-card--clickable:hover{ border-color:#BDBDBD !important; }
.yp-card--clickable:focus{ outline: 2px solid #111 !important; outline-offset: 2px !important; }