/* Base styles for components defined in Partials */

/* Button */
.cci-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-family: var(--cci-font-family);
  font-weight: 600;
  border-radius: var(--cci-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1.25;
}

.cci-button-primary {
  background-color: var(--cci-color-primary);
  color: white;
  border-color: var(--cci-color-primary);
}

.cci-button-primary:hover {
  filter: brightness(110%);
}

.cci-button-secondary {
  background-color: var(--cci-color-secondary);
  color: white;
  border-color: var(--cci-color-secondary);
}

.cci-button-outline {
  background-color: transparent;
  color: var(--cci-color-primary);
  border-color: var(--cci-color-primary);
}

.cci-button-ghost {
  background-color: transparent;
  color: var(--cci-color-text-main);
  padding: var(--cci-space-2);
}

.cci-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Paper / Card */
.cci-paper {
  background-color: var(--cci-color-surface);
  border-radius: var(--cci-radius-lg);
  padding: var(--cci-space-6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Input */
.cci-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--cci-space-1);
    margin-bottom: var(--cci-space-4);
}

.cci-input-label {
    font-size: var(--cci-text-sm);
    color: var(--cci-color-text-muted);
    font-weight: 500;
}

.cci-input {
    width: 100%;
    padding: var(--cci-space-3);
    border: 1px solid var(--cci-color-border);
    border-radius: var(--cci-radius-md);
    /* Token-driven so dark mode gets a dark field instead of a white one.
       Text colour follows the theme text token (was inheriting, which left
       light glyphs on a hardcoded-white field in dark mode). */
    background-color: var(--cci-input-bg, white);
    color: var(--cci-text);
    font-family: var(--cci-font-family);
    font-size: var(--cci-text-base);
}

.cci-input:focus {
    outline: 2px solid var(--cci-color-primary);
    border-color: transparent;
}

/* Badge */
.cci-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--cci-radius-pill);
    font-size: var(--cci-text-xs);
    font-weight: 600;
}

.cci-badge-success { background-color: #DEF7EC; color: #03543F; }
.cci-badge-warning { background-color: #FDF6B2; color: #723B13; }
.cci-badge-error { background-color: #FDE8E8; color: #9B1C1C; }
.cci-badge-neutral { background-color: #F3F4F6; color: #374151; }

/* User badge */
.cci-user-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cci-space-2);
}

.cci-user-badge-email {
    font-size: var(--cci-text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.cci-user-badge-hover {
    gap: 0;
}

.cci-user-badge-hover .cci-user-badge-email {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    transition: opacity 0.15s ease, max-width 0.15s ease, margin-left 0.15s ease;
}

.cci-user-badge-hover:hover .cci-user-badge-email {
    max-width: 20rem;
    opacity: 1;
    margin-left: var(--cci-space-2);
}

/* Toast */
.cci-toast {
  position: fixed;
  bottom: var(--cci-space-4);
  right: var(--cci-space-4);
  padding: var(--cci-space-4);
  border-radius: var(--cci-radius-md);
  background-color: var(--cci-color-text-main);
  color: white;
  z-index: 9999;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Spinner */
.cci-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 9999px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    animation: cci-spin 1s linear infinite;
}

@keyframes cci-spin {
    to { transform: rotate(360deg); }
}

/* Table
   Responsive strategy (shared, mobile-first): data tables live inside
   .cci-table-wrapper which scrolls horizontally when the table is wider than
   its container. Cells are `white-space: nowrap` so the table keeps its natural
   width and the wrapper scrolls (contained scroll) instead of squeezing/
   clipping columns (e.g. the Status badge) at narrow widths. Small tables whose
   natural width fits do not scroll. Cells that legitimately need to wrap opt in
   with `.cci-cell-wrap`. */
.cci-table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.cci-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cci-text-sm);
}
.cci-table th {
    text-align: left;
    padding: var(--cci-space-3) var(--cci-space-4);
    border-bottom: 2px solid var(--cci-color-border);
    color: var(--cci-color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.cci-table td {
    padding: var(--cci-space-3) var(--cci-space-4);
    border-bottom: 1px solid var(--cci-color-border);
    white-space: nowrap;
}
.cci-table th.cci-cell-wrap,
.cci-table td.cci-cell-wrap {
    white-space: normal;
}
.cci-table tr:last-child td {
    border-bottom: none;
}

/* Icon Button (small ghost button) */
.cci-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--cci-color-text-muted);
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s;
    text-decoration: none;
}
.cci-icon-button:hover {
    background-color: var(--cci-color-border);
    color: var(--cci-color-primary);
}
.cci-icon-button.cci-icon-danger:hover {
    color: var(--cci-color-danger);
    background-color: var(--cci-color-danger-bg);
}

/* Clickable table row */
.cci-table-row-clickable:hover {
    background-color: var(--cci-color-border);
    transition: background-color 0.15s ease;
}

/* Badge: info (blue) variant for Running status */
.cci-badge-info { background-color: #DBEAFE; color: #1E40AF; }

/* Enterprise admin portal */
.enterprise-band {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    gap: var(--cci-space-6);
    padding-bottom: var(--cci-space-6);
    border-bottom: 1px solid var(--cci-color-border);
}

.enterprise-section {
    padding-top: var(--cci-space-6);
}

.enterprise-section + .enterprise-section {
    border-top: 1px solid var(--cci-color-border);
    margin-top: var(--cci-space-6);
}

.enterprise-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cci-space-4);
    margin-bottom: var(--cci-space-4);
}

.enterprise-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(7rem, 1fr));
    gap: var(--cci-space-3);
}

.enterprise-kpi {
    border: 1px solid var(--cci-color-border);
    border-radius: var(--cci-radius-md);
    padding: var(--cci-space-3);
    /* Token-driven so the card inverts in dark mode (was hardcoded #FAFAFA,
       which stayed near-white on the dark surface). */
    background-color: var(--cci-color-surface);
}

.enterprise-kpi-label,
.enterprise-facts span,
.enterprise-create-team span,
.enterprise-create-team legend {
    display: block;
    color: var(--cci-color-text-muted);
    font-size: var(--cci-text-xs);
    font-weight: 600;
    margin-bottom: var(--cci-space-1);
}

.enterprise-kpi strong {
    display: block;
    font-size: 1.75rem;
    line-height: 1.1;
}

.enterprise-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cci-space-3);
}

.enterprise-facts strong {
    overflow-wrap: anywhere;
}

.enterprise-create-team {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 8rem minmax(18rem, 2fr) auto;
    align-items: end;
    gap: var(--cci-space-3);
    padding-bottom: var(--cci-space-4);
    border-bottom: 1px solid var(--cci-color-border);
}

.enterprise-create-team fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.enterprise-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--cci-space-2);
}

.enterprise-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: var(--cci-space-2);
    min-width: 0;
    font-size: var(--cci-text-sm);
}

.enterprise-checkbox-grid span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-quota-form {
    display: grid;
    grid-template-columns: 6rem auto;
    gap: var(--cci-space-2);
    align-items: center;
}

.enterprise-small-button {
    border-radius: var(--cci-radius-md);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.enterprise-table td {
    vertical-align: top;
}

.enterprise-dim {
    color: var(--cci-color-text-muted);
    font-family: var(--cci-font-mono);
    font-size: var(--cci-text-xs);
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .enterprise-band,
    .enterprise-create-team {
        grid-template-columns: 1fr;
    }

    .enterprise-kpi-grid,
    .enterprise-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Pulsing animation for in-progress badges */
.cci-badge-pulse {
    animation: cci-badge-pulse 2s ease-in-out infinite;
}

@keyframes cci-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ============================================================================
   CI Log Viewer — Run Detail Page
   ============================================================================ */

/* Metadata panel: the run info header above the log viewer. */
.ci-metadata-panel {
    font-size: var(--cci-text-sm);
}

/* Scrollable log container with dark background and monospace font. */
.ci-log-viewer {
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
                 'DejaVu Sans Mono', monospace;
    font-size: 13px;
    line-height: 20px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: var(--cci-radius-md);
    padding: 0;
    min-height: 300px;
    max-height: 70vh;
    position: relative;
}

/* Single log line — fixed height for virtual scrolling O(1) offset calculation. */
.log-line {
    height: 20px;
    display: flex;
    align-items: center;
    white-space: pre;
    padding: 0 8px;
    box-sizing: border-box;
}

/* Subtle red background tint for stderr lines. */
.log-line-stderr {
    background-color: rgba(220, 38, 38, 0.08);
}

/* Left gutter timestamp. */
.log-line-timestamp {
    color: #6a737d;
    min-width: 10ch;
    flex-shrink: 0;
    margin-right: 12px;
    user-select: none;
    font-size: 12px;
}

/* Main text content of a log line. */
.log-line-text {
    white-space: pre;
    flex: 1 1 0%;
    min-width: 0;
}

/* Floating "Jump to bottom" button. */
.ci-log-jump-bottom {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    background-color: var(--cci-color-primary, #3b82f6);
    color: white;
    border: none;
    border-radius: var(--cci-radius-pill, 9999px);
    padding: 0.5rem 1rem;
    font-size: var(--cci-text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.15s ease;
}

.ci-log-jump-bottom:hover {
    filter: brightness(110%);
}

/* Reconnection banner shown when SSE connection is lost. */
.ci-log-reconnecting {
    background-color: #FDF6B2;
    color: #723B13;
    padding: 0.5rem 1rem;
    border-radius: var(--cci-radius-md);
    font-size: var(--cci-text-sm);
    font-weight: 500;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   ANSI Color Classes
   ============================================================================ */

/* Standard 8 foreground colors (SGR 30..37). */
.ansi-fg-0 { color: #000000; }
.ansi-fg-1 { color: #cc0000; }
.ansi-fg-2 { color: #00cc00; }
.ansi-fg-3 { color: #cccc00; }
.ansi-fg-4 { color: #0000cc; }
.ansi-fg-5 { color: #cc00cc; }
.ansi-fg-6 { color: #00cccc; }
.ansi-fg-7 { color: #cccccc; }

/* Bright/high-intensity foreground colors (SGR 90..97). */
.ansi-fg-8  { color: #555555; }
.ansi-fg-9  { color: #ff0000; }
.ansi-fg-10 { color: #00ff00; }
.ansi-fg-11 { color: #ffff00; }
.ansi-fg-12 { color: #5555ff; }
.ansi-fg-13 { color: #ff00ff; }
.ansi-fg-14 { color: #00ffff; }
.ansi-fg-15 { color: #ffffff; }

/* Standard 8 background colors (SGR 40..47). */
.ansi-bg-0 { background-color: #000000; }
.ansi-bg-1 { background-color: #cc0000; }
.ansi-bg-2 { background-color: #00cc00; }
.ansi-bg-3 { background-color: #cccc00; }
.ansi-bg-4 { background-color: #0000cc; }
.ansi-bg-5 { background-color: #cc00cc; }
.ansi-bg-6 { background-color: #00cccc; }
.ansi-bg-7 { background-color: #cccccc; }

/* Bright/high-intensity background colors (SGR 100..107). */
.ansi-bg-8  { background-color: #555555; }
.ansi-bg-9  { background-color: #ff0000; }
.ansi-bg-10 { background-color: #00ff00; }
.ansi-bg-11 { background-color: #ffff00; }
.ansi-bg-12 { background-color: #5555ff; }
.ansi-bg-13 { background-color: #ff00ff; }
.ansi-bg-14 { background-color: #00ffff; }
.ansi-bg-15 { background-color: #ffffff; }

/* Text decoration classes. */
.ansi-bold { font-weight: bold; }
.ansi-italic { font-style: italic; }
.ansi-underline { text-decoration: underline; }

/* ============================================================================
   CI Process Tree — Split Pane Layout (M8)
   ============================================================================ */

/* Flexbox container for the split pane: process tree (left) + log viewer (right). */
.ci-split-layout {
    display: flex;
    min-height: 400px;
    max-height: 80vh;
    border-radius: var(--cci-radius-md);
    overflow: hidden;
    border: 1px solid var(--cci-color-border, #e5e7eb);
}

/* Left panel: process tree with scroll. ~30% default width. */
.ci-process-panel {
    flex: 0 0 30%;
    min-width: 200px;
    max-width: 50%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--cci-color-surface, #ffffff);
    border-right: 1px solid var(--cci-color-border, #e5e7eb);
    display: flex;
    flex-direction: column;
}

/* Right panel: log viewer fills the remaining space. */
.ci-log-panel {
    flex: 1 1 0%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ci-log-panel .ci-log-viewer {
    flex: 1 1 0%;
    max-height: none;
    border-radius: 0;
}

/* Divider between the two panels: a 1px line (consistent with the rest of the
   UI's 1px borders) with a wider invisible hit area so it's still easy to grab
   and drag. */
.ci-split-handle {
    flex: 0 0 1px;
    cursor: col-resize;
    background-color: var(--cci-color-border, #e5e7eb);
    position: relative;
    transition: background-color 0.15s ease;
}

.ci-split-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
}

.ci-split-handle:hover,
.ci-split-handle:active {
    background-color: var(--cci-color-primary, #3b82f6);
}

/* Process tree container. */
.ci-process-tree {
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 4px 0;
}

/* Nested list: reset browser list styles. Nested levels carry a vertical guide
   line so the process hierarchy is legible; the root level has none. */
.ci-process-tree-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
}

.ci-process-tree > .ci-process-tree-list {
    padding-left: 2px;
}

/* Child lists: a light indentation guide line + a modest per-level indent
   (kept small so deeper nesting doesn't eat the panel's horizontal space). */
.ci-process-children {
    margin-left: 2px;
    border-left: 1px solid var(--cci-color-border);
    padding-left: 8px;
}

/* Individual tree node. */
.ci-process-node {
    padding: 3px 6px;
    border-radius: var(--cci-radius-sm, 4px);
    cursor: pointer;
    /* room for the selected-state accent bar so it doesn't shift content */
    border-left: 2px solid transparent;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.ci-process-node:hover {
    background-color: var(--cci-hover, var(--cci-color-surface));
}

/* Selected (highlighted) node: a left accent bar + tinted row, token-driven so
   it adapts to light/dark instead of a fixed blue wash. */
.ci-process-node-selected,
.ci-process-node-selected:hover {
    background-color: var(--cci-select, var(--cci-color-surface));
    border-left-color: var(--cci-color-primary);
}

/* Node header row: toggle + status + name + args + PID. */
.ci-process-node-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.5;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
                 'DejaVu Sans Mono', monospace;
}

/* Toggle button for collapsing/expanding children. */
.ci-process-toggle {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 10px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cci-color-text-muted, #6b7280);
    flex-shrink: 0;
    padding: 0;
}

.ci-process-toggle:hover {
    color: var(--cci-color-primary, #3b82f6);
}

/* Spacer when there is no toggle button (leaf nodes). */
.ci-process-toggle-spacer {
    display: inline-block;
    width: 14px;
    flex-shrink: 0;
}

/* Status indicator: running (pulsing green dot). */
.ci-process-status-running {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cci-color-success, #22c55e);
    flex-shrink: 0;
    animation: ci-process-pulse 1.5s ease-in-out infinite;
}

@keyframes ci-process-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Status indicator: exited OK (green checkmark). */
.ci-process-status-ok {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    position: relative;
}

.ci-process-status-ok::after {
    content: '\2713'; /* checkmark */
    color: var(--cci-color-success, #16a34a);
    font-size: 11px;
    line-height: 1;
    position: absolute;
    top: -2px;
    left: 0;
}

/* Status indicator: exited with error (red X). */
.ci-process-status-error {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    position: relative;
}

.ci-process-status-error::after {
    content: '\2717'; /* cross */
    color: var(--cci-color-danger, #dc2626);
    font-size: 11px;
    line-height: 1;
    position: absolute;
    top: -2px;
    left: 0;
}

/* Process binary name (bold). The process tree is a monospace, code-like surface
   rendered on the themed app background, so it consumes the DS editor/syntax
   palette (Alucard in light mode, Dracula in dark mode): the binary is the
   "identifier" -> syntax-function. */
/* The command line for the process: the whole line on one row, program token
   prominent and arguments muted (no separate binary-name label — that was
   redundant with the command). PID / path / status live in the hover tooltip. */
.ci-process-cmd {
    flex: 1 1 0%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-process-cmd-prog {
    font-weight: 700;
    color: var(--cci-color-text-main, #111827);
}

.ci-process-cmd-args {
    color: var(--cci-syntax-comment, var(--cci-color-text-muted, #6b7280));
}

/* Trace link button. */
.ci-process-trace-link {
    font-size: 11px !important;
    padding: 1px 6px !important;
    flex-shrink: 0;
    color: var(--cci-color-primary, #3b82f6) !important;
}

/* Resource summary panel below the tree. */
.ci-process-resource-summary {
    padding: 8px;
    border-top: 1px solid var(--cci-color-border, #e5e7eb);
    background-color: var(--cci-color-surface, #ffffff);
    flex-shrink: 0;
}

/* Environment variables expandable section. */
.ci-process-env {
    padding: 4px 8px;
    border-top: 1px solid var(--cci-color-border, #e5e7eb);
    flex-shrink: 0;
}

#process-env-content {
    max-height: 200px;
    overflow-y: auto;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
                 'DejaVu Sans Mono', monospace;
    font-size: 11px;
    padding: 4px 0;
}

/* Process search input at the top of the tree panel. */
.ci-process-search {
    padding: var(--cci-space-3);
    flex-shrink: 0;
}

/* Use the site's input styling at a slightly compact size so the filter reads
   as the same control family as the rest of the app (not a bespoke box). */
.ci-process-search .cci-input {
    padding: var(--cci-space-2) var(--cci-space-3);
    font-size: var(--cci-text-sm);
}

/* "All Logs" button styling. */
/* "All logs" is a filter toggle, not a header: it clears the per-process filter
   so the viewer shows everything. Style it as a clear, interactive row that
   highlights when active (nothing selected → viewing all logs), mirroring the
   selected state of a tree node. */
.ci-process-all-logs-btn {
    display: flex;
    align-items: center;
    gap: var(--cci-space-2);
    margin: 0 var(--cci-space-3) var(--cci-space-2);
    width: calc(100% - (2 * var(--cci-space-3)));
    padding: var(--cci-space-2) var(--cci-space-3);
    font-size: var(--cci-text-sm);
    font-weight: 500;
    text-align: left;
    color: var(--cci-color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cci-radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.ci-process-all-logs-btn:hover {
    background-color: var(--cci-hover, var(--cci-color-surface));
    color: var(--cci-color-text-main);
}

.ci-process-all-logs-btn.is-active {
    background-color: var(--cci-select, var(--cci-color-surface));
    color: var(--cci-color-text-main);
    border-left: 2px solid var(--cci-color-primary);
}

.ci-all-logs-icon {
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.8;
}

/* Colored PID badge inline in log lines. */
.ci-pid-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3ch;
    padding: 0 4px;
    margin-right: 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    line-height: 16px;
    flex-shrink: 0;
}

/* Overflow placeholder for large subtrees. */
.ci-process-overflow {
    cursor: pointer;
    padding: 2px 4px;
}

.ci-process-overflow:hover {
    text-decoration: underline;
}

/* ============================================================================
   Responsive — narrow viewports (≤768px). Mobile-first / additive: these rules
   only tighten narrow viewports and never touch the laptop/wide layout. Table
   contained-scroll is handled by `white-space: nowrap` on cells (above) plus the
   .cci-table-wrapper's overflow-x — no width floor here, so tables inside
   collapsing grids (insights) can still shrink and scroll rather than forcing
   page-level overflow.
   ============================================================================ */
@media (max-width: 768px) {
    /* Run-detail split pane: the task requires the process tree + log viewer to
       stack vertically below 768px (tablet), not just on phones. The side-by-side
       min-widths (200/300) plus the drag handle are reset so each pane spans the
       full width and the log keeps a usable height. (The ≤640 block above carries
       the same intent for phones; this widens it to the full tablet range.) */
    .ci-split-layout {
        flex-direction: column;
        max-height: none;
    }
    .ci-process-panel {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--cci-color-border, #e5e7eb);
    }
    .ci-log-panel {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .ci-log-panel .ci-log-viewer {
        min-height: 300px;
    }
    .ci-split-handle {
        display: none;
    }

    /* Run-detail metadata row: long repo/branch/commit/OS/CPU values must not
       force page-level horizontal scroll. The row wraps (`.flex-wrap`); here we
       tighten the gap and let long unbroken tokens break within their chip. */
    .ci-metadata-panel .flex {
        gap: var(--cci-space-4);
    }

    .ci-metadata-panel a,
    .ci-metadata-panel code,
    .ci-metadata-panel .font-mono {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}