.ooi-sat001-card {
	--ooi-sat001-primary: #7270ac;
	--ooi-sat001-primary-dark: #56548f;
	--ooi-sat001-accent: #80c5cf;
	--ooi-sat001-surface: #ffffff;
	--ooi-sat001-text: #25243a;
	--ooi-sat001-muted: #5f6070;
	--ooi-sat001-border: #deddea;
	box-sizing: border-box;
	display: grid;
	gap: 1.25rem;
	width: 100%;
	max-width: 38rem;
	margin-inline: auto;
	padding: 1.25rem;
	overflow-wrap: anywhere;
	color: var(--ooi-sat001-text);
	background: var(--ooi-sat001-surface);
	border: 1px solid var(--ooi-sat001-border);
	border-radius: 1rem;
	box-shadow: 0 0.5rem 1.5rem rgb(37 36 58 / 10%);
}

.ooi-sat001-card__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	text-align: center;
}

.ooi-sat001-card__image {
	flex: 0 0 auto;
	width: 5.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f3f3f8;
	border: 3px solid rgb(128 197 207 / 45%);
	border-radius: 50%;
}

.ooi-sat001-card__image-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ooi-sat001-card__details {
	min-width: 0;
}

.ooi-sat001-card__name {
	margin: 0;
	color: var(--ooi-sat001-text);
	font-size: clamp(1.35rem, 5vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
}

.ooi-sat001-card__activity,
.ooi-sat001-card__practice,
.ooi-sat001-card__city,
.ooi-sat001-card__phone,
.ooi-sat001-card__website {
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.ooi-sat001-card__activity {
	color: var(--ooi-sat001-primary-dark);
	font-weight: 650;
}

.ooi-sat001-card__practice,
.ooi-sat001-card__city,
.ooi-sat001-card__phone {
	color: var(--ooi-sat001-muted);
}

.ooi-sat001-card__website a {
	color: var(--ooi-sat001-primary-dark);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.ooi-sat001-card__website a:hover {
	color: var(--ooi-sat001-primary);
}

.ooi-sat001-card__website a:focus-visible {
	outline: 3px solid var(--ooi-sat001-accent);
	outline-offset: 3px;
	border-radius: 0.2rem;
}

.ooi-sat001-card__qr {
	display: grid;
	place-items: center;
	width: min(100%, 11rem);
	aspect-ratio: 1;
	margin-inline: auto;
	padding: 0.5rem;
	background: #ffffff;
	border: 1px solid var(--ooi-sat001-border);
	border-radius: 0.75rem;
}

.ooi-sat001-card__qr svg {
	display: block;
	width: 100%;
	max-width: 10rem;
	height: auto;
	aspect-ratio: 1;
}

.ooi-sat001-card__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.65rem;
	min-width: 0;
}

.ooi-sat001-card__action {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 0.6rem;
	color: #ffffff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--ooi-sat001-primary);
	border: 2px solid var(--ooi-sat001-primary);
	border-radius: 0.7rem;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.ooi-sat001-card__action svg {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
}

.ooi-sat001-card__action:hover {
	color: #ffffff;
	background: var(--ooi-sat001-primary-dark);
	border-color: var(--ooi-sat001-primary-dark);
}

.ooi-sat001-card__action:focus-visible {
	outline: 3px solid var(--ooi-sat001-accent);
	outline-offset: 3px;
}

.ooi-sat001-card__action:active {
	transform: translateY(1px);
}

.ooi-sat001-card__action--contact {
	color: var(--ooi-sat001-primary-dark);
	background: #ffffff;
}

.ooi-sat001-card__action--contact:hover {
	color: #ffffff;
}

@media (min-width: 40rem) {
	.ooi-sat001-card {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: 1.5rem;
	}

	.ooi-sat001-card__identity {
		flex-direction: row;
		text-align: left;
	}

	.ooi-sat001-card__qr {
		width: 10rem;
	}

	.ooi-sat001-card__actions {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ooi-sat001-card__action {
		transition: none;
	}
}

/*
 * SAT-001.1 — Hero action + compact Identity card panel.
 * Mobile-first: bottom-sheet on small screens, centered dialog on desktop.
 */

.ooi-sat001-hero-action {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        min-width: 0;
}

.ooi-sat001-hero-action__trigger {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.7rem 1rem;
        color: #56548f;
        font: inherit;
        font-size: 0.95rem;
        font-weight: 650;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        background: #ffffff;
        border: 2px solid #7270ac;
        border-radius: 0.75rem;
        transition:
                color 150ms ease,
                background-color 150ms ease,
                border-color 150ms ease,
                transform 150ms ease;
}

.ooi-sat001-hero-action__trigger:hover {
        color: #ffffff;
        background: #7270ac;
}

.ooi-sat001-hero-action__trigger:focus-visible {
        outline: 3px solid #80c5cf;
        outline-offset: 3px;
}

.ooi-sat001-hero-action__trigger:active {
        transform: translateY(1px);
}

.ooi-sat001-card-panel[hidden] {
        display: none;
}

.ooi-sat001-card-panel {
        box-sizing: border-box;
        position: fixed;
        /* Keep the card above the theme mobile dock (z-index: 10000). */
        z-index: 10001;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
}

.ooi-sat001-card-panel__backdrop {
        position: absolute;
        inset: 0;
        background: rgb(20 20 32 / 58%);
}

.ooi-sat001-card-panel__dialog {
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        padding:
                1.25rem
                max(1rem, env(safe-area-inset-right))
                calc(1.25rem + env(safe-area-inset-bottom))
                max(1rem, env(safe-area-inset-left));
        overflow-x: hidden;
        overflow-y: auto;
        color: #25243a;
        background: #ffffff;
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -0.5rem 2rem rgb(20 20 32 / 18%);
        overscroll-behavior: contain;
}

.ooi-sat001-card-panel__close {
        box-sizing: border-box;
        position: absolute;
        z-index: 2;
        top: 0.75rem;
        right: max(0.75rem, env(safe-area-inset-right));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        color: #56548f;
        font: inherit;
        font-size: 1.65rem;
        line-height: 1;
        cursor: pointer;
        background: #ffffff;
        border: 1px solid #deddea;
        border-radius: 50%;
}

.ooi-sat001-card-panel__close:hover {
        color: #ffffff;
        background: #7270ac;
        border-color: #7270ac;
}

.ooi-sat001-card-panel__close:focus-visible {
        outline: 3px solid #80c5cf;
        outline-offset: 3px;
}

.ooi-sat001-compact-card {
        box-sizing: border-box;
        display: grid;
        gap: 1rem;
        width: 100%;
        min-width: 0;
        padding-top: 2.75rem;
        overflow-wrap: anywhere;
        color: #25243a;
}

.ooi-sat001-compact-card__identity {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        min-width: 0;
}

.ooi-sat001-compact-card__image {
        flex: 0 0 auto;
        width: 4rem;
        aspect-ratio: 1;
        overflow: hidden;
        background: #f3f3f8;
        border: 3px solid rgb(128 197 207 / 45%);
        border-radius: 50%;
}

.ooi-sat001-compact-card__image-media {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.ooi-sat001-compact-card__identity-text {
        min-width: 0;
}

.ooi-sat001-compact-card__name {
        margin: 0;
        color: #25243a;
        font-size: clamp(1.15rem, 5vw, 1.3rem);
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: anywhere;
}

.ooi-sat001-compact-card__activity {
        margin: 0.3rem 0 0;
        color: #56548f;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.35;
        overflow-wrap: anywhere;
}

.ooi-sat001-compact-card__qr {
        box-sizing: border-box;
        display: grid;
        place-items: center;
        width: min(100%, 13rem);
        min-width: 184px;
        aspect-ratio: 1;
        margin-inline: auto;
        padding: 0.5rem;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #deddea;
        border-radius: 0.9rem;
}

.ooi-sat001-compact-card__qr svg {
        display: block;
        width: 100%;
        max-width: 12rem;
        height: auto;
        aspect-ratio: 1;
}

.ooi-sat001-compact-card__actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
        min-width: 0;
}

.ooi-sat001-compact-card__action {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0.65rem 0.45rem;
        color: #ffffff;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 650;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        overflow-wrap: anywhere;
        cursor: pointer;
        background: #7270ac;
        border: 2px solid #7270ac;
        border-radius: 0.7rem;
        transition:
                color 150ms ease,
                background-color 150ms ease,
                border-color 150ms ease,
                transform 150ms ease;
}

.ooi-sat001-compact-card__action:hover {
        color: #ffffff;
        background: #56548f;
        border-color: #56548f;
}

.ooi-sat001-compact-card__action:focus-visible {
        outline: 3px solid #80c5cf;
        outline-offset: 3px;
}

.ooi-sat001-compact-card__action:active {
        transform: translateY(1px);
}

.ooi-sat001-compact-card__action--contact {
        color: #56548f;
        background: #ffffff;
}

.ooi-sat001-compact-card__action--contact:hover {
        color: #ffffff;
        background: #56548f;
}

@media (min-width: 48rem) {
        .ooi-sat001-card-panel {
                align-items: center;
                padding: 2rem;
        }

        .ooi-sat001-card-panel__dialog {
                width: min(92vw, 28.75rem);
                max-height: min(90vh, 47.5rem);
                max-height: min(90dvh, 47.5rem);
                padding: 1.5rem;
                border-radius: 1.25rem;
                box-shadow: 0 1rem 3rem rgb(20 20 32 / 22%);
        }

        .ooi-sat001-card-panel__close {
                top: 0.85rem;
                right: 0.85rem;
        }

        .ooi-sat001-compact-card {
                padding-top: 2.5rem;
        }

        .ooi-sat001-compact-card__image {
                width: 4.5rem;
        }

        .ooi-sat001-compact-card__qr {
                width: 13rem;
        }
}

@media (prefers-reduced-motion: reduce) {
        .ooi-sat001-hero-action__trigger,
        .ooi-sat001-compact-card__action {
                transition: none;
        }
}

/*
 * SAT-001.1 D9 — Identity-first visual hierarchy.
 * Identity is primary; QR remains a secondary access tool.
 */

.ooi-sat001-compact-card {
        gap: 1.15rem;
}

.ooi-sat001-compact-card__identity {
        gap: 1rem;
        padding: 0.15rem 0 0.35rem;
}

.ooi-sat001-compact-card__image {
        width: 5rem;
        border-width: 4px;
        box-shadow: 0 0.35rem 1rem rgb(37 36 58 / 12%);
}

.ooi-sat001-compact-card__identity-text {
        display: grid;
        gap: 0.25rem;
}

.ooi-sat001-compact-card__name {
        font-size: clamp(1.35rem, 6vw, 1.6rem);
        font-weight: 750;
        line-height: 1.12;
}

.ooi-sat001-compact-card__activity {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
}

.ooi-sat001-compact-card__qr {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        width: 9.75rem;
        min-width: 0;
        aspect-ratio: auto;
        padding: 0.55rem;
        border-color: rgb(114 112 172 / 24%);
        border-radius: 0.85rem;
}

.ooi-sat001-compact-card__qr svg {
        width: 8.6rem;
        max-width: 100%;
        aspect-ratio: 1;
}

.ooi-sat001-compact-card__qr-label {
        display: block;
        max-width: 9rem;
        color: #5f6070;
        font-size: 0.72rem;
        font-weight: 500;
        line-height: 1.25;
        text-align: center;
}

@media (min-width: 48rem) {
        .ooi-sat001-compact-card__identity {
                gap: 1.15rem;
        }

        .ooi-sat001-compact-card__image {
                width: 5.5rem;
        }

        .ooi-sat001-compact-card__name {
                font-size: 1.55rem;
        }

        .ooi-sat001-compact-card__qr {
                width: 10rem;
        }

        .ooi-sat001-compact-card__qr svg {
                width: 8.75rem;
        }
}

/*
 * SAT-001.1 D9-CORR1 — final identity-first hierarchy.
 * Identity and actions precede the secondary QR access tool.
 */

.ooi-sat001-compact-card__image {
        width: 5.4rem;
}

.ooi-sat001-compact-card__actions {
        margin-top: 0.1rem;
}

.ooi-sat001-compact-card__qr {
        width: 8.5rem;
        gap: 0.35rem;
        margin-top: 0.15rem;
        padding: 0.45rem;
}

.ooi-sat001-compact-card__qr svg {
        width: 7.35rem;
}

.ooi-sat001-compact-card__qr-label {
        max-width: 7.6rem;
        font-size: 0.68rem;
        line-height: 1.2;
}

@media (min-width: 48rem) {
        .ooi-sat001-compact-card__image {
                width: 5.75rem;
        }

        .ooi-sat001-compact-card__qr {
                width: 8.75rem;
        }

        .ooi-sat001-compact-card__qr svg {
                width: 7.5rem;
        }
}

/*
 * SAT-001.1 CORR2 — Carte OOI trigger integrated in native Identity actions.
 */

.ooi-identity-card__actions .ooi-sat001-hero-action {
        display: contents;
}

.ooi-identity-card__actions .ooi-sat001-hero-action__trigger {
        min-height: 36px;
        padding: 8px 14px;
        border-width: 1px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.2;
}