/* KYC verification layout — used by ProfessionalReview and similar admin
   review screens. Lays out the section as: full-width column with a
   content row (extracted data + source document, side by side) and a
   state row beneath (verification controls).

   Lives in @layer components for consistent precedence with the rest of
   the modern stack. Pixel values replaced with --space-* tokens; the
   defunct --app-brand-color reference replaced with --color-line.
   Children use flex:1 instead of width:50% so the gap doesn't overflow. */

@layer components {

    .app-kyc-verify-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

    .app-kyc-verify-content-section {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding-inline-start: var(--space-1);
        width: 100%;
        gap: var(--space-2);
    }

    .app-kyc-verify-content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding-inline-start: var(--space-1);
        flex: 1;
        /* Allow shrinking below intrinsic content size — without this the
           cert viewer's card or the document image's natural width pushes
           the column out and breaks the 50/50 split. */
        min-width: 0;
    }

    .app-kyc-verify-state-section {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--space-1) 0 0 var(--space-1);
        width: 100%;
        gap: var(--space-2);
    }

    .app-kyc-verify-state-content {
        border-top: 1px solid var(--color-line);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--space-3) 0 0 var(--space-1);
        margin-top: var(--space-3);
        flex: 1;
        /* Allow shrinking below intrinsic content size. */
        min-width: 0;
    }
}