/* Styles of p-sources.js only. Shared pieces live in style.css. */
/* StatusPill (components/status-pill.tsx): rounded-full, tinted border */
.src-pill { display: inline-flex; align-items: center; flex: none; border-radius: 99px; border: 1px solid var(--border); padding: 2px 10px;
  font-size: 11px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; background: var(--muted); color: var(--muted-fg); }
.src-pill.ok { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.src-pill.info { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.src-pill.warn { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.src-pill.bad { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 20%, transparent); }

/* sources-view: summary tiles + source cards */
.src-sum { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.src-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); }
.src-sum-n { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.src-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.src-card { transition: border-color .15s; }
.src-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.src-card .card-h { padding-bottom: 12px; }
.src-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.src-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.src-stat2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; border: 1px solid var(--border); border-radius: 10px; background: var(--background); padding: 12px; }
.src-n { margin: 0; font-size: 18px; font-weight: 600; }
.src-hl { color: var(--primary); }
.src-origin { cursor: default; }
.src-more { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--card) 40%, transparent); padding: 24px; color: var(--muted-fg); font-size: 13px; }

/* source-detail-view */
.src-back { align-self: flex-start; margin-left: -8px; }
.src-tile { padding: 16px 20px; }
.src-tile-n { margin: 4px 0 0; font-size: 24px; font-weight: 600; }
.src-facts { margin: 0; }
.src-filters { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 170px 170px 180px; }
.src-pager .src-pgin { width: 64px; height: 32px; display: inline-block; }
.src-table td { vertical-align: middle; }
.src-tcell { min-width: 200px; max-width: 260px; }
.src-tcell a.truncate { display: block; min-width: 0; flex: 1 1 auto; }
.src-tcell p { max-width: 260px; }
.src-new td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.src-moi { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); flex: none; }
.src-prog { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.src-prog .bar { flex: 1 1 auto; }
.src-origin-tag { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: 10px; font-weight: 600; font-family: "JetBrains Mono", ui-monospace, monospace;
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.src-empty { height: 112px; text-align: center !important; }
.src-scroll { overflow-x: auto; }
.src-why { min-width: 220px; max-width: 420px; word-break: break-word; }
.src-ref { max-width: 320px; }
.src-ct { max-width: 220px; }
.src-ul { margin: 0; padding-left: 20px; }
.src-ul li + li { margin-top: 4px; }
.src-skip { margin: 6px 0 0; padding: 0; list-style: none; max-height: 128px; overflow-y: auto; }
.src-dlg { width: min(640px, 100%); }
.src-res { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .src-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .src-filters .search { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .src-filters, .src-res { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .src-pager { gap: 6px; }
}

.src-click { cursor: pointer; }
.src-click:hover td { background: var(--muted, rgba(0,0,0,.03)); }