/* CI_MODAL_ARCH_V6: Custom Domains modal chrome/scroll centralized; Public QR untouched. */
/** Custom domain manager and public QR UI. */


.ci-domain-icon-button{border:0;background:var(--surface-soft,#f1f5f3);color:var(--text,#18211d);border-radius:50%;width:36px;height:36px;font-size:22px;cursor:pointer}.ci-domain-icon-button:hover{background:var(--primary-soft,#e5f0eb);color:var(--primary,#174f3f)}
.ci-domain-intro{display:grid;gap:12px}.ci-domain-intro p{margin:0;color:var(--muted,#68736d)}.ci-domain-ns{padding:14px;border-radius:16px;background:var(--surface-soft,#f4f7f5)}.ci-domain-ns>strong{display:block;margin-bottom:9px}.ci-domain-ns>div{display:flex;flex-wrap:wrap;gap:8px}.ci-domain-copy{display:flex;align-items:center;gap:8px;border:1px solid var(--line,#dde4e0);border-radius:10px;background:var(--surface-solid,#fff);padding:8px 10px;cursor:pointer}.ci-domain-copy span{font-size:12px;color:var(--muted,#68736d)}
.ci-domain-add{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin:18px 0}.ci-domain-add label,.ci-domain-route-form label{display:grid;gap:6px}.ci-domain-add label>span,.ci-domain-route-form label>span{font-size:12px;font-weight:750;color:var(--muted,#68736d)}.ci-domain-add input,.ci-domain-route-form input,.ci-domain-route-form select{width:100%;min-height:43px;border:1px solid var(--line,#dde4e0);border-radius:11px;background:var(--surface-solid,#fff);color:var(--text,#18211d);padding:0 12px}.ci-domain-add input:focus,.ci-domain-route-form input:focus,.ci-domain-route-form select:focus{outline:3px solid color-mix(in srgb,var(--primary,#174f3f) 18%,transparent);border-color:var(--primary,#174f3f)}
.ci-domain-list{display:grid;gap:14px;margin-top:18px}.ci-domain-card{border:1px solid var(--line,#dde4e0);border-radius:18px;padding:16px;background:var(--surface-solid,#fff)}.ci-domain-card>header{display:flex;align-items:center;justify-content:space-between;gap:14px}.ci-domain-card>header>div:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.ci-domain-card>header strong{font-size:17px;overflow-wrap:anywhere}.ci-domain-card-actions{display:flex;gap:8px;align-items:center}.ci-domain-status{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--surface-soft,#f1f5f3);color:var(--muted,#68736d);font-size:11px;font-weight:800}.ci-domain-status.is-active{background:#def5e7;color:#16613a}.ci-domain-status.is-error{background:#fde7e3;color:#9a2c24}.ci-domain-status.is-provisioning,.ci-domain-status.is-pending_dns,.ci-domain-status.is-pending_ssl,.ci-domain-status.is-deleting{background:#fff2cc;color:#765a00}.ci-domain-status-detail{margin:10px 0 0;color:var(--muted,#68736d)}.ci-domain-error{margin:10px 0 0;color:var(--danger,#a33a2e)}.ci-domain-observed{margin:8px 0 0;color:var(--muted,#68736d);font-size:12px;overflow-wrap:anywhere}
.ci-domain-routes{display:grid;gap:8px;margin-top:14px}.ci-domain-route{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:10px 11px;border-radius:12px;background:var(--surface-soft,#f4f7f5)}.ci-domain-route>div{min-width:0}.ci-domain-route strong,.ci-domain-route small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ci-domain-route small{margin-top:3px;color:var(--muted,#68736d)}.ci-domain-route-primary{font-size:11px;font-weight:800;color:var(--primary,#174f3f)}.ci-domain-route-empty,.ci-domain-empty{padding:22px;text-align:center;color:var(--muted,#68736d);border:1px dashed var(--line,#dde4e0);border-radius:14px}.ci-domain-add-route{margin-top:10px;border:0;background:transparent;color:var(--primary,#174f3f);font-weight:750;cursor:pointer}
.ci-domain-route-form{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(180px,1.3fr) auto;align-items:end;gap:10px;margin-top:12px;padding:12px;border-radius:14px;background:var(--surface-soft,#f4f7f5)}.ci-domain-path-input{display:flex;align-items:center;border:1px solid var(--line,#dde4e0);border-radius:11px;background:var(--surface-solid,#fff)}.ci-domain-path-input>span{padding-left:11px;color:var(--muted,#68736d)}.ci-domain-path-input input{border:0!important;outline:0!important;box-shadow:none!important}.ci-domain-checkbox{display:flex!important;align-items:center;gap:8px;min-height:43px}.ci-domain-checkbox input{width:18px;height:18px;min-height:0}.ci-domain-route-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
/* CI_PUBLIC_QR_INLINE_THEME_V4
   One canonical QR instance, no modal, no reserved rail and no runtime flow
   fallback. On desktop/tablet the QR is always out of document flow; JS only
   changes fixed coordinates. This keeps page/card scrollHeight stable while
   wide/compact layout or bottom-clamp geometry changes. */
.ci-public-qr {
    --ci-public-qr-size: 124px;
    z-index: 45;
    position: fixed;
    top: var(--ci-public-qr-fixed-top, 20px);
    right: calc(var(--ci-public-qr-fixed-right, 30px) + env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
    display: grid;
    width: var(--ci-public-qr-size);
    margin: 0;
    gap: 7px;
    justify-items: center;
    color: var(--bio-theme-text, var(--text, #18211d));
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: auto;
    overflow-anchor: none;
}

.ci-public-qr.is-positioned {
    visibility: visible;
    pointer-events: auto;
}

.ci-public-qr.is-unplaced {
    visibility: hidden;
    pointer-events: none;
}

.ci-public-qr[hidden] {
    display: none !important;
}

.ci-public-qr.is-fixed {
    position: fixed;
}

.ci-public-qr-head {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 18px;
    place-items: center;
}

.ci-public-qr-label {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0 18px;
    color: inherit;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

.ci-public-qr-close {
    position: absolute;
    top: -3px;
    right: -3px;
    display: inline-grid;
    width: 18px;
    height: 18px;
    padding: 0;
    place-items: center;
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 560;
    line-height: 1;
    opacity: 0.68;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    transition: opacity 140ms ease, background-color 140ms ease;
}

.ci-public-qr-close:hover,
.ci-public-qr-close:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 9%, transparent);
}

.ci-public-qr-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ci-public-qr-code {
    display: block;
    width: var(--ci-public-qr-size);
    height: var(--ci-public-qr-size);
    overflow: visible;
    color: inherit;
    background: transparent;
}

.ci-public-qr-code svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: inherit;
    background: transparent;
}

/* CI_PUBLIC_QR_COMPACT_SIZE_V2
   Compact uses the same canonical QR instance and bottom-right placement as
   wide, but scaled to fit the real 720px compact stage beside the 560px Join
   inner content. No rail, spacer or document-flow fallback is introduced. */
.public-shell-bio[data-bio-page-width="compact"] .ci-public-qr {
    --ci-public-qr-size: 64px;
    gap: 4px;
}

.public-shell-bio[data-bio-page-width="compact"] .ci-public-qr-label {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 5px;
    font-size: 9px;
    line-height: 1.08;
}

.public-shell-bio[data-bio-page-width="compact"] .ci-public-qr-close {
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    font-size: 12px;
}

@media (max-width: 720px) {
    .ci-public-qr {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ci-public-qr-close {
        transition: none;
    }
}

@media(max-width:720px){.ci-domain-add{grid-template-columns:1fr}.ci-domain-card>header{align-items:flex-start}.ci-domain-route{grid-template-columns:minmax(0,1fr) auto}.ci-domain-route-primary{grid-column:1}.ci-domain-route .btn,.ci-domain-route>.ci-domain-icon-button{grid-row:1/3}.ci-domain-route-form{grid-template-columns:1fr}.ci-domain-route-actions{grid-column:auto}.ci-domain-card-actions .btn{padding-inline:10px}}

/* CI_DOMAIN_ROUTE_LAYOUT_ALIGNMENT_V2
   Refines the existing inline route editor without changing its structure.
   Path and Page controls share one baseline; the immutable domain prefix
   remains visually integrated with the editable route path.
*/
.ci-domain-route-main {
    min-width: 0;
}

.ci-domain-route-address {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-domain-routes > .ci-domain-route-form {
    margin-top: 0;
}

.ci-domain-route-form {
    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(180px, 1fr)
        auto;
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line, #dde4e0);
    border-radius: 14px;
    background: var(--surface-soft, #f4f7f5);
}

.ci-domain-route-form > label {
    min-width: 0;
    align-self: start;
}

.ci-domain-route-form > label:not(.ci-domain-checkbox) > span {
    display: flex;
    align-items: center;
    min-height: 15px;
    line-height: 1.25;
}

.ci-domain-route-path-field {
    display: grid;
    gap: 6px;
}

.ci-domain-path-input {
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 43px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--line, #dde4e0);
    border-radius: 11px;
    background: var(--surface-solid, #fff);
}

.ci-domain-path-input:focus-within {
    border-color: var(--primary, #174f3f);
    outline: 3px solid color-mix(in srgb,var(--primary,#174f3f) 18%,transparent);
}

.ci-domain-path-prefix {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    max-width: 62%;
    padding: 0 0 0 11px;
    overflow: hidden;
    color: var(--text, #18211d);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: text;
}

.ci-domain-path-input input {
    flex: 1 1 100px;
    align-self: stretch;
    width: auto;
    height: auto;
    min-width: 72px;
    min-height: 0 !important;
    padding: 0 12px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ci-domain-path-input input:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.ci-domain-route-help {
    display: block;
    margin: 0;
    color: var(--muted, #68736d);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.ci-domain-route-form .ci-domain-checkbox {
    align-self: start;
    margin-top: 21px;
}

.ci-domain-route-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ci-domain-add-route {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 0;
    padding: 8px 12px;
    border: 1px dashed var(--line, #dde4e0);
    border-radius: 12px;
}

@media (max-width: 720px) {
    .ci-domain-route-address {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ci-domain-route-form {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .ci-domain-route-form > label {
        align-self: stretch;
    }

    .ci-domain-route-form .ci-domain-checkbox {
        align-self: stretch;
        margin-top: 0;
    }

    .ci-domain-path-prefix {
        max-width: 56%;
    }

    .ci-domain-route-actions {
        grid-column: auto;
        justify-content: stretch;
    }

    .ci-domain-route-actions .btn {
        flex: 1 1 0;
    }
}


/* CI_PUBLIC_BIO_QR_JOIN_ROW_V4
   Public Bio only. Wide geometry remains exactly as validated in v3. Compact
   now anchors the existing QR absolutely inside a host whose width matches the
   link rail: the QR sits just inside the links' right edge, slightly higher and
   slightly larger, without reserving any document-flow height. Link widths,
   Join geometry, renderer markup and social scrolling are untouched. */
@media (min-width: 721px) {
    .public-shell-bio:not([data-bio-page-width="compact"]) .bio-public-join-cta.ci-public-qr-host {
        --ci-bio-join-qr-size: 124px;
        width: min(var(--bio-link-max-width), calc(100% - (var(--bio-link-side-inset) * 2))) !important;
        max-width: var(--bio-link-max-width) !important;
        grid-template-columns: minmax(0, 1fr) var(--ci-bio-join-qr-size) !important;
        column-gap: clamp(14px, 1.8vw, 22px) !important;
        row-gap: 0 !important;
        min-height: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important;
        justify-items: stretch !important;
    }

    .public-shell-bio:not([data-bio-page-width="compact"]) .bio-public-join-cta.ci-public-qr-host > .bio-public-join-cta-inner {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 560px !important;
        justify-self: center !important;
        align-self: center !important;
    }

    .public-shell-bio:not([data-bio-page-width="compact"]) .bio-public-join-cta.ci-public-qr-host > .ci-public-qr.is-bio-join-qr {
        --ci-public-qr-size: clamp(82px, 9vw, 100px);
        position: absolute !important;
        top: calc(0px - clamp(38px, 4vw, 52px)) !important;
        right: clamp(42px, 5.2vw, 72px) !important;
        bottom: auto !important;
        left: auto !important;
        inset: calc(0px - clamp(38px, 4vw, 52px)) clamp(42px, 5.2vw, 72px) auto auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: auto !important;
        align-self: auto !important;
        width: var(--ci-public-qr-size) !important;
        margin: 0 !important;
        gap: 4px !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .public-shell-bio:not([data-bio-page-width="compact"]) .bio-public-join-cta.ci-public-qr-host > .ci-public-qr.is-bio-join-qr .ci-public-qr-head {
        min-height: 16px !important;
    }

    .public-shell-bio:not([data-bio-page-width="compact"]) .bio-public-join-cta.ci-public-qr-host > .ci-public-qr.is-bio-join-qr .ci-public-qr-label {
        padding-inline: 12px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .public-shell-bio:not([data-bio-page-width="compact"]) .bio-public-join-cta.ci-public-qr-host > .ci-public-qr.is-bio-join-qr .ci-public-qr-close {
        top: -3px !important;
        right: -3px !important;
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
    }

    .public-shell-bio[data-bio-page-width="compact"] .bio-public-join-cta.ci-public-qr-host {
        --ci-bio-join-qr-size: clamp(70px, 7vw, 76px);
        width: min(var(--bio-link-max-width), calc(100% - (var(--bio-link-side-inset) * 2))) !important;
        max-width: var(--bio-link-max-width) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        min-height: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important;
        justify-items: stretch !important;
    }

    .public-shell-bio[data-bio-page-width="compact"] .bio-public-join-cta.ci-public-qr-host > .bio-public-join-cta-inner {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 560px !important;
        justify-self: center !important;
        align-self: center !important;
    }

    .public-shell-bio[data-bio-page-width="compact"] .bio-public-join-cta.ci-public-qr-host > .ci-public-qr.is-bio-join-qr {
        --ci-public-qr-size: var(--ci-bio-join-qr-size);
        position: absolute !important;
        top: calc(0px - clamp(26px, 3.6vw, 48px)) !important;
        right: clamp(6px, 0.8vw, 10px) !important;
        bottom: auto !important;
        left: auto !important;
        inset: calc(0px - clamp(26px, 3.6vw, 48px)) clamp(6px, 0.8vw, 10px) auto auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: auto !important;
        align-self: auto !important;
        width: var(--ci-public-qr-size) !important;
        margin: 0 !important;
        gap: 4px !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .public-shell-bio .bio-public-card > .ci-public-qr.is-bio-bottom-qr {
        position: static !important;
        inset: auto !important;
        order: 100 !important;
        justify-self: end !important;
        align-self: start !important;
        width: var(--ci-public-qr-size) !important;
        margin:
            clamp(22px, 3vw, 34px)
            var(--bio-link-side-inset, clamp(20px, 4vw, 42px))
            clamp(18px, 3vw, 34px)
            0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .public-shell-bio[data-bio-page-width="compact"] .bio-public-card > .ci-public-qr.is-bio-bottom-qr {
        margin-right: clamp(10px, 1.5vw, 16px) !important;
    }
}
/* END CI_PUBLIC_BIO_QR_JOIN_ROW_V4 */