/*
 * Designed plan badges and ribbons (thetajer-subscription-plans).
 *
 * Loaded on the vendor dashboard and on a plan's edit screen (the live
 * preview), so it must stand alone: no theme token, no Tailwind. Every value
 * a badge varies by arrives as a custom property generated from validated
 * data by tjsp_badge_vars() - see includes/badge-design.php. (A colour taken
 * from the site's palette arrives as var(--token, #hex): the theme's token
 * where it is loaded, the hex everywhere else.)
 *
 * Positions are logical and mirror with the page. Where a shape cannot be
 * logical (a rotation, a clip-path), it is flipped under :dir(rtl). The text
 * carries dir="auto" on its own span, so the badge element itself keeps the
 * page's direction.
 *
 * The host (the plan card) gets .tjsp-rb-host and the reserve properties from
 * tjsp_badge_host(); --tjsp-host-border / --tjsp-host-radius describe its
 * edge (defaults match the theme's .tj-card: 1px, 14px outer).
 */

.tjsp-rb-host {
	position: relative;
	padding-block-start: var(--tjsp-reserve-top, 0px);
	padding-block-end: var(--tjsp-reserve-bottom, 0px);
}

/* Header rows that run under a top corner occupant (corner ribbon, seal,
   bookmark) keep clear of it. tjsp_badge_host() works out, per row and per
   side, how far in the occupant reaches at that row's depth and publishes it
   as --tjsp-clear-{row}-{s|e}.

   PHYSICAL sides, resolved here from the CARD's direction. The rows carry
   dir="auto" (admin-written text), so an English plan name on an Urdu page is
   itself LTR - a logical padding on it lands on the wrong side of the card.
   !important because the theme zeroes the price block's padding with it. */
.tjsp-rb-host {
	--tjsp-cl-1l: var(--tjsp-clear-1-s, 0px);
	--tjsp-cl-1r: var(--tjsp-clear-1-e, 0px);
	--tjsp-cl-2l: var(--tjsp-clear-2-s, 0px);
	--tjsp-cl-2r: var(--tjsp-clear-2-e, 0px);
	--tjsp-cl-3l: var(--tjsp-clear-3-s, 0px);
	--tjsp-cl-3r: var(--tjsp-clear-3-e, 0px);
}
.tjsp-rb-host:dir(rtl) {
	--tjsp-cl-1l: var(--tjsp-clear-1-e, 0px);
	--tjsp-cl-1r: var(--tjsp-clear-1-s, 0px);
	--tjsp-cl-2l: var(--tjsp-clear-2-e, 0px);
	--tjsp-cl-2r: var(--tjsp-clear-2-s, 0px);
	--tjsp-cl-3l: var(--tjsp-clear-3-e, 0px);
	--tjsp-cl-3r: var(--tjsp-clear-3-s, 0px);
}
/* A word too long for what is left beside the occupants breaks rather than
   running under them. Only ever applies when a word cannot fit. */
.tjsp-rb-host :is(.tjsp-rb-clear-1, .tjsp-rb-clear-2, .tjsp-rb-clear-3) {
	overflow-wrap: anywhere;
}
.tjsp-rb-host .tjsp-rb-clear-1 {
	padding-left: var(--tjsp-cl-1l) !important;
	padding-right: var(--tjsp-cl-1r) !important;
}
.tjsp-rb-host .tjsp-rb-clear-2 {
	padding-left: var(--tjsp-cl-2l) !important;
	padding-right: var(--tjsp-cl-2r) !important;
}
.tjsp-rb-host .tjsp-rb-clear-3 {
	padding-left: var(--tjsp-cl-3l) !important;
	padding-right: var(--tjsp-cl-3r) !important;
}

/* ------------------------------------------------------------ The badge */

.tjsp-rb {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: var(--tjsp-rb-align, center);
	gap: var(--tjsp-rb-gap, 0.35em);
	margin: 0;
	font-family: inherit;
	font-size: var(--tjsp-rb-fs, 12px);
	font-style: normal;
	font-weight: var(--tjsp-rb-fw, 600);
	line-height: 1.25;
	letter-spacing: var(--tjsp-rb-ls, 0);
	text-transform: var(--tjsp-rb-tt, none);
	text-decoration: none;
	color: var(--tjsp-rb-fg, #fff);
	white-space: nowrap;
	vertical-align: middle;
}

/* The painted surface: the badge itself, or a ribbon's band. */
.tjsp-rb:not(.tjsp-rb--corner, .tjsp-rb--flag, .tjsp-rb--bookmark, .tjsp-rb--seal),
.tjsp-rb__band {
	box-sizing: border-box;
	block-size: var(--tjsp-rb-h);
	padding-block: var(--tjsp-rb-py, 3px);
	padding-inline: var(--tjsp-rb-px, 10px);
	background: var(--tjsp-rb-fill, var(--tjsp-rb-bg, #073e32));
	border: var(--tjsp-rb-border, 0 solid transparent);
	border-radius: var(--tjsp-rb-radius, 999px);
	box-shadow: var(--tjsp-rb-shadow, none);
}

.tjsp-rb:not(.tjsp-rb--corner, .tjsp-rb--flag, .tjsp-rb--bookmark, .tjsp-rb--seal) {
	inline-size: var(--tjsp-rb-w, auto);
	max-inline-size: min(var(--tjsp-rb-maxw, 100%), 100%);
}

.tjsp-rb__band {
	display: flex;
	align-items: center;
	justify-content: var(--tjsp-rb-align, center);
	gap: var(--tjsp-rb-gap, 0.35em);
	border-radius: 0;
}

.tjsp-rb__text {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The icon: an inline SVG from the theme's icon library, or a Media Library
   image. Sized by --tjsp-rb-is, else a little larger than the text. */
.tjsp-rb__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.tjsp-rb__icon > svg,
.tjsp-rb__icon > img {
	display: block;
	inline-size: var(--tjsp-rb-is, 1.1em);
	block-size: var(--tjsp-rb-is, 1.1em);
	max-inline-size: none;
	object-fit: contain;
}

/* Icon after / above / below the text. "After" is the reading order's after,
   so it follows the page's direction like every other logical position. */
.tjsp-rb--icon-after:not(.tjsp-rb--corner, .tjsp-rb--flag, .tjsp-rb--bookmark, .tjsp-rb--seal),
.tjsp-rb--icon-after > .tjsp-rb__band {
	flex-direction: row-reverse;
}
.tjsp-rb--icon-above:not(.tjsp-rb--bookmark, .tjsp-rb--seal),
.tjsp-rb--icon-above > .tjsp-rb__band {
	flex-direction: column;
	justify-content: center;
}
.tjsp-rb--icon-below:not(.tjsp-rb--bookmark, .tjsp-rb--seal),
.tjsp-rb--icon-below > .tjsp-rb__band {
	flex-direction: column-reverse;
	justify-content: center;
}

/* In the tag row the badge is in flow, so long text may wrap instead of
   being cut: the height grows and nothing is underneath it. */
.tjsp-rb--at-inline {
	block-size: auto !important;
	min-block-size: var(--tjsp-rb-h);
	white-space: normal;
}
.tjsp-rb--at-inline .tjsp-rb__text {
	overflow: visible;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------- Tag shapes */

.tjsp-rb--tag.tjsp-rb--shape-cut {
	border-radius: 0;
	clip-path: polygon(var(--tjsp-rb-cut) 0, calc(100% - var(--tjsp-rb-cut)) 0, 100% var(--tjsp-rb-cut), 100% calc(100% - var(--tjsp-rb-cut)), calc(100% - var(--tjsp-rb-cut)) 100%, var(--tjsp-rb-cut) 100%, 0 calc(100% - var(--tjsp-rb-cut)), 0 var(--tjsp-rb-cut));
}

/* The point is at the end of the text (the right in English, the left in Urdu). */
.tjsp-rb--tag.tjsp-rb--shape-arrow {
	border-radius: 0;
	padding-inline-end: calc(var(--tjsp-rb-px, 10px) + var(--tjsp-rb-tip));
	clip-path: polygon(0 0, calc(100% - var(--tjsp-rb-tip)) 0, 100% 50%, calc(100% - var(--tjsp-rb-tip)) 100%, 0 100%);
}
.tjsp-rb--tag.tjsp-rb--shape-arrow:dir(rtl) {
	clip-path: polygon(var(--tjsp-rb-tip) 0, 100% 0, 100% 100%, var(--tjsp-rb-tip) 100%, 0 50%);
}

/* ------------------------------------------------- Placed: pill and tag */

.tjsp-rb:is(.tjsp-rb--pill, .tjsp-rb--tag):not(.tjsp-rb--at-inline) {
	position: absolute;
	z-index: 2;
	max-inline-size: min(var(--tjsp-rb-maxw, 100%), calc(100% - 24px - var(--tjsp-rb-oppo, 0px)));
}

.tjsp-rb:is(.tjsp-rb--pill, .tjsp-rb--tag):is(.tjsp-rb--at-top-start, .tjsp-rb--at-top-center, .tjsp-rb--at-top-end) { inset-block-start: 12px; }
.tjsp-rb:is(.tjsp-rb--pill, .tjsp-rb--tag):is(.tjsp-rb--at-bottom-start, .tjsp-rb--at-bottom-center, .tjsp-rb--at-bottom-end) { inset-block-end: 12px; }

.tjsp-rb:is(.tjsp-rb--pill, .tjsp-rb--tag):is(.tjsp-rb--at-top-start, .tjsp-rb--at-bottom-start) { inset-inline-start: 12px; }
.tjsp-rb:is(.tjsp-rb--pill, .tjsp-rb--tag):is(.tjsp-rb--at-top-end, .tjsp-rb--at-bottom-end) { inset-inline-end: 12px; }

/* Centred by two insets and auto margins, which works in either direction
   (a translate would not). */
.tjsp-rb:is(.tjsp-rb--at-top-center, .tjsp-rb--at-bottom-center) {
	inset-inline: 12px;
	margin-inline: auto;
	inline-size: var(--tjsp-rb-w, fit-content);
}

/* ---------------------------------------------------------- Banner */

.tjsp-rb--banner {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inline-size: auto !important;
	max-inline-size: none !important;
}
.tjsp-rb--banner.tjsp-rb--at-top {
	inset-block-start: 0;
	border-radius: var(--tjsp-host-radius, 13px) var(--tjsp-host-radius, 13px) 0 0;
}
.tjsp-rb--banner.tjsp-rb--at-bottom {
	inset-block-end: 0;
	border-radius: 0 0 var(--tjsp-host-radius, 13px) var(--tjsp-host-radius, 13px);
}

/* ---------------------------------------------------------- Corner ribbon
 *
 * A square frame of side  S = leg + 2 x fold, set `fold` outside the card's
 * corner. Its diagonal is the band's OUTER edge, so the outer edge meets each
 * card edge exactly `leg` from the corner. The band is centred on the frame,
 * rotated 45deg and slid half its own thickness towards the corner
 * (--tjsp-rb-slide: -1 up at a top corner, +1 down at a bottom one); the
 * frame's overflow cuts it at the frame edges - `fold` beyond the card - and
 * the two fold squares in the frame's free corners show as dark triangles
 * where the band wraps over the card's edge.
 */
.tjsp-rb--corner {
	--tjsp-rb-f: var(--tjsp-rb-fold, 0px);
	--tjsp-rb-s: calc(var(--tjsp-rb-leg, 110px) + 2 * var(--tjsp-rb-f));
	--tjsp-rb-out: calc(-1 * (var(--tjsp-rb-f) + var(--tjsp-host-border, 1px)));
	position: absolute;
	z-index: 2;
	display: block;
	inline-size: var(--tjsp-rb-s);
	block-size: var(--tjsp-rb-s);
	overflow: hidden;
	pointer-events: none;
}
.tjsp-rb--corner:is(.tjsp-rb--at-top-end, .tjsp-rb--at-top-start)       { inset-block-start: var(--tjsp-rb-out); --tjsp-rb-slide: -1; }
.tjsp-rb--corner:is(.tjsp-rb--at-bottom-end, .tjsp-rb--at-bottom-start) { inset-block-end: var(--tjsp-rb-out);   --tjsp-rb-slide: 1; }
.tjsp-rb--corner:is(.tjsp-rb--at-top-end, .tjsp-rb--at-bottom-end)       { inset-inline-end: var(--tjsp-rb-out); }
.tjsp-rb--corner:is(.tjsp-rb--at-top-start, .tjsp-rb--at-bottom-start)   { inset-inline-start: var(--tjsp-rb-out); }

/* "\" for top-end and bottom-start, "/" for the other two; mirrored in RTL. */
.tjsp-rb--corner:is(.tjsp-rb--at-top-end, .tjsp-rb--at-bottom-start)   { --tjsp-rb-rot: 45deg; }
.tjsp-rb--corner:is(.tjsp-rb--at-top-start, .tjsp-rb--at-bottom-end)   { --tjsp-rb-rot: -45deg; }
.tjsp-rb--corner:is(.tjsp-rb--at-top-end, .tjsp-rb--at-bottom-start):dir(rtl) { --tjsp-rb-rot: -45deg; }
.tjsp-rb--corner:is(.tjsp-rb--at-top-start, .tjsp-rb--at-bottom-end):dir(rtl) { --tjsp-rb-rot: 45deg; }

.tjsp-rb--corner .tjsp-rb__band {
	position: absolute;
	z-index: 1;
	inset-block-start: 50%;
	/* Physical on purpose: the frame's centre, in either direction. */
	left: 50%;
	inline-size: calc(var(--tjsp-rb-s) * 1.4143);
	justify-content: center;
	transform: translate(-50%, -50%) rotate(var(--tjsp-rb-rot)) translateY(calc(var(--tjsp-rb-h) / 2 * var(--tjsp-rb-slide, -1)));
	border-inline: 0;
}
.tjsp-rb--corner .tjsp-rb__text {
	max-inline-size: var(--tjsp-rb-chord, 100px);
}

.tjsp-rb--corner::before,
.tjsp-rb--corner::after,
.tjsp-rb--flag::before,
.tjsp-rb--bookmark::before {
	content: "";
	position: absolute;
	inline-size: var(--tjsp-rb-f);
	block-size: var(--tjsp-rb-f);
	background: color-mix(in srgb, var(--tjsp-rb-bg, #073e32) 55%, #000);
}
.tjsp-rb--corner.tjsp-rb--at-top-end::before      { inset-block-start: 0; inset-inline-start: 0; }
.tjsp-rb--corner.tjsp-rb--at-top-end::after       { inset-block-end: 0;   inset-inline-end: 0; }
.tjsp-rb--corner.tjsp-rb--at-top-start::before    { inset-block-start: 0; inset-inline-end: 0; }
.tjsp-rb--corner.tjsp-rb--at-top-start::after     { inset-block-end: 0;   inset-inline-start: 0; }
.tjsp-rb--corner.tjsp-rb--at-bottom-end::before   { inset-block-end: 0;   inset-inline-start: 0; }
.tjsp-rb--corner.tjsp-rb--at-bottom-end::after    { inset-block-start: 0; inset-inline-end: 0; }
.tjsp-rb--corner.tjsp-rb--at-bottom-start::before { inset-block-end: 0;   inset-inline-end: 0; }
.tjsp-rb--corner.tjsp-rb--at-bottom-start::after  { inset-block-start: 0; inset-inline-start: 0; }

/* ---------------------------------------------------------- Side ribbon
 *
 * A band attached to a side edge, 12px from the top. It starts `fold` beyond
 * the card's edge, and the fold is a dark triangle under that overhang - the
 * band wrapping behind the card. The free end is straight, notched or
 * pointed (clip-path, so mirrored under :dir(rtl)).
 */
.tjsp-rb--flag {
	--tjsp-rb-f: var(--tjsp-rb-fold, 0px);
	--tjsp-rb-out: calc(-1 * (var(--tjsp-rb-f) + var(--tjsp-host-border, 1px)));
	position: absolute;
	z-index: 2;
	display: flex;
	inset-block-start: 12px;
	block-size: var(--tjsp-rb-h);
	max-inline-size: min(var(--tjsp-rb-maxw, 100vw), calc(100% - 12px - var(--tjsp-rb-oppo, 0px)));
}
.tjsp-rb--flag.tjsp-rb--at-top-start { inset-inline-start: var(--tjsp-rb-out); }
.tjsp-rb--flag.tjsp-rb--at-top-end   { inset-inline-end: var(--tjsp-rb-out); }

.tjsp-rb--flag .tjsp-rb__band {
	inline-size: var(--tjsp-rb-w, auto);
	max-inline-size: 100%;
	min-inline-size: 0;
}
.tjsp-rb--flag.tjsp-rb--at-top-start .tjsp-rb__band {
	padding-inline: calc(var(--tjsp-rb-px, 10px) + var(--tjsp-rb-f)) calc(var(--tjsp-rb-px, 10px) + var(--tjsp-rb-tail, 0px));
}
.tjsp-rb--flag.tjsp-rb--at-top-end .tjsp-rb__band {
	padding-inline: calc(var(--tjsp-rb-px, 10px) + var(--tjsp-rb-tail, 0px)) calc(var(--tjsp-rb-px, 10px) + var(--tjsp-rb-f));
}

/* Free end on the right: a start ribbon in LTR, an end ribbon in RTL. */
.tjsp-rb--flag.tjsp-rb--tail-notch.tjsp-rb--at-top-start .tjsp-rb__band,
.tjsp-rb--flag.tjsp-rb--tail-notch.tjsp-rb--at-top-end:dir(rtl) .tjsp-rb__band {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--tjsp-rb-tail)) 50%, 100% 100%, 0 100%);
}
.tjsp-rb--flag.tjsp-rb--tail-point.tjsp-rb--at-top-start .tjsp-rb__band,
.tjsp-rb--flag.tjsp-rb--tail-point.tjsp-rb--at-top-end:dir(rtl) .tjsp-rb__band {
	clip-path: polygon(0 0, calc(100% - var(--tjsp-rb-tail)) 0, 100% 50%, calc(100% - var(--tjsp-rb-tail)) 100%, 0 100%);
}
/* Free end on the left. */
.tjsp-rb--flag.tjsp-rb--tail-notch.tjsp-rb--at-top-end .tjsp-rb__band,
.tjsp-rb--flag.tjsp-rb--tail-notch.tjsp-rb--at-top-start:dir(rtl) .tjsp-rb__band {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tjsp-rb-tail) 50%);
}
.tjsp-rb--flag.tjsp-rb--tail-point.tjsp-rb--at-top-end .tjsp-rb__band,
.tjsp-rb--flag.tjsp-rb--tail-point.tjsp-rb--at-top-start:dir(rtl) .tjsp-rb__band {
	clip-path: polygon(var(--tjsp-rb-tail) 0, 100% 0, 100% 100%, var(--tjsp-rb-tail) 100%, 0 50%);
}

/* The fold, under the overhang, against the card's edge. */
.tjsp-rb--flag::before {
	inset-block-start: 100%;
}
.tjsp-rb--flag.tjsp-rb--at-top-start::before { inset-inline-start: 0; }
.tjsp-rb--flag.tjsp-rb--at-top-end::before   { inset-inline-end: 0; }
/* The triangle's upright side lies on the card's edge: the square's right
   side when the overhang is on the left, its left side otherwise. */
.tjsp-rb--flag.tjsp-rb--at-top-start::before,
.tjsp-rb--flag.tjsp-rb--at-top-end:dir(rtl)::before {
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.tjsp-rb--flag.tjsp-rb--at-top-end::before,
.tjsp-rb--flag.tjsp-rb--at-top-start:dir(rtl)::before {
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ---------------------------------------------------------- Bookmark
 *
 * A vertical ribbon hanging from the top edge, 16px in from the side, `bl`
 * long below the edge and `bw` wide. It starts `fold` above the card (the
 * ribbon wrapping over the edge) and the fold is a dark triangle beside that
 * overhang, on the side facing the middle of the card. The free end at the
 * bottom is straight, notched or pointed. Text is centred and may take three
 * short lines.
 */
.tjsp-rb--bookmark {
	--tjsp-rb-f: var(--tjsp-rb-fold, 0px);
	position: absolute;
	z-index: 2;
	display: flex;
	inset-block-start: calc(-1 * (var(--tjsp-rb-f) + var(--tjsp-host-border, 1px)));
	inline-size: var(--tjsp-rb-bw, 56px);
	block-size: calc(var(--tjsp-rb-bl, 64px) + var(--tjsp-rb-f) + var(--tjsp-host-border, 1px));
	white-space: normal;
}
.tjsp-rb--bookmark.tjsp-rb--at-top-end   { inset-inline-end: 16px; }
.tjsp-rb--bookmark.tjsp-rb--at-top-start { inset-inline-start: 16px; }

.tjsp-rb--bookmark .tjsp-rb__band {
	inline-size: 100%;
	block-size: 100%;
	justify-content: center;
	padding-block: calc(var(--tjsp-rb-f) + var(--tjsp-rb-py, 3px)) calc(var(--tjsp-rb-tail, 0px) + var(--tjsp-rb-py, 3px));
	padding-inline: 4px;
	text-align: center;
	line-height: 1.15;
}
.tjsp-rb--bookmark.tjsp-rb--tail-notch .tjsp-rb__band {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--tjsp-rb-tail)), 0 100%);
}
.tjsp-rb--bookmark.tjsp-rb--tail-point .tjsp-rb__band {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tjsp-rb-tail)), 50% 100%, 0 calc(100% - var(--tjsp-rb-tail)));
}

.tjsp-rb--bookmark::before { inset-block-start: 0; }
.tjsp-rb--bookmark.tjsp-rb--at-top-end::before   { inset-inline-start: calc(-1 * var(--tjsp-rb-f)); }
.tjsp-rb--bookmark.tjsp-rb--at-top-start::before { inset-inline-end: calc(-1 * var(--tjsp-rb-f)); }
/* Right angle against the band and on the card's top edge. */
.tjsp-rb--bookmark.tjsp-rb--at-top-end::before,
.tjsp-rb--bookmark.tjsp-rb--at-top-start:dir(rtl)::before {
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.tjsp-rb--bookmark.tjsp-rb--at-top-start::before,
.tjsp-rb--bookmark.tjsp-rb--at-top-end:dir(rtl)::before {
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------- Seal
 *
 * A round (or starburst) sticker `d` across, 8px in from the top corner,
 * tilted by --tjsp-rb-rot (mirrored in RTL). A circle turned is still the same
 * circle, which is why this is the one shape that may rotate freely: its
 * footprint, and so what the card reserves for it, never changes. Its shadow
 * is a drop-shadow on the frame, so it follows the starburst's points.
 */
.tjsp-rb--seal {
	position: absolute;
	z-index: 2;
	display: block;
	inset-block-start: 8px;
	inline-size: var(--tjsp-rb-d, 72px);
	block-size: var(--tjsp-rb-d, 72px);
	rotate: var(--tjsp-rb-rot, 0deg);
	white-space: normal;
	filter: drop-shadow(var(--tjsp-rb-shadow));
}
.tjsp-rb--seal:dir(rtl) { rotate: calc(-1 * var(--tjsp-rb-rot, 0deg)); }
.tjsp-rb--seal.tjsp-rb--at-top-end   { inset-inline-end: 8px; }
.tjsp-rb--seal.tjsp-rb--at-top-start { inset-inline-start: 8px; }

.tjsp-rb--seal .tjsp-rb__band {
	inline-size: 100%;
	block-size: 100%;
	justify-content: center;
	padding: calc(var(--tjsp-rb-d, 72px) * 0.16);
	border-radius: 50%;
	box-shadow: none;
	text-align: center;
	line-height: 1.1;
}
.tjsp-rb--seal.tjsp-rb--seal-burst .tjsp-rb__band {
	padding: calc(var(--tjsp-rb-d, 72px) * 0.2);
	border-radius: 0;
	clip-path: polygon(50% 0%, 58% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42%, 100% 50%, 90.2% 58%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58% 90.2%, 50% 100%, 42% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58%, 0% 50%, 9.8% 42%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42% 9.8%);
}

/* Bookmarks and seals wrap their text over up to three lines. */
.tjsp-rb:is(.tjsp-rb--bookmark, .tjsp-rb--seal) .tjsp-rb__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
}

@media print {
	.tjsp-rb { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}