/* ==========================================================================
   ConflictLog Review App — style.css
   Extends screen.css design tokens exactly.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --color-bg:           #F0EDE7;
    --color-surface:      #E6E3DC;
    --color-text:         #1E1E1E;
    --color-text-sec:     #6B6B6B;
    --color-accent:       #C8940E;
    --color-accent-hover: #B07E0A;
    --color-border:       #D5D3CE;
    --color-dark:         #1E1E1E;
    --color-dark-surface: #2A2A2A;
    --color-light-dark:   #F0ECE4;
    --font-body:          'Lora', Georgia, serif;
    --font-ui:            'Space Grotesk', system-ui, sans-serif;
    --nav-height:         60px;
    --radius:             3px;
    --color-success:      #2d6a4f;
    --color-success-bg:   #d8f3dc;
    --color-danger:       #9b1c1c;
    --color-danger-bg:    #fde8e8;
    --color-warning:      #92400e;
    --color-warning-bg:   #fef3c7;
    --color-promoted:     #1e3a5f;
    --color-promoted-bg:  #dbeafe;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-ui);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================================
   NAV — matches Ghost gh-head exactly
   ========================================================================== */

.gh-head {
    position: sticky;
    top: 0;
    z-index: 500;
    height: var(--nav-height);
    background: var(--color-dark);
    border-bottom: 1px solid var(--color-dark-surface);
}

.gh-head-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
}

.gh-head-logo {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-light-dark);
    text-decoration: none;
    letter-spacing: 0.02em;
    min-width: 160px;
}

.gh-head-logo:hover { color: var(--color-light-dark); text-decoration: none; }

.logo-accent { color: var(--color-accent); }

.gh-head-menu { display: flex; align-items: center; }

.gh-head-menu .nav {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
}

.gh-head-menu .nav li a {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
}

.gh-head-menu .nav li a:hover,
.gh-head-menu .nav li.nav-current a {
    color: var(--color-accent);
    background: rgba(200, 148, 14, 0.08);
}

/* Status counts in nav right */
.review-status-counts {
    margin-left: auto;
    display: flex;
    gap: 1rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sc-pending  { color: #fbbf24; }
.sc-approved { color: #86efac; }
.sc-rejected { color: #fca5a5; }
.sc-promoted { color: #93c5fd; }

/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.review-main {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--radius);
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--color-accent);
    color: var(--color-dark);
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); color: var(--color-dark); text-decoration: none; }

.btn-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid #f5c6c6;
}
.btn-danger:hover:not(:disabled) { background: #fbd5d5; text-decoration: none; }

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }

.btn-sm  { font-size: 0.72rem; padding: 0.3rem 0.75rem; }
.btn-xs  { font-size: 0.68rem; padding: 0.2rem 0.5rem; }

.btn-save   { background: var(--color-accent); color: var(--color-dark); border: none; }
.btn-save:hover { background: var(--color-accent-hover); }
.btn-cancel { background: var(--color-surface); color: var(--color-text-sec); border: 1px solid var(--color-border); }

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 2px;
    white-space: nowrap;
}

.badge-pending      { background: var(--color-warning-bg);  color: var(--color-warning); }
.badge-under-review { background: #ede9fe; color: #4c1d95; }
.badge-approved     { background: var(--color-success-bg);  color: var(--color-success); }
.badge-rejected     { background: var(--color-danger-bg);   color: var(--color-danger); }
.badge-promoted     { background: var(--color-promoted-bg); color: var(--color-promoted); }
.badge-error        { background: var(--color-danger-bg);   color: var(--color-danger); }

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--color-border);
    color: var(--color-text-sec);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

.input-field {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-text);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.45rem 0.75rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}
.input-field::placeholder { color: var(--color-text-sec); opacity: 0.6; }
.input-field:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(200,148,14,0.12); }

.select-field {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.4rem 2rem 0.4rem 0.7rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236B6B6B' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    transition: border-color 0.15s;
}
.select-field:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(200,148,14,0.12); outline: none; }

.edit-input {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-text);
    background: white;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 0.25rem 0.5rem;
    outline: none;
    box-shadow: 0 0 0 3px rgba(200,148,14,0.12);
    min-width: 180px;
}

input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ==========================================================================
   KBD HINTS
   ========================================================================== */

.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--color-dark-surface);
    color: var(--color-light-dark);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #000;
}

/* ==========================================================================
   LIST PAGE
   ========================================================================== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.25rem;
}

.page-title {
    font-family: var(--font-ui);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.filters-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.batch-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
}

.batch-left { display: flex; align-items: center; gap: 8px; }

/* Table */
.table-wrap {
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }

thead tr { background: var(--color-dark); }
thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-light-dark);
    padding: 9px 14px;
    text-align: left;
    white-space: nowrap;
}

tbody tr { border-bottom: 1px solid var(--color-border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--color-surface); }
tbody tr.row-selected { background: #fdf6e3; }

td {
    padding: 9px 14px;
    font-size: 12px;
    vertical-align: middle;
}

.td-type { font-weight: 600; }
.td-dim  { color: var(--color-text-sec); }
.mono-id {
    font-family: monospace;
    font-size: 10px;
    background: var(--color-surface);
    color: var(--color-text-sec);
    padding: 1px 5px;
    border-radius: 2px;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.25rem;
}

/* Batch result */
.batch-result-summary {
    font-size: 0.82rem;
    color: var(--color-success);
    background: var(--color-success-bg);
    border-radius: var(--radius);
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.4rem;
}

.batch-result-error {
    font-size: 0.78rem;
    color: var(--color-danger);
    background: var(--color-danger-bg);
    border-radius: var(--radius);
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   SOURCE LIST — nested child records under each row
   ========================================================================== */

.source-children-row td {
    padding: 0;
    background: var(--color-bg);
}

.source-children-inner {
    padding: 12px 14px 16px 36px;
    border-top: 1px dashed var(--color-border);
}

.source-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.child-mini-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 11px;
}

.child-mini-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.child-mini-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    margin-left: auto;
}

.child-mini-content {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-surface);
    border-left: 2px solid var(--color-accent);
    padding: 6px 8px;
    max-height: 80px;
    overflow: hidden;
    position: relative;
}

.child-mini-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(transparent, var(--color-surface));
}

.toggle-children-btn {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   DETAIL PAGE
   ========================================================================== */

.breadcrumb {
    font-size: 12px;
    color: var(--color-text-sec);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb a { color: var(--color-accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.detail-header-left h1 {
    font-family: var(--font-ui);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.detail-header-left .sub {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-sec);
    margin-left: 6px;
}

.detail-header-left .badge-row { margin-top: 8px; }

/* Action area */
.action-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
    min-width: 300px;
}

.notes-textarea {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-text);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    width: 100%;
    resize: none;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.notes-textarea::placeholder { color: var(--color-text-sec); opacity: 0.6; }
.notes-textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(200,148,14,0.12); }

.action-btns { display: flex; gap: 8px; }

.btn-approve {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-accent);
    color: var(--color-dark);
    border: none;
    border-radius: var(--radius);
    padding: 9px 0;
    cursor: pointer;
    min-width: 160px;
    transition: background 0.15s;
}
.btn-approve:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-approve:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-promote {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #1a7f4b;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 9px 0;
    cursor: pointer;
    min-width: 160px;
    transition: background 0.15s;
}
.btn-promote:hover:not(:disabled) { background: #166040; }
.btn-promote:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-unapprove {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--color-text-sec);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 9px 0;
    cursor: pointer;
    min-width: 120px;
    transition: border-color 0.15s, color 0.15s;
}
.btn-unapprove:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.btn-unapprove:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-reject {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid #f5c6c6;
    border-radius: var(--radius);
    padding: 9px 0;
    cursor: pointer;
    min-width: 160px;
    transition: background 0.15s;
}
.btn-reject:hover:not(:disabled) { background: #fbd5d5; }
.btn-reject:disabled { opacity: 0.5; cursor: not-allowed; }

.kbd-hint {
    font-size: 11px;
    color: var(--color-text-sec);
    text-align: center;
}

/* ==========================================================================
   SECTION CARDS
   ========================================================================== */

.section-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}

.section-title {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    background: var(--color-surface);
}

/* ==========================================================================
   FIELD GRID
   ========================================================================== */

.field-grid { padding: 0 16px; }

.field-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-surface);
    font-size: 12px;
    align-items: baseline;
}

.field-row:last-child { border-bottom: none; }

.field-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    min-width: 160px;
}

.field-val { color: var(--color-text); word-break: break-word; }

.field-val.editable {
    cursor: pointer;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 1px;
    transition: border-color 0.15s, color 0.15s;
    display: inline;
}
.field-val.editable:hover { border-color: var(--color-accent); color: var(--color-accent); }
.edit-hint { font-size: 11px; color: var(--color-accent); margin-left: 4px; opacity: 0.7; }

/* ==========================================================================
   CHILD RECORD BLOCKS
   ========================================================================== */

.child-record {
    margin: 10px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
}

.child-record:last-child { margin-bottom: 14px; }

.child-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.child-header .source-link {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-accent);
    text-decoration: none;
}
.child-header .source-link:hover { text-decoration: underline; }

.child-field-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 11px;
    align-items: baseline;
}
.child-field-row:last-child { border-bottom: none; }

.child-field-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-sec);
}

.content-block {
    background: white;
    border-left: 3px solid var(--color-accent);
    border-radius: 0;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.75;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
}

/* ==========================================================================
   HTMX
   ========================================================================== */

.htmx-added { animation: fadeIn 0.2s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   TWO-COLUMN DETAIL LAYOUT
   ========================================================================== */

.detail-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start;
}

.detail-col-left  { min-width: 0; }
.detail-col-right { min-width: 0; }

@media (max-width: 900px) {
    .detail-two-col { grid-template-columns: 1fr; }
}
/* ==========================================================================
   SOURCE CARD LIST — replaces table rows on list page
   ========================================================================== */

.source-card-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.source-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.source-card:hover {
    border-color: var(--color-accent);
}

.source-card--focused {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 148, 14, 0.12);
}

.source-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.source-archive-link {
    font-size: 11px;
    color: var(--color-accent);
    text-decoration: none;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}
.source-archive-link:hover { text-decoration: underline; }

.source-card-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-surface);
}

.source-card-meta-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
}

.source-card-content {
    font-size: 12px;
}

/* Children preview inside card — two-column for text+translation */
.children-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

@media (max-width: 700px) {
    .children-two-col { grid-template-columns: 1fr; }
}

.children-col-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    margin-bottom: 5px;
}

.children-text-truncated {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-surface);
    border-left: 2px solid var(--color-accent);
    padding: 4px 8px;
    max-height: 60px;
    overflow: hidden;
    position: relative;
    white-space: pre-wrap;
    word-break: break-word;
}

.children-text-truncated.expanded {
    max-height: none;
}

.children-text-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, var(--color-surface));
    pointer-events: none;
}

.children-read-more {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Run status / trigger result messages */
.run-started {
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 12px;
}

.run-stopped {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 12px;
}

.form-error {
    color: var(--color-danger);
    font-size: 12px;
}
/* ==========================================================================
   ConflictLog Review — clusters.css
   Append to style.css. All values use existing design tokens from :root.
   ========================================================================== */

/* ==========================================================================
   CLUSTER LIST PAGE
   ========================================================================== */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 14px;
    align-items: center;
}

.status-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
}

.status-tab {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-sec);
    padding: 0.45rem 1rem;
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-tab:hover { color: var(--color-text); background: var(--color-surface); text-decoration: none; }

.status-tab.active {
    color: var(--color-accent);
    background: white;
    border-color: var(--color-border);
    margin-bottom: -1px;
}

.filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 10px 0 6px;
}

.filter-select {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.35rem 2rem 0.35rem 0.6rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236B6B6B' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    transition: border-color 0.15s;
}
.filter-select:focus { border-color: var(--color-accent); outline: none; }

.filter-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--color-text-sec);
    cursor: pointer;
    user-select: none;
}

.list-meta {
    font-size: 11px;
    color: var(--color-text-sec);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.list-meta .sep { color: var(--color-border); }

.cluster-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cluster-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cluster-card:hover,
.cluster-card:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(200,148,14,0.10);
}

.cluster-card--new-sources { border-left: 3px solid var(--color-promoted); }

.cluster-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.cluster-card-title {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cluster-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.cluster-card-body {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--color-text-sec);
}

.cluster-card-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-icon      { font-size: 12px; }
.info-icon.warn { color: var(--color-warning); }
.warn-text      { color: var(--color-warning); font-weight: 600; }

.warn-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 0.12rem 0.4rem;
    border-radius: 2px;
}

.empty-state {
    text-align: center;
    color: var(--color-text-sec);
    font-size: 13px;
    padding: 2rem;
}

/* ==========================================================================
   CLUSTER DETAIL — THREE-COLUMN LAYOUT
   ========================================================================== */

.cluster-three-col {
    display: grid;
    grid-template-columns: 340px 1fr 280px;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

.cluster-col-left,
.cluster-col-centre,
.cluster-col-right { min-width: 0; }

@media (max-width: 1100px) {
    .cluster-three-col { grid-template-columns: 300px 1fr; }
    .cluster-col-right { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .cluster-three-col { grid-template-columns: 1fr; }
}

.section-title-sm {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    padding: 8px 16px 4px;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--color-surface);
    margin: 12px 0 4px;
}

.time-bounds-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    font-size: 11px;
    margin-top: 4px;
}

.field-label-sm {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    display: block;
    margin-bottom: 2px;
}

.field-row--full { grid-column: 1 / -1; }

.time-summary {
    font-size: 11px;
    color: var(--color-text-sec);
    margin-top: 4px;
    font-style: italic;
}

/* Cluster + resolution status badges */
.badge-cluster-proposed  { background: var(--color-warning-bg);  color: var(--color-warning); }
.badge-cluster-confirmed { background: var(--color-success-bg);  color: var(--color-success); }
.badge-cluster-rejected  { background: var(--color-danger-bg);   color: var(--color-danger); }
.badge-cluster-merged    { background: var(--color-surface);     color: var(--color-text-sec); }

.badge-new-sources { background: var(--color-promoted-bg); color: var(--color-promoted); }
.badge-ai          { background: #ede9fe; color: #4c1d95; }
.badge-type        { background: var(--color-surface); color: var(--color-text-sec); }
.badge-category    { background: var(--color-surface); color: var(--color-text-sec); }

.badge-confirmed { background: var(--color-success-bg); color: var(--color-success); }
.badge-probable  { background: #d1fae5; color: #065f46; }
.badge-suspected { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-unknown   { background: var(--color-surface);    color: var(--color-text-sec); }
.badge-warning   { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-ihl       { background: var(--color-danger-bg);  color: var(--color-danger); }

.id-code {
    font-family: monospace;
    font-size: 11px;
    background: var(--color-surface);
    color: var(--color-text-sec);
    padding: 1px 6px;
    border-radius: 2px;
}

.id-code-xs {
    font-family: monospace;
    font-size: 10px;
    background: var(--color-surface);
    color: var(--color-text-sec);
    padding: 1px 4px;
    border-radius: 2px;
}

/* ==========================================================================
   MEMBER CARDS
   ========================================================================== */

.member-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    animation: fadeIn 0.15s ease;
}

.member-card:last-child { margin-bottom: 0; }

.member-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.member-card-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-wrap: wrap;
}

.source-pipeline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-sec);
}

.event-index-badge {
    font-size: 10px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 1px 5px;
    border-radius: 2px;
    font-weight: 600;
}

.member-card-scores {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.score-chip {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    white-space: nowrap;
}

.score-high { background: var(--color-success-bg); color: var(--color-success); }
.score-mid  { background: var(--color-warning-bg); color: var(--color-warning); }
.score-low  { background: var(--color-danger-bg);  color: var(--color-danger); }

.btn-remove {
    background: transparent;
    color: var(--color-danger);
    border: 1px solid #f5c6c6;
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
}
.btn-remove:hover { background: var(--color-danger-bg); }

.member-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.meta-chip {
    font-size: 11px;
    color: var(--color-text-sec);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 2px 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.parsed-time { color: var(--color-text); font-weight: 500; }

.member-text-block { margin-bottom: 8px; }

.text-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-sec);
    margin-bottom: 4px;
    display: block;
}

.source-text {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-text);
    background: white;
    border-left: 3px solid var(--color-accent);
    padding: 8px 10px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.source-text--original {
    border-left-color: var(--color-border);
    background: var(--color-surface);
    font-size: 11px;
}

.original-details { margin-top: 6px; }
.original-details summary { cursor: pointer; font-size: 11px; color: var(--color-text-sec); }

.event-description {
    font-size: 12px;
    color: var(--color-text-sec);
    font-style: italic;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 2px solid var(--color-border);
}

/* Entity rows */
.entity-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.entity-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    padding: 4px 6px;
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.entity-type-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    white-space: nowrap;
}

.entity-type-organisation { background: #dbeafe; color: #1e3a5f; }
.entity-type-person        { background: #fce7f3; color: #831843; }
.entity-type-location      { background: #d1fae5; color: #065f46; }
.entity-type-equipment     { background: var(--color-warning-bg); color: var(--color-warning); }

.raw-entity-text { font-weight: 600; }

.entity-resolved,
.entity-unresolved { display: flex; align-items: center; gap: 5px; }

.edit-input--sm {
    font-size: 0.78rem;
    padding: 0.2rem 0.4rem;
    min-width: 120px;
}

/* Casualties */
.casualty-list {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.casualty-chip {
    font-size: 11px;
    font-weight: 600;
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-radius: 2px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stated-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 1px 4px;
    border-radius: 2px;
}

.member-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
    font-size: 11px;
}

.source-link { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.source-link:hover { text-decoration: underline; }

.removed-notice {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 12px;
    margin-bottom: 10px;
}

/* Entity candidate picker */
.candidate-picker {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    width: 100%;
}

.candidate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 12px;
    transition: border-color 0.12s, background 0.12s;
}
.candidate-row:hover { border-color: var(--color-accent); background: white; }

.candidate-name { font-weight: 600; flex: 1; }

.candidate-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}

/* ==========================================================================
   LOCATION PANEL
   ========================================================================== */

.location-panel { padding: 10px 16px 12px; }

.location-resolved { display: flex; flex-direction: column; gap: 6px; }

.location-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    flex-wrap: wrap;
}

.location-hierarchy { font-size: 11px; padding-left: 2px; }

.location-unresolved { display: flex; flex-direction: column; gap: 6px; }

.approximation-notice {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-warning);
    background: var(--color-warning-bg);
    padding: 3px 8px;
    border-radius: 2px;
    display: inline-block;
}

.feature-badge {
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    background: var(--color-surface);
    color: var(--color-text-sec);
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid var(--color-border);
}

.approx-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-warning);
    background: var(--color-warning-bg);
    padding: 1px 5px;
    border-radius: 2px;
}

.location-picker {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-picker-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.location-candidates {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 260px;
    overflow-y: auto;
}

.location-candidate {
    padding: 6px 10px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 12px;
    transition: border-color 0.12s;
}
.location-candidate:hover { border-color: var(--color-accent); }
.location-candidate--coarse { border-left: 3px solid var(--color-warning); }

.candidate-hierarchy { font-size: 11px; margin-top: 2px; }

/* ==========================================================================
   IHL PANEL
   ========================================================================== */

.ihl-panel { padding: 8px 16px 12px; }

.ihl-flagged-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.ihl-item {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: 12px;
}

.ihl-item--ai { border-style: dashed; }

.ihl-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.ihl-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-danger-bg);
    color: var(--color-danger);
    padding: 1px 5px;
    border-radius: 2px;
}

.ihl-facility-name { font-weight: 600; font-size: 12px; }
.ihl-article       { font-size: 11px; font-style: italic; }

.ihl-reference { margin-top: 10px; font-size: 12px; }

.ihl-reference summary {
    cursor: pointer;
    font-size: 11px;
    color: var(--color-text-sec);
    user-select: none;
    padding: 3px 0;
}

.ihl-reference-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.ihl-ref-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 11px;
    padding: 2px 4px;
    border-bottom: 1px solid var(--color-surface);
}

/* ==========================================================================
   AI EXTRACT PANEL
   ========================================================================== */

.ai-extract-panel { padding: 10px 16px 14px; }

.ai-extract-textarea {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-text);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    width: 100%;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.55;
    margin-bottom: 8px;
}
.ai-extract-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200,148,14,0.12);
}
.ai-extract-textarea::placeholder { color: var(--color-text-sec); opacity: 0.6; }

.ai-extract-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.help-text { font-size: 11px; color: var(--color-text-sec); font-style: italic; }

.loading { font-size: 11px; color: var(--color-text-sec); }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }

.ai-extracted-card {
    background: white;
    border: 1px solid #c4b5fd;
    border-left: 3px solid #7c3aed;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    animation: fadeIn 0.2s ease;
}

.ai-extracted-card--error {
    border-color: var(--color-danger-bg);
    border-left-color: var(--color-danger);
}

.ai-extracted-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.extracted-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-surface);
}

.ai-extracted-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--color-surface);
}

.error-text { font-size: 12px; color: var(--color-danger); }

/* ==========================================================================
   PARTICIPANTS + CASUALTIES (right column)
   ========================================================================== */

.participant-list {
    padding: 8px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participant-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 12px;
}

.participant-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.badge-role        { background: #dbeafe; color: #1e3a5f; }
.participant-entity { font-size: 11px; font-weight: 600; }
.resolved-org      { color: #1e3a5f; }
.resolved-person   { color: #831843; }
.participant-notes { font-size: 11px; margin-top: 3px; }

.casualty-table {
    padding: 8px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.casualty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-surface);
    flex-wrap: wrap;
}
.casualty-row:last-child { border-bottom: none; }

.casualty-harm-type { font-weight: 600; min-width: 100px; }
.casualty-count     { font-weight: 700; color: var(--color-danger); }

/* ==========================================================================
   NEARBY CLUSTERS (right column)
   ========================================================================== */

.nearby-list {
    padding: 8px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nearby-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 12px;
}

.nearby-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.distance-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--color-text-sec);
}

.nearby-time  { font-size: 11px; margin-bottom: 3px; }
.nearby-notes { font-size: 11px; }

.nearby-actions { display: flex; gap: 6px; margin-top: 6px; }

.merge-result {
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auto-resolve-result {
    font-size: 12px;
    color: var(--color-text-sec);
    padding: 6px 0 2px;
}

/* ==========================================================================
   UTILITY
   ========================================================================== */

.muted   { color: var(--color-text-sec); }
.muted a { color: var(--color-accent); }
/* ==========================================================================
   CLUSTERING PAGE — append to clusters.css
   ========================================================================== */

.clustering-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 14px;
    align-items: start;
}

.clustering-col-left,
.clustering-col-right { min-width: 0; }

@media (max-width: 900px) {
    .clustering-layout { grid-template-columns: 1fr; }
}

/* Config form */
.clustering-config-form { padding: 4px 0 12px; }

.clustering-param-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-surface);
    align-items: start;
}

.clustering-param-row:last-of-type { border-bottom: none; }

.clustering-param-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.clustering-param-desc {
    font-size: 11px;
    color: var(--color-text-sec);
    line-height: 1.5;
}

.clustering-param-input {
    width: 100%;
    min-width: 0;
    text-align: right;
}

.clustering-form-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 4px;
    flex-wrap: wrap;
}

/* Weight sum indicator */
.weight-sum-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 12px;
    font-size: 12px;
}

.weight-sum-display {
    font-weight: 700;
    font-size: 13px;
    min-width: 40px;
}

.weight-sum-ok  { color: var(--color-success); }
.weight-sum-err { color: var(--color-danger); }

/* Run panel */
.clustering-run-panel { padding: 12px 16px; }

.run-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.run-limit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}

.run-action-row {
    display: flex;
    gap: 8px;
}

/* Status panel */
.clustering-status-panel { padding: 10px 16px 14px; }

.clustering-status-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.clustering-status-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid var(--color-surface);
}
.status-row:last-child { border-bottom: none; }

/* Run history */
.clustering-run-history {
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
}

.run-history-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-surface);
}
.run-history-row:last-child { border-bottom: none; }

/* ========== REFERENCE TABLES ========== */
.ref-th { font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-sec);padding:8px 12px;text-align:left;border-bottom:2px solid var(--color-border);white-space:nowrap; }
.ref-td { padding:7px 12px;border-bottom:1px solid var(--color-surface);vertical-align:top;font-size:12px;color:var(--color-text); }
.ref-row:hover .ref-td { background:var(--color-surface); }
.ref-row:last-child .ref-td { border-bottom:none; }