.pg-card{
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.25rem;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem .6rem;
  border-radius:999px;
  border:0;
  background:#f3f4f6;
  color:#374151;   /* portfolio's .tag */
  font-family:inherit;
  font-size:.8rem; line-height:1.4;
  cursor:pointer;
  transition: opacity var(--ease);
}
.pill--off{ opacity:.4; }
.pill__dot{ width:.6rem; height:.6rem; border-radius:50%; flex:0 0 auto; }
.pill__dot--active{ background: var(--text-secondary); }
.pill__dot--inactive{
  background-color:#fff;
  background-image: repeating-linear-gradient(45deg,
      var(--text-secondary) 0, var(--text-secondary) 1.5px,
      transparent 1.5px, transparent 4px);
  border: 1.5px dotted var(--text-secondary);
}

a{ color: var(--graph-accent); transition: color var(--ease); }
a:hover{ color: var(--black); }

/* Blazor error banner: hidden until the framework shows it on a real error */
#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: #fff3cd;
  color: #664d03;
  box-shadow: 0 -1px 6px rgba(0,0,0,.12);
}
#blazor-error-ui .reload { color: inherit; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; top: .5rem; right: 1rem; }

/* Brand mark — echoes the portfolio constellation logo */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin:0;
  color: var(--black);
  text-decoration:none;
}
.brand__mark{ width:44px; height:44px; flex:0 0 auto; }
.brand__edges line{ stroke: var(--graph-edge); stroke-width:2; stroke-linecap:round; }
.brand__node{ fill: var(--graph-node); }
.brand__node--accent{ fill: var(--graph-accent); }
.brand__word{ font-family:'Swiss 721'; font-size:44px; font-weight:700; letter-spacing:-.01em; }
.brand:hover .brand__node--accent{ fill: var(--black); }

@media (max-width: 900px) {
  .brand__mark{ width:34px; height:34px; }
  .brand__word{ font-size:30px; }
}
@media (max-width: 600px) {
  .brand{ gap:.5rem; }
  .brand__mark{ width:26px; height:26px; }
  .brand__word{ font-size:22px; }
  .pill{ padding:.35rem .7rem; }   /* larger touch targets */
}