/* edet-plotgrid.css — the plot grid overlay (v2.0): a horizontally
   scrollable table of threads (rows) × scenes (columns) with sticky
   headers. Rendered into .dr-overlay-body. Tokens from site.css :root. */

.dr-plot-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.dr-plot-hint { color: var(--fg-muted); font-size: var(--text-xs); }

.dr-plot-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 8px; }

.dr-plot-table {
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}
.dr-plot-table th, .dr-plot-table td {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}

/* corner + column headers (sticky top) */
.dr-plot-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 0.4rem 0.6rem;
    color: var(--fg-muted);
    background: var(--bg-elevated);
    white-space: nowrap;
}
.dr-plot-colhead {
    position: sticky;
    top: 0;
    z-index: 2;
    min-width: 120px;
    max-width: 160px;
    padding: 0.4rem 0.5rem;
    text-align: left;
    vertical-align: bottom;
    background: var(--bg-elevated);
}
.dr-plot-colhead-title { display: block; color: var(--fg); font-weight: 600; }
.dr-plot-colhead-chapter { display: block; color: var(--fg-deep); font-size: var(--text-xs); }

/* thread row headers (sticky left) */
.dr-plot-rowhead {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 130px;
    max-width: 180px;
    padding: 0.4rem 0.5rem;
    text-align: left;
    vertical-align: middle;
    background: var(--bg-elevated);
    border-left: 3px solid var(--thread-color, var(--rule));
}
/* inner flex wrapper — the <th> itself stays a table cell (row-height shares
   with the data cells); this lays out name + ⋮ button. */
.dr-plot-rowhead-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.dr-plot-rowhead-name { color: var(--fg); word-break: break-word; }
.dr-plot-rowhead-more {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--fg-muted);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
}
.dr-plot-rowhead-more:hover { color: var(--fg); }

/* cells */
.dr-plot-cell {
    width: 120px;
    height: 38px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth);
}
.dr-plot-cell:hover { background: var(--row-hover); }
.dr-plot-cell.on {
    background: color-mix(in srgb, var(--thread-color, var(--accent)) 36%, var(--bg));
}
.dr-plot-cell.has-note { box-shadow: inset 0 0 0 2px var(--thread-color, var(--accent)); }
.dr-plot-noth { height: 38px; padding: 0.6rem; text-align: center; vertical-align: middle; color: var(--fg-muted); }