/* Buttons, forms, tables, badges, the event feed. Scoped by pl- classes. */
.pl-btn {
  font: inherit; font-size: 14px; padding: 7px 14px; border-radius: var(--pl-radius); cursor: pointer;
  border: 1px solid var(--pl-accent); background: var(--pl-accent); color: #fff; text-decoration: none;
}
.pl-btn:hover, .pl-btn:focus-visible { filter: brightness(1.1); }
.pl-btn:disabled { opacity: .5; cursor: default; }
.pl-btn-ghost { background: transparent; color: var(--pl-ink); border-color: var(--pl-line); }
.pl-btn-danger { background: var(--pl-bad); border-color: var(--pl-bad); }

.pl-form { display: grid; gap: 10px; margin-top: 12px; }
.pl-form label { display: grid; gap: 4px; font-size: 13px; color: var(--pl-muted); }
.pl-form input, .pl-form select, .pl-form textarea {
  font: inherit; font-size: 14px; color: var(--pl-ink); background: var(--pl-bg);
  border: 1px solid var(--pl-line); border-radius: var(--pl-radius); padding: 7px 9px;
}
.pl-form textarea { font-family: var(--pl-mono); min-height: 90px; }
.pl-form[hidden], .pl-form [hidden] { display: none; }   /* the grid display above would beat the attribute */
.pl-form .pl-help { font-size: 12px; }
.pl-inline { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.pl-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--pl-surface); }
.pl-table th, .pl-table td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--pl-line); }
.pl-table th { color: var(--pl-muted); font-weight: 600; }
.pl-table td.pl-num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-scroll { overflow-x: auto; border: 1px solid var(--pl-line); border-radius: var(--pl-radius); }

.pl-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--pl-bg);
  border: 1px solid var(--pl-line); color: var(--pl-muted); }
.pl-badge[data-tone="good"] { color: var(--pl-good); border-color: var(--pl-good); }
.pl-badge[data-tone="bad"] { color: var(--pl-bad); border-color: var(--pl-bad); }
.pl-badge[data-tone="warn"] { color: var(--pl-warn); border-color: var(--pl-warn); }

.pl-msg { font-size: 13px; margin-top: 8px; white-space: pre-wrap; }
.pl-msg[data-tone="good"] { color: var(--pl-good); }
.pl-msg[data-tone="bad"] { color: var(--pl-bad); }

.pl-progress { height: 6px; background: var(--pl-bg); border-radius: 3px; overflow: hidden; min-width: 80px; }
.pl-progress > i { display: block; height: 100%; background: var(--pl-accent); transition: width .4s; }

.pl-feed { max-height: 420px; overflow-y: auto; font-size: 13px; }
.pl-feed div { padding: 6px 0; border-bottom: 1px solid var(--pl-line); animation: pl-in .4s ease-out; }
.pl-feed time { color: var(--pl-muted); font-family: var(--pl-mono); margin-right: 8px; }
@keyframes pl-in { from { background: color-mix(in srgb, var(--pl-accent) 18%, transparent); } to { background: transparent; } }