/* ==========================================================================
   Osiris, the mystical card — round 12 (2.4.0): sand.
   Driven by js/jocor_osiris.js. Night, lapis and gold: the colours of the
   pectorals from Tutankhamun's tomb. The card itself carries no border and
   no panel fill of its own any more — "no borders, just the image of
   Osiris you can see" — everything else here paints in place of one.

     phases (data-phase on .jocor-os):
       pre       dark, waiting for the card to be seen — the portrait alone,
                 which is also the no-JS / pre-hydration state
       portrait  the portrait holds
       dissolve  the portrait turns to sand, in place
       tomap     the sand flies into the world map
       map       the world map, before the camera moves
       zoom      the map zooms into the address the world sees
       reveal    the address, the place, "This is what the world sees."
       eye       the address slides down to its resting line; a fresh
                 drift of sand gathers into the Eye of Horus
       final     the eye holds (idle grain), the three ways in, the
                 address line — persistent

   Only .jocor-win--osiris's shared GRID PLACEMENT (aspect-ratio, column
   sizing across breakpoints) stays in jocor_hero.css, alongside the other
   cards' own layout rules — everything about how this card LOOKS lives
   here.
   ========================================================================== */
.jocor-win--osiris {
	--os-night: #04061a;
	--os-deep: #081338;
	--os-lapis: #1c3a8c;
	--os-lapis-2: #3561c4;
	--os-gold: #d8b04a;
	--os-gold-2: #f4d68a;
	--os-ivory: #efe6cc;
	--os-muted: #aeb8da;
	/* No border, no top sheen: the card is the picture. `.jocor-win`'s base
	   1px border and ::after sheen (css/jocor_hero.css) are switched off
	   here rather than removed there, since every other card keeps them. */
	border: 0;
	border-radius: 20px;
	color: var(--os-ivory);
	background: var(--os-night);
	box-shadow: 0 18px 44px rgb(0 0 0 / 50%);
	contain: layout paint;
	transition: box-shadow var(--jocor-slow, 520ms) var(--jocor-ease, ease);
}
.jocor-win--osiris::after {
	display: none;
}
.jocor-win--osiris:hover,
.jocor-win--osiris:has(:focus-visible) {
	box-shadow: 0 26px 60px rgb(0 0 0 / 58%), 0 0 0 1px rgba(216, 176, 74, 0.22);
}
/* Keyboard focus still needs a visible ring even with no resting border. */
.jocor-win--osiris:has(:focus-visible) {
	outline: 2px solid var(--os-gold-2);
	outline-offset: 2px;
}
.jocor-os {
	position: absolute;
	inset: 0;
	container-type: size;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 22px 16px 14px;
	font-family: Inter, 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
	isolation: isolate;
}
/* A field of stars behind everything: unchanged from 2.2.0. */
.jocor-os::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	background:
		radial-gradient(1px 1px at 12px 18px, rgba(244, 214, 138, 0.7), transparent 60%) 0 0 / 97px 89px,
		radial-gradient(1px 1px at 61px 47px, rgba(239, 230, 204, 0.55), transparent 60%) 0 0 / 97px 89px,
		radial-gradient(1.2px 1.2px at 30px 110px, rgba(170, 196, 255, 0.5), transparent 60%) 0 0 / 151px 163px,
		radial-gradient(1px 1px at 120px 20px, rgba(244, 214, 138, 0.45), transparent 60%) 0 0 / 151px 163px;
	opacity: 0.8;
}
/* The frieze: sba stars and dots, top and bottom, in gold. Dimmed while the
   portrait is up front so it does not compete with the painting's own
   border-less edge. */
.jocor-os::after {
	content: "";
	position: absolute;
	inset: 7px 18px;
	z-index: 3;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%23d8b04a' d='M9 .8l1 3h3.1l-2.5 1.9 1 3L9 6.9 6.4 8.7l1-3L4.9 3.8H8z'/%3E%3Ccircle cx='27' cy='5' r='1.1' fill='%23d8b04a'/%3E%3Ccircle cx='20.5' cy='5' r='.6' fill='%23d8b04a'/%3E%3Ccircle cx='33.5' cy='5' r='.6' fill='%23d8b04a'/%3E%3C/svg%3E") top center / 36px 10px repeat-x,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%23d8b04a' d='M9 .8l1 3h3.1l-2.5 1.9 1 3L9 6.9 6.4 8.7l1-3L4.9 3.8H8z'/%3E%3Ccircle cx='27' cy='5' r='1.1' fill='%23d8b04a'/%3E%3Ccircle cx='20.5' cy='5' r='.6' fill='%23d8b04a'/%3E%3Ccircle cx='33.5' cy='5' r='.6' fill='%23d8b04a'/%3E%3C/svg%3E") bottom center / 36px 10px repeat-x;
	opacity: 0;
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.jocor-os[data-phase="map"]::after,
.jocor-os[data-phase="zoom"]::after,
.jocor-os[data-phase="reveal"]::after,
.jocor-os[data-phase="eye"]::after,
.jocor-os[data-phase="final"]::after {
	opacity: 0.4;
}

/* ---- The portrait: the real HTML fallback, and phase one of the sand --- */
.jocor-os__portrait {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	opacity: 1;
	/* A little further feathering beyond the asset's own baked-in fade, so
	   it never shows a seam against the card's own corner radius at any
	   size. */
	-webkit-mask-image: radial-gradient(120% 105% at 50% 38%, #000 62%, transparent 100%);
	mask-image: radial-gradient(120% 105% at 50% 38%, #000 62%, transparent 100%);
}
.jocor-os[data-phase="dissolve"] .jocor-os__portrait,
.jocor-os[data-phase="tomap"] .jocor-os__portrait,
.jocor-os[data-phase="map"] .jocor-os__portrait,
.jocor-os[data-phase="zoom"] .jocor-os__portrait,
.jocor-os[data-phase="reveal"] .jocor-os__portrait,
.jocor-os[data-phase="eye"] .jocor-os__portrait,
.jocor-os[data-phase="final"] .jocor-os__portrait {
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.jocor-os__portrait {
		transition: opacity 900ms ease;
	}
}

/* ---- The sand canvas: the whole intro after the portrait ---------------
   Always painting once mounted (the shader's own u_alpha carries the fade,
   frame-accurate against the same clock as the map and the morph — a CSS
   opacity transition here would fight it), and only present at all when
   WebGL2 is live and motion is allowed; see .jocor-os--sand below. */
.jocor-os__sand {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* ---- The map: unchanged from 2.2.0 -------------------------------------- */
.jocor-os__map {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	pointer-events: none;
}
.jocor-os[data-phase="map"] .jocor-os__map,
.jocor-os[data-phase="zoom"] .jocor-os__map,
.jocor-os[data-phase="reveal"] .jocor-os__map {
	opacity: 1;
}
.jocor-os[data-phase="eye"] .jocor-os__map,
.jocor-os[data-phase="final"] .jocor-os__map {
	opacity: 0.22;
}
@media (prefers-reduced-motion: no-preference) {
	.jocor-os__map {
		transition: opacity 900ms ease;
	}
}

/* The astrolabe ring behind the eye, kept as a quiet backdrop to the sand
   Eye of Horus (or, without WebGL2, to the drawn one). */
.jocor-os__eye::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 142%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0.42;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23d8b04a'%3E%3Ccircle cx='100' cy='100' r='97' stroke-width='.6'/%3E%3Ccircle cx='100' cy='100' r='90' stroke-width='.4' stroke-dasharray='.6 4.1'/%3E%3Ccircle cx='100' cy='100' r='84' stroke-width='.35'/%3E%3Cg stroke-width='.6'%3E%3Cpath d='M100 3v8M100 189v8M3 100h8M189 100h8'/%3E%3Cpath d='M31.4 31.4l5.7 5.7M162.9 162.9l5.7 5.7M168.6 31.4l-5.7 5.7M37.1 162.9l-5.7 5.7'/%3E%3C/g%3E%3Ccircle cx='100' cy='16' r='1.6' fill='%23d8b04a' stroke='none'/%3E%3Ccircle cx='184' cy='100' r='1.2' fill='%23d8b04a' stroke='none'/%3E%3Ccircle cx='100' cy='184' r='1.6' fill='%23d8b04a' stroke='none'/%3E%3Ccircle cx='16' cy='100' r='1.2' fill='%23d8b04a' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
	.jocor-os[data-phase="final"] .jocor-os__eye::before {
		animation: jocor-os-turn 160s linear infinite;
	}
}
@keyframes jocor-os-turn {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- The address: centred over the pin, then home to the bottom line --- */
.jocor-os__fix {
	position: absolute;
	left: 50%;
	/* Fixed at its reveal-time position; the move to the bottom line is
	   done entirely through `transform` below, in cqh, because `top`
	   cannot be transitioned to/from `auto` -- browsers treat that as two
	   incomparable values and snap rather than animate. A transform is
	   always numeric, so it is the only property here that CAN slide. */
	top: calc(50% + 34px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: min(92%, 440px);
	transform: translate(-50%, 0) scale(1);
	text-align: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}
.jocor-os[data-phase="reveal"] .jocor-os__fix {
	opacity: 1;
	visibility: visible;
}
/* It slides down to where the persistent line sits and fades there, handing
   off to .jocor-os__seen (below) rather than trying to become it — a
   crossfade the eye is assembling behind reads as continuous motion without
   needing to morph a three-line block into a one-line sentence. 38cqh is an
   approximation of the distance from the reveal position (just under the
   pin, vertically centred) down to the bottom bar's row -- exact alignment
   does not matter since .jocor-os__fix is fully faded out by the time
   .jocor-os__seen (the real persistent line) has faded in over it. */
.jocor-os[data-phase="eye"] .jocor-os__fix,
.jocor-os[data-phase="final"] .jocor-os__fix {
	transform: translate(-50%, 38cqh) scale(0.72);
	visibility: visible;
}
.jocor-os[data-phase="eye"] .jocor-os__fix {
	opacity: 0.85;
}
.jocor-os[data-phase="final"] .jocor-os__fix {
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.jocor-os__fix {
		transition: transform 850ms cubic-bezier(0.5, 0, 0.2, 1), opacity 650ms ease;
	}
	.jocor-os[data-phase="final"] .jocor-os__fix {
		transition-delay: 250ms;
	}
}
.jocor-os__fix-ip {
	font-size: clamp(20px, 7cqw, 28px);
	font-weight: 650;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: #fff8e6;
	text-shadow: 0 0 18px rgba(244, 214, 138, 0.5), 0 2px 8px rgba(4, 6, 26, 0.9);
}
.jocor-os__fix-place {
	font-size: 13px;
	color: var(--os-muted);
	text-shadow: 0 1px 6px rgba(4, 6, 26, 0.95);
}
.jocor-os__fix-line {
	margin-top: 4px;
	font-family: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
	font-style: italic;
	font-size: clamp(18px, 6cqw, 23px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--os-gold-2);
	text-shadow: 0 1px 10px rgba(4, 6, 26, 0.95);
	text-wrap: balance;
}

/* ---- The crest: "Osiris", and the drawn eye when there is no sand ------ */
.jocor-os__crest {
	grid-row: 1;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 0;
	opacity: 0;
	visibility: hidden;
}
.jocor-os[data-phase="eye"] .jocor-os__crest,
.jocor-os[data-phase="final"] .jocor-os__crest {
	opacity: 1;
	visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
	.jocor-os__crest {
		transition: opacity 700ms ease;
	}
	.jocor-os[data-phase="eye"] .jocor-os__word {
		animation: jocor-os-rise 800ms ease 200ms both;
	}
	.jocor-os[data-phase="eye"] .jocor-os__sub {
		animation: jocor-os-rise 800ms ease 480ms both;
	}
}
@keyframes jocor-os-rise {
	from { opacity: 0; transform: translateY(8px); }
}
.jocor-os__eye {
	position: relative;
	width: clamp(96px, calc((100cqh - 296px) * 1.5), min(62cqw, 270px));
	aspect-ratio: 240 / 160;
	flex: 0 0 auto;
	isolation: isolate;
}
/* With the sand engine live the Eye of Horus is the particle canvas behind
   this slot, not the drawn one — drop the drawing so the two are never both
   on screen at once. */
.jocor-os.jocor-os--sand .jocor-os__eye-svg {
	display: none;
}
.jocor-os__eye-svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 0 14px rgba(244, 200, 90, 0.28)) drop-shadow(0 6px 10px rgba(4, 6, 26, 0.8));
}
.jocor-win--osiris .jocor-os__word {
	margin: 0 -0.3em 0 0 !important;
	padding: 0 !important;
	display: block !important;
	width: auto !important;
	font-family: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
	font-size: clamp(26px, 10.5cqh, 46px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: center;
	color: var(--os-gold-2);
	background: linear-gradient(180deg, #fff3c9 0%, #f4d68a 40%, #c9962f 78%, #f0cf78 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 16px rgba(244, 200, 90, 0.25));
}
.jocor-os__sub {
	margin: 4px 0 0;
	font-size: clamp(12px, 3.6cqh, 14px);
	letter-spacing: 0.06em;
	color: var(--os-muted);
	text-align: center;
}

/* The three ways in. */
.jocor-os__acts {
	grid-row: 2;
	min-width: 0;
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
}
.jocor-os[data-phase="final"] .jocor-os__acts,
.jocor-os[data-phase="final"] .jocor-os__seen {
	opacity: 1;
	visibility: visible;
}
.jocor-os[data-phase="eye"] .jocor-os__seen {
	opacity: 1;
	visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
	.jocor-os__acts,
	.jocor-os__seen {
		transition: opacity 600ms ease 350ms;
	}
}
.jocor-os__act {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	padding: 0 14px 0 12px;
	box-sizing: border-box;
	border: 1px solid rgba(216, 176, 74, 0.26);
	border-radius: 10px;
	background: rgba(8, 19, 56, 0.62);
	color: var(--os-ivory);
	font-size: 14.5px;
	font-weight: 560;
	line-height: 1.2;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.jocor-os__act--lead {
	border-color: rgba(244, 214, 138, 0.62);
	background: linear-gradient(180deg, #26499f 0%, #16307a 60%, #102461 100%);
	box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.22), 0 8px 20px rgba(4, 6, 26, 0.45);
	color: #fff8e6;
}
.jocor-os__glyph {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--os-gold-2);
}
.jocor-os__act-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jocor-os__act:hover {
	border-color: rgba(244, 214, 138, 0.75);
	background-color: rgba(28, 58, 140, 0.55);
}
.jocor-os__act--lead:hover {
	background: linear-gradient(180deg, #2d55b5 0%, #1a3888 60%, #132a6e 100%);
}
.jocor-os__act:focus-visible,
.jocor-os__again:focus-visible,
.jocor-os__skip:focus-visible,
.jocor-os__close:focus-visible,
.jocor-os__go:focus-visible,
.jocor-os__tool:focus-visible {
	outline: 2px solid var(--os-gold-2);
	outline-offset: 2px;
}

/* The address line, persistent, under the ways in. */
.jocor-os__seen {
	grid-row: 3;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 32px;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--os-muted);
	opacity: 0;
	visibility: hidden;
}
.jocor-os__seen:empty {
	display: none;
}
.jocor-os__seen-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jocor-os__seen strong {
	color: var(--os-ivory);
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}
/* Replay affordance: the one visible control on the resting card besides
   the three ways in. */
.jocor-win--osiris .jocor-os__again {
	flex: 0 0 auto;
	min-height: 32px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid rgba(216, 176, 74, 0.34);
	border-radius: 999px;
	background: transparent;
	color: var(--os-gold-2);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.jocor-win--osiris .jocor-os__again:hover {
	border-color: var(--os-gold-2);
	background: rgba(216, 176, 74, 0.1);
}

.jocor-win--osiris .jocor-os__skip {
	position: absolute;
	right: 14px;
	bottom: 16px;
	z-index: 6;
	min-height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(216, 176, 74, 0.4);
	border-radius: 999px;
	background: rgba(4, 6, 26, 0.7);
	color: var(--os-ivory);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.jocor-win--osiris .jocor-os__skip:hover {
	border-color: var(--os-gold-2);
}
.jocor-os[data-phase="final"] .jocor-os__skip {
	display: none;
}

/* Short cards (a phone on its side, the desktop row on a low screen): the
   ways in tighten, the address line goes. */
@container (max-height: 360px) {
	.jocor-os { gap: 7px; padding-block: 18px 10px; }
	.jocor-os__act { min-height: 38px; font-size: 13.5px; }
	.jocor-os__seen { min-height: 28px; }
	.jocor-os[data-phase="eye"] .jocor-os__fix,
	.jocor-os[data-phase="final"] .jocor-os__fix { transform: translate(-50%, 34cqh) scale(0.7); }
}
@container (max-height: 320px) {
	.jocor-os__seen { display: none; }
}

/* ---- The leak check: a sheet over the card — unchanged from 2.2.0 ------ */
.jocor-os__sheet {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(28, 58, 140, 0.55), transparent 65%),
		var(--os-night);
	color: var(--os-ivory);
}
.jocor-os__sheet[hidden] {
	display: none;
}
.jocor-os__sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.jocor-win--osiris .jocor-os__sheet-h {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	font-family: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--os-gold-2);
}
.jocor-win--osiris .jocor-os__close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(216, 176, 74, 0.34);
	border-radius: 50%;
	background: transparent;
	color: var(--os-ivory);
	cursor: pointer;
}
.jocor-os__form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
.jocor-os__label {
	font-size: 13px;
	color: var(--os-muted);
}
.jocor-os__row {
	display: flex;
	gap: 8px;
}
.jocor-win--osiris .jocor-os__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid rgba(216, 176, 74, 0.42);
	border-radius: 10px;
	background: #050a24;
	color: var(--os-ivory);
	font-size: 15px;
}
.jocor-win--osiris .jocor-os__input::placeholder {
	color: #7f8ab0;
}
.jocor-win--osiris .jocor-os__input:focus,
.jocor-win--osiris .jocor-os__input:focus-visible {
	border-color: var(--os-gold-2);
	outline: 2px solid var(--os-gold-2);
	outline-offset: 1px;
	box-shadow: none;
}
.jocor-win--osiris .jocor-os__go {
	flex: 0 0 auto;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(180deg, #f6df94 0%, #d8b04a 50%, #a07a24 100%);
	box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.7), inset 0 -1px 0 rgba(60, 40, 6, 0.4);
	color: #1b1405;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.jocor-win--osiris .jocor-os__go:disabled {
	opacity: 0.7;
	cursor: progress;
}
.jocor-os__result {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.jocor-os__result:empty {
	display: none;
}
.jocor-os__result p,
.jocor-os__note {
	margin: 0;
}
.jocor-os__ok {
	font-size: 16px;
	font-weight: 650;
	color: #9fe7bd;
}
.jocor-os__bad {
	font-size: 16px;
	font-weight: 650;
	color: #ffb09c;
}
.jocor-os__busy,
.jocor-os__hint,
.jocor-os__note {
	font-size: 13px;
	line-height: 1.45;
	color: var(--os-muted);
}
.jocor-os__breaches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jocor-os__breach {
	padding: 3px 9px;
	border: 1px solid rgba(216, 176, 74, 0.3);
	border-radius: 999px;
	font-size: 12px;
	color: var(--os-ivory);
}
.jocor-os__breach--more {
	color: var(--os-gold-2);
}
.jocor-os__tools {
	padding-top: 10px;
	border-top: 1px solid rgba(216, 176, 74, 0.2);
}
.jocor-win--osiris .jocor-os__tools-h {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 14px;
	font-weight: 650;
	color: var(--os-ivory);
}
.jocor-os__tool-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jocor-os__tool-list li {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.jocor-win--osiris a.jocor-os__tool {
	align-self: flex-start;
	color: var(--os-gold-2);
	font-size: 14px;
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: rgba(244, 214, 138, 0.45);
	text-underline-offset: 3px;
}
.jocor-win--osiris a.jocor-os__tool:hover {
	text-decoration-color: var(--os-gold-2);
}
.jocor-os__tool-what {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--os-muted);
}
.jocor-os.has-sheet .jocor-os__skip {
	display: none;
}

/* prefers-reduced-motion: reduce — every transition above is scoped under
   its own "no-preference" query, so the default here is already the still
   version; nothing further to disable. */