/* ============================================================================
   Page modules — PR triangle, settings tabs, team builder, auth, misc
   ========================================================================== */

/* --- Pull request chain ---
   A pull request is a unit of functionality, and the whole of it is a chain:
   ticket(s) -> commits -> the pull request -> comments -> resolution. The page is laid out as that
   chain, in that order, numbered, because the order IS the argument. It replaced a three-panel
   "triangle" whose panels sat side by side with no sequence and no ending: resolution was nowhere on
   the page, and a broken first link rendered as an empty card that read like a sync nobody had run.

   Every step keeps its own accent down the left edge so the sequence is followable at a glance, and a
   broken link is a stated step rather than a step that vanishes. */
.pr-chain { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-10); }
.pr-step { border-left: var(--border-accent) solid var(--pr-accent, var(--brand)); }
.pr-step .card-header .fa { color: var(--pr-accent); }
.pr-step-tickets { --pr-accent: var(--brand); }
.pr-step-commits { --pr-accent: var(--success); }
.pr-step-request { --pr-accent: var(--accent-blue, var(--brand)); }
.pr-step-conversation { --pr-accent: var(--accent-violet); }
.pr-step-resolution { --pr-accent: var(--warning, var(--accent-violet)); }

/* The step number, so the chain reads as a sequence and not as five unrelated cards. */
.pr-step-index {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6em; height: 1.6em; margin-right: var(--space-3);
    border-radius: var(--radius-full, 999px);
    background: var(--pr-accent); color: var(--surface);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
}

/* The link between two steps, drawn rather than implied. */
.pr-chain-link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-3) var(--space-8);
    color: var(--text-muted); font-size: var(--text-sm);
}

/* One sentence under each header saying what the step answers. */
.pr-step-lead { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); }

.pr-node-count { font-size: var(--text-4xl); font-weight: var(--weight-semibold); color: var(--text); line-height: var(--leading-none); }
.pr-node-count-label { font-size: var(--text-sm); color: var(--text-muted); }
/* Bounded, not unbounded: a pull request with 45 commits and 22 review threads made this column
   3,000px tall, which pushed the judgment panel off the page. Same ceiling .diff-content uses, so the
   system carries one number. */
.pr-node-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; max-height: 600px; overflow-y: auto; }
.pr-node-list li { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-base); }
.pr-node-list li:last-child { border-bottom: none; }

/* Judgment panel — the overall verdict header plus each review thread's two verdicts. */
.pr-overall { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-6); }
.pr-thread {
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7);
    margin-bottom: var(--space-6);
}
.pr-thread-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.pr-thread-file { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); }
.pr-comment { padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-subtle); }
.pr-comment:last-child { border-bottom: none; }
.pr-comment-body { white-space: pre-wrap; font-family: inherit; margin: var(--space-1) 0 0; font-size: var(--text-md); }
.pr-verdicts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.pr-verdict { background: var(--surface-alt); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.pr-verdict-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); display: block; margin-bottom: var(--space-2); }
.pr-followups { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-body); }

/* --- Settings tabs ---
   The Settings page carries eight independent concerns (two ticket connections, AI providers, CLI
   engines, task routing, scoring, skill matrix, Git access). Stacked on one scroll they buried the
   one the reader came for, so each group gets a tab. The active tab lives in the URL hash: a reload,
   a deep link, and an hx-boost back-navigation all land on the same panel. */
.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: var(--border-width) solid var(--border);
    margin-bottom: var(--space-10);
}
.settings-tab {
    border: none;
    border-bottom: var(--border-width-thick) solid transparent;
    background: transparent;
    color: var(--text-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    padding: var(--space-5) var(--space-8);
    margin-bottom: -1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
.settings-tab:hover { color: var(--text); background: var(--surface-hover); }
.settings-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.settings-panel[hidden] { display: none; }

/* --- Drag-and-drop team builder ---
   The two halves are locked to the same width and the same height. minmax(0, 1fr) is what does the
   width: a plain 1fr floors at the content's min width, so one long name in the pool used to widen
   the left column and squeeze the drop target down to a sliver you could not aim at. The height
   comes from stretch + a capped, scrolling zone: a hundred people in the pool no longer push the
   drop target off the bottom of a short screen. */
.dnd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-8);
    margin-top: var(--space-8);
}
.dnd-column { display: flex; flex-direction: column; min-width: 0; }
.dnd-zone {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--space-3);
    flex: 1;
    min-height: 120px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.dnd-zone-target { border-style: dashed; background: var(--dnd-target-bg); }
.dnd-zone-over {
    border-color: var(--brand);
    box-shadow: var(--shadow-inset-focus);
    background: var(--dnd-over-bg);
}
.dnd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 100%;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-sunken);
    color: var(--text-body);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-2xl);
    font-size: var(--text-base);
    cursor: grab;
    user-select: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.dnd-chip:hover { background: var(--surface-hover); }
.dnd-chip i { color: var(--text-muted); flex-shrink: 0; }
/* A long name is cut, not allowed to set the column width. The full name is on the title. */
.dnd-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* A member who was disabled after joining the team: still on the roster, out of every metric. */
.dnd-chip-disabled { opacity: 0.55; text-decoration: line-through; }
.dnd-zone-target .dnd-chip {
    background: var(--dnd-chip-active-bg);
    border-color: var(--dnd-chip-active-border);
    color: var(--dnd-chip-active-text);
}
.dnd-zone-target .dnd-chip i { color: var(--brand); }
.dnd-dragging { opacity: 0.4; }
.dnd-hint {
    color: var(--text-muted);
    font-size: var(--text-base);
    font-style: italic;
    align-self: center;
    pointer-events: none;
}

/* --- Anonymous account pages (sign in, create account) --- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}
.login-box { width: 100%; max-width: 380px; }
.login-card {
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-18) var(--space-16) var(--space-14);
}
.login-brand { text-align: center; margin-bottom: var(--space-14); }
.login-brand h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text); }
.login-brand p { font-size: var(--text-base); color: var(--text-muted); margin-top: var(--space-2); }
.login-brand i { font-size: var(--text-5xl); color: var(--brand); display: block; margin-bottom: var(--space-5); }
.login-error {
    background: var(--danger-soft);
    color: var(--danger-on-soft);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    margin-bottom: var(--space-8);
}
.login-alt { text-align: center; font-size: var(--text-base); color: var(--text-body); margin-top: var(--space-9); }
.login-alt a { color: var(--text-link); font-weight: var(--weight-semibold); text-decoration: none; }
.login-alt a:hover { text-decoration: underline; }

/* --- Architecture deltas --- */
.delta-good { color: var(--success); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.delta-bad { color: var(--danger); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* --- Contributions summary mode switch --- */
.summary-mode-btn {
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-xs);
    border: 0;
    background: var(--surface);
    color: var(--text-body);
    cursor: pointer;
}
.summary-mode-btn + .summary-mode-btn { border-left: var(--border-width) solid var(--border-strong); }
.summary-mode-btn.is-active { background: var(--brand); color: var(--text-inverse); }

/* --- Contributions: developer summary column widths ---
   Six columns, and only two of them want room. Without these the auto layout
   hands every spare pixel to the widest text column — the developer name — and
   the row reads as a name marooned in an empty field with the numbers pushed
   off to the right. Naming the two that should grow puts the slack where it is
   worth something: the name, and the bar that compares developers. */
#dev-summary-table .col-dev { width: 26%; }
#dev-summary-table .col-num { width: 9%; white-space: nowrap; }
#dev-summary-table .col-activity { width: 30%; }

/* --- Contributions: per-developer series toggles ---
   One button per developer, tinted with that developer's series colour. The
   colour is data, so it arrives as an inline --dev-color custom property; every
   other value in the button comes from the token scales. */
.dev-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dev-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-5);
    border-radius: var(--radius-xl);
    border: var(--border-width) solid var(--border-strong);
    background: var(--neutral-soft);
    color: var(--text-muted);
    font-size: var(--text-xs);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.dev-toggle.is-on {
    background: var(--dev-color, var(--brand));
    border-color: var(--dev-color, var(--brand));
    color: var(--text-inverse);
}

/* --- Contributions: heatmap legend --- */
.heat-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.heat-swatch {
    width: 11px;
    height: 11px;
    border-radius: var(--radius-xs);
    display: inline-block;
    background: var(--swatch-color, var(--heat-0));
}

/* --- Contributions: activity chart --- */
.activity-bar { cursor: pointer; }
.activity-chart-svg { font-family: inherit; display: block; }
.activity-toggle-strip {
    padding: var(--space-4) var(--space-8);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.activity-chart-host { min-height: 300px; overflow-x: auto; }
/* The per-developer breakdown under a summary row is the shared .row-subrow /
   .row-caret component in components-tables.css, not a rule of this page. */

/* --- Segmented control (contributions summary mode) --- */
.segmented {
    display: inline-flex;
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* --- Branches: contributor share strip ---
   Each segment's width is data (a percentage), so it stays inline. Its colour
   is not: --series is bound to one of the categorical chart tokens, so the
   strip follows the theme. */
.share-bar {
    display: flex;
    height: var(--space-10);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-width: 200px;
}
.share-bar-seg { background: var(--series, var(--chart-1)); }
.share-key { margin-right: var(--space-4); }
.share-key-dot {
    display: inline-block;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-circle);
    background: var(--series, var(--chart-1));
}

/* --- Velocity panel drawings ---
   The chart is drawn by CkwmCharts, which sizes itself from its host box. Inside a tile that box
   is whatever the tile body leaves; on a page there is nothing to stretch against, so the height
   is stated here. */
.velocity-chart { height: 220px; display: flex; flex-direction: column; }
.velocity-spark { display: block; min-width: var(--space-24); }