/* ============================================================
   V2 composition atoms
   ============================================================
   Shared compact building blocks for rows, inline editors, fact grids,
   branch panels, and soft empty states. These atoms are intentionally
   small and reusable across registries, profiles, pricing, and wizards.
   ============================================================ */

.v2-inline-list,
.v2-inline-row,
.v2-inline-panel,
.v2-inline-form,
.v2-inline-edit-head,
.v2-inline-edit-actions,
.v2-stack,
.v2-list-cards,
.v2-list-group-stack,
.v2-list-group,
.v2-list-group-head,
.v2-mini-card,
.v2-branch-list,
.v2-branch-row,
.v2-branch-panel,
.v2-fact-grid,
.v2-fact,
.v2-metric-list,
.v2-metric-row,
.v2-overview-grid,
.v2-overview-col,
.v2-overview-heading,
.v2-overview-rows,
.v2-overview-row,
.v2-tool-card,
.v2-doc-row,
.v2-doc-row-main,
.v2-doc-row-actions,
.v2-timeline,
.v2-timeline-item,
.v2-meta-actions,
.v2-form-actions-inline,
.v2-badge-row,
.v2-field-align-end,
.v2-readiness-list,
.v2-chip-note,
.v2-empty-soft {
    box-sizing: border-box;
}

.v2-stack {
    display: flex;
    flex-direction: column;
    gap: var(--v2-stack-gap, var(--s-6));
}

.v2-stack.is-compact {
    --v2-stack-gap: var(--s-4);
}

.v2-meta-actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.v2-inline-form {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    align-items: flex-end;
}

.v2-inline-form .v2-field {
    flex: 1 1 180px;
    min-width: 180px;
    margin: 0;
}

.v2-inline-form.is-actions-end {
    justify-content: flex-end;
}

.v2-inline-form .v2-field.is-fixed-sm {
    flex: 0 0 160px;
    min-width: 160px;
}

.v2-field-align-end {
    align-self: end;
}

.v2-chip-note {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.v2-list-cards {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.v2-list-group-stack {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-5);
}

.v2-list-group {
    display: grid;
    gap: var(--s-3);
}

.v2-list-group-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.v2-list-group-title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.v2-badge-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.v2-mini-card {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    align-items: flex-start;
    padding: var(--s-5);
    border-bottom: 1px solid var(--line);
}

.v2-mini-card:last-child {
    border-bottom: 0;
}

.v2-mini-card.is-flat {
    padding: 0;
    border-bottom: 0;
}

.v2-mini-card-main {
    min-width: 0;
}

.v2-mini-card-title {
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.v2-mini-card-sub {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.v2-mini-card-actions {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.v2-inline-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.v2-inline-edit-title {
    margin: 0;
    font-size: var(--text-lg);
}

.v2-inline-edit-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.v2-autosave-status {
    align-self: center;
}

.v2-form-actions-inline {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-4);
}

.v2-timeline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-timeline-item {
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--line);
}

.v2-timeline-item:last-child {
    border-bottom: 0;
}

.v2-timeline-time {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.v2-timeline-title {
    margin-top: 4px;
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}

.v2-timeline-note {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.v2-inline-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.v2-inline-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    min-width: 0;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
}

.v2-inline-row:last-child {
    border-bottom: 0;
}

.v2-inline-row:hover {
    background: var(--bg-hover);
}

.v2-inline-row.is-active,
.v2-inline-row[aria-expanded="true"] {
    background: var(--accent-bg);
}

.v2-inline-row-main {
    min-width: 0;
}

.v2-inline-row-title {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}

.v2-inline-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
}

.v2-inline-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
}

.v2-inline-link {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.v2-inline-link:hover {
    color: var(--accent);
}

.v2-inline-edit-row[hidden],
.v2-branch-panel[hidden] {
    display: none;
}

.v2-inline-edit-cell {
    background: var(--bg-subtle);
}

.v2-tbl tbody td.v2-inline-edit-cell {
    padding: 0;
}

.v2-inline-edit-panel,
.v2-inline-panel {
    border-top: 1px solid var(--border-light);
    padding: var(--v2-inline-panel-padding, var(--s-4) var(--s-5) var(--s-5));
    background: var(--bg-card);
    animation: v2-inline-open 160ms ease-out;
}

.v2-inline-edit-form {
    display: grid;
    gap: var(--s-4);
}

.v2-section-card-body.is-flush {
    padding: 0;
}

.v2-section-card-body.is-compact-pad {
    padding: var(--s-5);
}

.v2-inline-section-title {
    margin: 0 0 var(--s-2);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.v2-branch-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.v2-branch-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.32fr) minmax(0, 1fr) minmax(110px, auto) auto;
    gap: var(--s-4);
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: var(--s-3) var(--s-4);
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.v2-branch-row:hover {
    background: var(--bg-hover);
}

.v2-branch-row.is-active,
.v2-branch-row[aria-expanded="true"] {
    background: var(--accent-bg);
}

.v2-branch-kicker {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.v2-branch-title {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: var(--weight-semibold);
}

.v2-branch-state {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.v2-branch-panel {
    padding: var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
}

.v2-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
}

.v2-fact-grid.is-plain {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3) var(--s-5);
    margin-top: var(--s-3);
}

.v2-fact {
    min-width: 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.v2-fact-grid.is-plain .v2-fact {
    padding: 0;
    border: 0;
    background: transparent;
}

.v2-fact .k,
.v2-fact-key {
    display: block;
    margin-bottom: 2px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
}

.v2-fact .v,
.v2-fact-value {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}

.v2-metric-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.v2-metric-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
}

.v2-metric-row:last-child {
    border-bottom: 0;
}

.v2-metric-row .k {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.v2-metric-row .v {
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.v2-overview-grid,
.page-contract-detail-v2 .contract-overview-grid,
.page-compensation-case-v2 .comp-profile-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.v2-overview-col,
.page-contract-detail-v2 .contract-overview-col,
.page-compensation-case-v2 .comp-profile-overview-col {
    min-width: 0;
    padding: var(--s-2) var(--s-4);
}

.v2-overview-col + .v2-overview-col,
.page-contract-detail-v2 .contract-overview-col + .contract-overview-col,
.page-compensation-case-v2 .comp-profile-overview-col + .comp-profile-overview-col {
    border-left: 1px solid var(--border-subtle);
}

.v2-overview-heading {
    margin: 0 0 var(--s-3);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.v2-overview-rows,
.page-contract-detail-v2 .contract-overview-rows,
.page-compensation-case-v2 .comp-profile-overview-rows {
    display: grid;
    gap: 6px;
    overflow: hidden;
}

.v2-overview-row,
.page-contract-detail-v2 .contract-overview-row,
.page-compensation-case-v2 .comp-profile-overview-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: 4px 0;
}

.v2-overview-row.is-primary,
.page-contract-detail-v2 .contract-overview-row.is-primary,
.page-compensation-case-v2 .comp-profile-overview-row.is-primary {
    padding-top: 2px;
}

.v2-overview-row .k,
.page-contract-detail-v2 .contract-overview-row .k,
.page-compensation-case-v2 .comp-profile-overview-row .k {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.v2-overview-row .v,
.page-contract-detail-v2 .contract-overview-row .v,
.page-compensation-case-v2 .comp-profile-overview-row .v {
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.v2-overview-row.is-primary .v,
.page-contract-detail-v2 .contract-overview-row.is-primary .v,
.page-compensation-case-v2 .comp-profile-overview-row.is-primary .v {
    font-size: var(--text-md);
    line-height: 1.2;
}

.v2-tool-card,
.page-contract-detail-v2 .contract-tool-card {
    min-width: 0;
    padding: var(--s-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: inherit;
    text-decoration: none;
}

.v2-tool-card.is-accent {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.v2-tool-card.is-spaced {
    margin-top: var(--s-5);
}

.v2-tool-card:hover,
.page-contract-detail-v2 a.contract-tool-card:hover {
    border-color: var(--accent-bg-strong);
    background: var(--bg-subtle);
}

.v2-tool-card.is-accent:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.v2-tool-card span,
.page-contract-detail-v2 .contract-tool-card span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.v2-tool-card strong,
.page-contract-detail-v2 .contract-tool-card strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.v2-doc-row,
.page-contract-detail-v2 .contract-doc-row,
.page-contract-detail-v2 .contract-case-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--bg-card);
}

.v2-doc-row strong,
.page-contract-detail-v2 .contract-doc-row strong,
.page-contract-detail-v2 .contract-case-row strong {
    display: block;
    color: var(--text-primary);
}

.v2-doc-row span,
.page-contract-detail-v2 .contract-doc-row span,
.page-contract-detail-v2 .contract-case-row span {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.v2-doc-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.v2-doc-row-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--s-3);
}

.v2-muted-inline {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.v2-mono-muted {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.v2-readiness-list,
.page-compensation-case-v2 .comp-readiness-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-card);
    list-style: none;
}

.v2-readiness-list li,
.page-compensation-case-v2 .comp-readiness-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}

.v2-readiness-list li:last-child,
.page-compensation-case-v2 .comp-readiness-list li:last-child {
    border-bottom: 0;
}

.v2-readiness-status,
.page-compensation-case-v2 .comp-readiness-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.v2-readiness-status.is-ready,
.page-compensation-case-v2 .comp-readiness-status.is-ready {
    background: var(--success-bg);
    color: var(--success);
}

.v2-empty-soft,
.v2-form .v2-empty-soft,
.v2-form .v2-empty-field {
    background-color: var(--bg-subtle);
    border-color: var(--border-light);
    box-shadow: inset 0 1px 3px rgba(44, 43, 39, 0.08), 0 1px 2px rgba(44, 43, 39, 0.04);
}

.v2-empty-soft:focus,
.v2-form .v2-empty-soft:focus,
.v2-form .v2-empty-field:focus {
    background-color: var(--bg-card);
}

.v2-section-card.is-flush > .v2-section-card-body {
    padding: 0;
}

.v2-section-card.is-flat {
    box-shadow: none;
}

.v2-danger-action {
    color: var(--danger);
}

.v2-danger-action:hover {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger);
}

@keyframes v2-inline-open {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1080px) {
    .v2-fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v2-overview-grid,
    .page-contract-detail-v2 .contract-overview-grid,
    .page-compensation-case-v2 .comp-profile-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v2-branch-row {
        grid-template-columns: minmax(80px, 0.28fr) minmax(0, 1fr) auto;
    }

    .v2-branch-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .v2-inline-row,
    .v2-branch-row,
    .v2-metric-row {
        grid-template-columns: 1fr;
    }

    .v2-inline-row-actions,
    .v2-branch-row-actions {
        justify-content: flex-start;
    }

    .v2-fact-grid {
        grid-template-columns: 1fr;
    }

    .v2-overview-grid,
    .page-contract-detail-v2 .contract-overview-grid,
    .page-compensation-case-v2 .comp-profile-overview-grid {
        grid-template-columns: 1fr;
    }

    .v2-overview-row,
    .page-contract-detail-v2 .contract-overview-row,
    .page-compensation-case-v2 .comp-profile-overview-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .v2-overview-col + .v2-overview-col,
    .page-contract-detail-v2 .contract-overview-col + .contract-overview-col,
    .page-compensation-case-v2 .comp-profile-overview-col + .comp-profile-overview-col {
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
    }

    .v2-doc-row,
    .page-contract-detail-v2 .contract-doc-row,
    .page-contract-detail-v2 .contract-case-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

[data-v2-density="compact"] {
    --v2-inline-panel-padding: var(--s-4);
}

[data-v2-density="compact"] .v2-inline-row,
[data-v2-density="compact"] .v2-branch-row,
[data-v2-density="compact"] .v2-metric-row {
    padding: var(--s-2) var(--s-4);
}

[data-v2-density="compact"] .v2-fact {
    padding: var(--s-3);
}