/* The Renders UI (bg-projects build 15 · PatchWork Standard): edge tab, drawer,
   the Renders home page, and the run state on home project rows.
   Tokens only (css/slate.css §1); status is a 6px dot + coloured text. */

/* The canvas edge tab stays hidden (user decision, feb12e3). The drawer and
   the Renders page are reachable from the home rail. */
#runs-show-tab,
.edge-show-tab-runs {
    display: none !important;
}

.edge-show-tab-runs {
    right: 0;
    top: calc(50% + 84px);
    width: 22px;
    height: 72px;
    border-right: none;
    border-radius: var(--sl-r-10) 0 0 var(--sl-r-10);
    flex-direction: column;
    gap: 4px;
}
.edge-show-tab-runs:hover { width: 26px; }
.runs-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--sl-font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
}
.runs-tab-badge {
    font-family: var(--sl-font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--sl-warning);
}
.runs-tab-badge.hidden { display: none; }

.runs-ic { display: inline-flex; flex: none; }
.runs-ic svg { display: block; }

/* ── drawer (edge peek) ─────────────────────────────── */
.runs-panel {
    position: fixed;
    right: 0;
    top: 56px;
    bottom: 0;
    z-index: 9001;
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    box-shadow: var(--sl-shadow-float);
}
.runs-panel.hidden { display: none; }
.runs-panel-head { display: flex; align-items: center; gap: 8px; }
.runs-panel-title { font-weight: 700; font-size: 13.5px; flex: 1; }
.runs-panel .runs-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas: "icon main status" "icon prog actions";
    row-gap: 6px;
}
.runs-panel .runs-row-icon { grid-area: icon; align-self: start; }
.runs-panel .runs-row-main { grid-area: main; }
.runs-panel .runs-pill { grid-area: status; }
.runs-panel .runs-row-progress { grid-area: prog; }
.runs-panel .runs-row-actions { grid-area: actions; }
.runs-empty { color: var(--sl-text-2); font-size: 12px; padding: 8px 2px; line-height: 1.5; }

/* ── sections + card list ───────────────────────────── */
.runs-section { margin-bottom: 16px; }
.runs-section.is-empty { display: none; }
.runs-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px 2px;
}
.runs-count { font-family: var(--sl-font-mono); color: var(--sl-text-2); letter-spacing: 0; }
.runs-list {
    background: var(--sl-card);
    border: 1px solid var(--sl-hairline);
    border-radius: var(--sl-r-12);
    overflow: hidden;
}
.runs-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(150px, 220px) 96px 124px;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--sl-hairline);
}
.runs-list > .runs-row:first-child { border-top: none; }
.runs-row:hover { background: var(--sl-row-hover); }
.runs-row-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--sl-r-6);
    background: var(--sl-wash);
    color: var(--sl-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.runs-row-main { min-width: 0; }
.runs-row-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.runs-row-meta, .runs-row-sub {
    font-size: 12px;
    color: var(--sl-text-2);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.runs-row-error { color: var(--sl-error); white-space: normal; line-height: 1.45; }

/* progress: 4px bar + mono meta under it */
.runs-row-progress { min-width: 0; }
.runs-bar > .runs-bar-fill { display: block; height: 100%; border-radius: 2px; background: var(--sl-text-3); }
.runs-row-running .runs-bar > .runs-bar-fill { background: var(--sl-accent); }
.runs-bar.is-indeterminate > .runs-bar-fill {
    width: 25%;
    background: var(--sl-accent);
    animation: runs-slide 1.4s ease-in-out infinite;
}
@keyframes runs-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
.runs-row-progress-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.runs-row-pct { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2); white-space: nowrap; }
.runs-row-eta { font-size: 11px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runs-row-failed .runs-row-pct, .runs-row-failed .runs-row-eta { color: var(--sl-error); }

/* status: dot + text (.sl-status). Canceled stays neutral. */
.runs-pill { justify-self: start; white-space: nowrap; }

/* row actions: 28px quiet icon buttons */
.runs-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.runs-icon-btn {
    width: var(--sl-h-sm);
    height: var(--sl-h-sm);
    border-radius: var(--sl-r-6);
    border: none;
    background: transparent;
    color: var(--sl-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.runs-icon-btn:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.runs-icon-btn.is-danger:hover { background: var(--sl-danger-wash); color: var(--sl-danger-text); }

/* ── Renders page ───────────────────────────────────── */
#home-tab-runs .home-tab-panel.runs-page {
    max-width: none;
    padding: 30px 40px 48px;
    box-sizing: border-box;
    font-family: var(--sl-font-ui);
    color: var(--sl-text-1);
}
.runs-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.runs-page-titles .sl-h1 { margin: 0; }
.runs-page-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--sl-text-2);
}
.runs-page-summary .sl-status { font-size: 12.5px; font-weight: 500; }
.runs-summary-plain { color: var(--sl-text-2); }
.runs-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--sl-text-3); flex: none; }
.runs-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.runs-page-actions .hidden { display: none; }
.runs-page-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 22px 0 16px;
}
.runs-filter-btn { gap: 7px; }
.runs-spacer { flex: 1; }
.runs-cap-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sl-text-2);
}
select.runs-cap.sl-input { height: var(--sl-h); padding: 0 8px; font-family: var(--sl-font-mono); font-size: 12px; cursor: pointer; }
.runs-page-body { display: flex; flex-direction: column; gap: 16px; }
.runs-page-body > .runs-section { margin-bottom: 0; }
.runs-note { font-size: 12px; color: var(--sl-warning); }
.runs-empty-state { padding: 48px 20px; }
.runs-empty-title { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); }
.runs-empty-body { font-size: 12.5px; color: var(--sl-text-2); max-width: 380px; line-height: 1.5; }
.runs-open-studio { margin-top: 6px; }

@media (max-width: 900px) {
    .runs-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .runs-row-progress { display: none; }
    #home-tab-runs .home-tab-panel.runs-page { padding: 24px 16px 40px; }
}

/* ── run state on home project rows: dot + text ─────── */
.home-runs-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sl-text-2);
}
.home-runs-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.home-runs-pill-running, .home-runs-pill-agent-generating { color: var(--sl-link); }
.home-runs-pill-running::before, .home-runs-pill-agent-generating::before { animation: runs-pulse 1.6s ease-in-out infinite; }
.home-runs-pill-queued { color: var(--sl-text-2); }
.home-runs-pill-awaiting { color: var(--sl-warning); }
.home-runs-pill .runs-ic { color: currentColor; }
@keyframes runs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Grid view: thumbnail tag + an accent card border while an agent works */
.home-card-agent-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    pointer-events: none;
}
.home-card-agent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sl-accent);
    animation: runs-pulse 1.2s ease-in-out infinite;
}
.home-project-card.is-agent-generating {
    border-color: var(--sl-accent-line) !important;
}

/* ── per-take rows: Runs on chips + source chips (js/run-panel.js) ─── */
.runs-where {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.runs-where-label { margin-right: 2px; }
.runs-where-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.runs-where-div { width: 1px; height: 18px; background: var(--sl-hairline); margin: 0 2px; }
.runs-where-none { font-size: 12px; color: var(--sl-text-3); }
.runs-where-chip { gap: 8px; max-width: 100%; }
.runs-where-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-text-3); flex: none; }
.runs-where-dot.is-success { background: var(--sl-success); }
.runs-where-dot.is-warning { background: var(--sl-warning); }
.runs-where-dot.is-error { background: var(--sl-error); }
.runs-where-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.runs-where-status { color: var(--sl-text-2); font-weight: 400; white-space: nowrap; }
.runs-where-cost { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2); white-space: nowrap; }
.runs-where-open { display: inline-flex; color: var(--sl-text-2); border-radius: 4px; padding: 2px; }
.runs-where-open:hover { color: var(--sl-text-1); background: var(--sl-wash); }
.runs-source-btn { gap: 7px; }
.runs-page-filters .runs-where + .runs-page-filters { margin-top: 18px; }
.runs-job-row .runs-row-name { max-width: 100%; }
.runs-row-done .runs-bar > .runs-bar-fill { background: var(--sl-success); }
.runs-row-failed .runs-bar > .runs-bar-fill { background: var(--sl-error); }
.runs-more { color: var(--sl-text-3); }
@media (max-width: 900px) {
    .runs-where-name { max-width: 140px; }
    .runs-where-cost { display: none; }
}
.runs-where-group, .runs-page-filters .sl-seg { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.runs-where-chips { max-width: 100%; }