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

   The content row is a wrap-aware FLEX row. The data readout targets a compact
   ~34rem (label/value pairs don't benefit from extra width) and never grows
   past it; the source document fills the remaining width beside it. When the
   document can no longer keep ~26rem next to the data, it wraps to its own
   full-width line (data above, document below). flex-wrap is used instead of a
   viewport media query on purpose: the available width here is NOT the viewport
   (the shell sidebar + padding eat into it), so only the actual container width
   can decide when to stack — which flex-wrap does. min-width:0 + overflow:hidden
   on each column lets them shrink and clips a wide/zoomed image so it can't
   spill into its neighbour.

   Lives in @layer components for consistent precedence with the modern
   stack; consumes --space-* / --color-* tokens. */

@layer components {

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

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

    .app-kyc-verify-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Shrink past intrinsic content width + clip a wide/zoomed child so
           it can't spill across into the sibling column. */
        min-width: 0;
        overflow: hidden;
        padding-inline-start: var(--space-1);
    }
    /* Data readout: targets ~34rem, may shrink on very narrow screens, never
       grows past it. */
    .app-kyc-verify-content:first-child {
        flex: 0 1 34rem;
    }
    /* Source document/image: fills the width beside the data, and wraps to its
       own full-width line once it can no longer keep ~26rem next to the data
       (tune this basis to move the wrap point). */
    .app-kyc-verify-content:last-child {
        flex: 1 1 26rem;
    }

    .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;
        min-width: 0;
    }

}