/* ===================================================================
   Pick a Random — site styles
   Version 1.2.0

   THIS FILE NOW SHIPS INSIDE THE PLUGIN at
   assets/css/pick-a-random-site.css — you do not need to paste it into
   Additional CSS. It is included here so you can read and edit it.

   The palette lives on :root in this file and nowhere else. The tool's
   own stylesheet reads those same variables with hard-coded fallbacks,
   so the tool still looks right if this file is ever switched off.

   To change one colour site-wide, put a single line in
   Appearance → Customize → Additional CSS:

       :root { --par-accent: #0f766e; }

   Everything else is scoped under .par-page so it cannot leak into
   your theme's header, footer or blog. The plugin's tool wrapper is
   .par, so every text rule below carries :not(.par *) to stop the page
   typography at the edge of the tool.
   =================================================================== */

:root {
	--par-bg: #ffffff;
	--par-surface: #f7f6fc;
	--par-surface-2: #f1effa;
	--par-ink: #191627;
	--par-ink-mid: #3c3752;
	--par-muted: #5f5a75;
	--par-line: #e4e2f0;
	--par-line-strong: #d6d3e8;
	--par-accent: #4338ca;
	--par-accent-deep: #372ba8;
	--par-accent-ink: #ffffff;
	--par-accent-soft: #eeecfb;
	--par-hit: #0a7a58;
	--par-warn: #b23b2f;
	--par-lucky: #ffd53d;

	--par-radius: 14px;
	--par-radius-sm: 10px;
	--par-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--par-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--par-shadow: 0 1px 2px rgba(25, 22, 39, .05), 0 10px 28px -20px rgba(25, 22, 39, .4);
}

.par-page {
	background: transparent;
	color: var(--par-ink);
	font-family: var(--par-font);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.62;
	letter-spacing: -.005em;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.par-page *,
.par-page *::before,
.par-page *::after {
	box-sizing: border-box;
}

/* ===================================================================
   1. VERTICAL RHYTHM

   Spacing is carried by bottom margins on the elements themselves, so
   a heading always sits closer to the text it introduces than to the
   text above it. Sections are separated by one larger top margin,
   which collapses with the bottom margin below it rather than adding
   to it.
   =================================================================== */

.par-page > * + * {
	margin-top: 2.75rem;
}

.par-page > :last-child,
.par-page section > :last-child,
.par-page .par-band > :last-child {
	margin-bottom: 0;
}

.par-rule {
	height: 0;
	margin: 2.75rem 0;
	border: 0;
	border-top: 2px dashed var(--par-line-strong);
}

/* ===================================================================
   2. HEADINGS
   =================================================================== */

.par-page :is(h1, h2, h3, h4, h5, h6):not(.par *) {
	margin: 0 0 .75rem;
	padding: 0;
	color: var(--par-ink);
	font-family: var(--par-font);
	text-transform: none;
	text-wrap: balance;
}

.par-page h1:not(.par *) {
	margin-bottom: 1.15rem;
	font-size: clamp(2.1rem, 6vw, 3.2rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.034em;
}

.par-page h2:not(.par *) {
	margin-bottom: .95rem;
	font-size: clamp(1.5rem, 3.4vw, 2.05rem);
	font-weight: 750;
	line-height: 1.18;
	letter-spacing: -.028em;
}

.par-page h3:not(.par *) {
	margin-bottom: .65rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
}

.par-page h4:not(.par *) {
	margin-bottom: .55rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.014em;
}

.par-page h5:not(.par *) {
	margin-bottom: .5rem;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.008em;
}

.par-page h6:not(.par *) {
	margin-bottom: .5rem;
	color: var(--par-muted);
	font-size: .75rem;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* The oversized homepage headline. */
.par-display {
	margin-bottom: 1.25rem !important;
	font-size: clamp(2.35rem, 8.5vw, 4.4rem) !important;
	font-weight: 800 !important;
	line-height: .98 !important;
	letter-spacing: -.038em !important;
}

/* ===================================================================
   3. BODY TEXT
   =================================================================== */

.par-page p:not(.par *) {
	margin: 0 0 1.15rem;
	color: var(--par-ink-mid);
	font-size: 1.0625rem;
	line-height: 1.62;
	text-wrap: pretty;
}

.par-page :is(strong, b):not(.par *) {
	color: var(--par-ink);
	font-weight: 700;
}

.par-page :is(em, i):not(.par *) {
	font-style: italic;
}

.par-page small:not(.par *) {
	color: var(--par-muted);
	font-size: .875rem;
}

.par-page mark:not(.par *) {
	padding: .05em .25em;
	border-radius: 4px;
	background: var(--par-lucky);
	color: var(--par-ink);
}

.par-page :is(sup, sub):not(.par *) {
	font-size: .7em;
	line-height: 0;
}

.par-page abbr:not(.par *) {
	text-decoration: underline dotted;
	cursor: help;
}

.par-page address:not(.par *) {
	margin: 0 0 1.15rem;
	color: var(--par-ink-mid);
	font-style: normal;
}

.par-eyebrow {
	display: block;
	margin: 0 0 .7rem;
	color: var(--par-accent);
	font-size: .75rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.par-lede {
	font-size: clamp(1.0625rem, 2.2vw, 1.25rem) !important;
	line-height: 1.5 !important;
	color: var(--par-muted) !important;
}

.par-meta {
	font-size: .875rem !important;
	color: var(--par-muted) !important;
}

.par-foot {
	font-size: .9375rem !important;
	color: var(--par-muted) !important;
}

.par-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ===================================================================
   4. LINKS
   =================================================================== */

.par-page a:not(.par *) {
	color: var(--par-accent);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: text-decoration-thickness .12s ease, color .12s ease;
}

.par-page a:not(.par *):hover {
	color: var(--par-accent-deep);
	text-decoration-thickness: 2px;
}

.par-page :focus-visible {
	outline: 2px solid var(--par-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ===================================================================
   5. LISTS
   =================================================================== */

.par-page :is(ul, ol):not(.par *) {
	margin: 0 0 1.15rem;
	padding-left: 1.35rem;
	color: var(--par-ink-mid);
}

.par-page ul:not(.par *) {
	list-style: disc;
}

.par-page ol:not(.par *) {
	list-style: decimal;
}

.par-page li:not(.par *) {
	margin: 0;
	line-height: 1.6;
}

.par-page li:not(.par *) + li:not(.par *) {
	margin-top: .45rem;
}

.par-page li:not(.par *)::marker {
	color: var(--par-accent);
}

.par-page :is(ul, ol):not(.par *) :is(ul, ol) {
	margin: .45rem 0 0;
}

.par-page dl:not(.par *) {
	margin: 0 0 1.15rem;
}

.par-page dt:not(.par *) {
	color: var(--par-ink);
	font-weight: 700;
}

.par-page dd:not(.par *) {
	margin: .25rem 0 .85rem;
	color: var(--par-ink-mid);
}

/* ===================================================================
   6. CODE, QUOTES, MEDIA
   =================================================================== */

.par-page :is(code, kbd, samp):not(.par *) {
	padding: .12em .4em;
	border-radius: 5px;
	background: var(--par-surface-2);
	color: var(--par-ink);
	font-family: var(--par-mono);
	font-size: .875em;
}

.par-page kbd:not(.par *) {
	border: 1px solid var(--par-line-strong);
	box-shadow: 0 1px 0 var(--par-line-strong);
	font-weight: 600;
}

.par-page pre:not(.par *) {
	margin: 0 0 1.35rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius-sm);
	background: var(--par-surface);
	overflow-x: auto;
	font-family: var(--par-mono);
	font-size: .875rem;
	line-height: 1.55;
}

.par-page pre:not(.par *) code {
	padding: 0;
	background: none;
	font-size: inherit;
}

.par-page blockquote:not(.par *) {
	margin: 0 0 1.35rem;
	padding: .35rem 0 .35rem 1.15rem;
	border-left: 3px solid var(--par-accent-soft);
	color: var(--par-ink-mid);
	font-size: 1.125rem;
	line-height: 1.55;
}

.par-page cite:not(.par *) {
	display: block;
	margin-top: .5rem;
	color: var(--par-muted);
	font-size: .875rem;
	font-style: normal;
}

.par-page img:not(.par *) {
	max-width: 100%;
	height: auto;
	border-radius: var(--par-radius-sm);
}

.par-page figure:not(.par *) {
	margin: 0 0 1.35rem;
}

.par-page figcaption:not(.par *) {
	margin-top: .5rem;
	color: var(--par-muted);
	font-size: .875rem;
}

/* ===================================================================
   7. TABLES
   =================================================================== */

.par-page table:not(.par *) {
	width: 100%;
	margin: 0 0 1.35rem;
	border-collapse: collapse;
	font-size: 1rem;
}

.par-page caption:not(.par *) {
	margin-bottom: .6rem;
	color: var(--par-muted);
	font-size: .875rem;
	text-align: left;
}

.par-page :is(th, td):not(.par *) {
	padding: .7rem .8rem;
	border-bottom: 1px solid var(--par-line);
	text-align: left;
	vertical-align: top;
}

.par-page th:not(.par *) {
	color: var(--par-muted);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.par-page tbody tr:not(.par *):last-child :is(th, td) {
	border-bottom: 0;
}

/* ===================================================================
   8. THE SIGNATURE — the slot that keeps changing
   =================================================================== */

.par-slot {
	display: inline-grid;
	vertical-align: baseline;
	padding: 0 .12em;
	border-radius: 6px;
	background: var(--par-lucky);
	color: var(--par-ink);
	box-decoration-break: clone;
}

.par-slot > span {
	grid-area: 1 / 1;
	opacity: 0;
	animation: par-slot-cycle 8.4s steps(1, end) infinite;
}

.par-slot > span:nth-child(1) { animation-delay: 0s; }
.par-slot > span:nth-child(2) { animation-delay: 1.2s; }
.par-slot > span:nth-child(3) { animation-delay: 2.4s; }
.par-slot > span:nth-child(4) { animation-delay: 3.6s; }
.par-slot > span:nth-child(5) { animation-delay: 4.8s; }
.par-slot > span:nth-child(6) { animation-delay: 6.0s; }
.par-slot > span:nth-child(7) { animation-delay: 7.2s; }

@keyframes par-slot-cycle {
	0%, 14.28% { opacity: 1; }
	14.29%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.par-slot > span {
		animation: none;
		opacity: 0;
	}

	.par-slot > span:first-child {
		opacity: 1;
	}
}

/* ===================================================================
   9. COMPONENTS
   =================================================================== */

/* Hero ------------------------------------------------------------ */

.par-hero {
	padding: .25rem 0 0;
}

/* Card grid ------------------------------------------------------- */

.par-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: .75rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.par-grid > li {
	margin: 0 !important;
}

.par-card {
	display: block;
	height: 100%;
	padding: 1.05rem 1.1rem 1.15rem;
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius);
	background: var(--par-bg);
	color: var(--par-ink) !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.par-card:hover,
.par-card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--par-accent);
	box-shadow: var(--par-shadow);
}

.par-card__icon {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: .7rem;
	border-radius: var(--par-radius-sm);
	background: var(--par-accent-soft);
	font-size: 1.2rem;
	line-height: 1;
	transition: background-color .14s ease, transform .14s ease;
}

.par-card:hover .par-card__icon {
	background: var(--par-lucky);
	transform: rotate(-6deg);
}

.par-card b {
	display: block;
	color: var(--par-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.016em;
}

.par-card__desc {
	display: block;
	margin-top: .3rem;
	color: var(--par-muted);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.45;
}

.par-card--wide {
	grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
	.par-card:hover .par-card__icon {
		transform: none;
	}
}

/* Trust strip ----------------------------------------------------- */

.par-strip {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.35rem;
	margin: 0 !important;
	padding: 1.6rem !important;
	border-radius: var(--par-radius);
	background: var(--par-surface);
	list-style: none !important;
}

.par-strip > li {
	margin: 0 !important;
}

.par-strip li > b {
	display: block;
	margin-bottom: .35rem;
	color: var(--par-ink);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.012em;
}

.par-strip li > span {
	display: block;
	color: var(--par-ink-mid);
	font-size: .9375rem;
	line-height: 1.55;
}

.par-tick {
	display: inline-block;
	margin-right: .4rem;
	color: var(--par-hit);
	font-weight: 800;
}

/* Call-to-action band --------------------------------------------- */

.par-band {
	padding: 1.9rem;
	border-radius: var(--par-radius);
	background: var(--par-accent);
	color: var(--par-accent-ink);
}

.par-band :is(h2, h3) {
	color: var(--par-accent-ink) !important;
}

.par-band p {
	color: rgba(255, 255, 255, .92) !important;
}

.par-band a:not(.par-btn) {
	color: var(--par-accent-ink) !important;
	font-weight: 700 !important;
}

.par-btn {
	display: inline-block;
	padding: .72rem 1.25rem;
	border-radius: 999px;
	background: var(--par-lucky);
	color: var(--par-ink) !important;
	font-size: .9375rem;
	font-weight: 700 !important;
	line-height: 1.3;
	text-decoration: none !important;
	transition: filter .12s ease, transform .12s ease;
}

.par-btn:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* Notes ------------------------------------------------------------ */

.par-note {
	margin-bottom: 1.15rem;
	padding: .95rem 1.15rem;
	border-left: 3px solid var(--par-lucky);
	border-radius: 0 var(--par-radius-sm) var(--par-radius-sm) 0;
	background: var(--par-surface-2);
	color: var(--par-ink-mid) !important;
	font-size: 1rem !important;
}

.par-edit {
	margin-bottom: 1.35rem;
	padding: .95rem 1.15rem;
	border: 2px dashed #d97706;
	border-radius: var(--par-radius-sm);
	background: #fffbeb;
	color: #92400e;
	font-size: .9375rem;
	line-height: 1.55;
}

.par-edit strong {
	color: #7c2d12 !important;
}

.par-edit a {
	color: #92400e !important;
}

.par-edit p {
	color: #92400e !important;
}

.par-edit :last-child {
	margin-bottom: 0;
}

/* Numbered steps --------------------------------------------------- */

.par-steps {
	display: grid;
	gap: .75rem;
	margin: 0 0 1.35rem !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: par-step;
}

.par-steps > li {
	position: relative;
	margin: 0 !important;
	padding-left: 2.5rem;
	counter-increment: par-step;
	color: var(--par-ink-mid);
}

.par-steps > li::before {
	content: counter(par-step);
	position: absolute;
	left: 0;
	top: .05rem;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--par-accent-soft);
	color: var(--par-accent);
	font-size: .8125rem;
	font-weight: 800;
	line-height: 1;
}

/* FAQ -------------------------------------------------------------- */

.par-faq {
	display: grid;
	gap: .5rem;
}

.par-faq details {
	padding: .9rem 1.15rem;
	border: 1px solid var(--par-line);
	border-radius: var(--par-radius);
	background: var(--par-bg);
}

/* The native marker sits outside the padding box and ends up touching
   the border, so it is replaced with a triangle we can position. */
.par-faq summary {
	position: relative;
	padding-left: 1.6rem;
	cursor: pointer;
	color: var(--par-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.014em;
	list-style: none;
}

.par-faq summary::-webkit-details-marker {
	display: none;
}

.par-faq summary::marker {
	content: "";
}

.par-faq summary::before {
	content: "";
	position: absolute;
	left: .25rem;
	top: .72em;
	width: 0;
	height: 0;
	border-left: 6px solid var(--par-accent);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transform: translateY(-50%);
	transition: transform .15s ease;
}

.par-faq details[open] summary {
	margin-bottom: .7rem;
}

.par-faq details[open] summary::before {
	transform: translateY(-50%) rotate(90deg);
}

.par-faq p {
	margin: 0 0 .9rem;
	padding-left: 1.6rem;
	color: var(--par-ink-mid) !important;
	font-size: 1rem !important;
}

.par-faq p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.par-faq summary::before {
		transition: none;
	}
}

/* ===================================================================
   10. PROSE PAGES
   =================================================================== */

.par-prose h2:not(.par *) {
	margin-top: 2.6rem;
	padding-top: 1.5rem;
	border-top: 2px dashed var(--par-line-strong);
}

.par-prose h3:not(.par *) {
	margin-top: 1.8rem;
}

.par-prose ul.par-strip,
.par-prose ul.par-grid,
.par-prose ul.par-steps {
	padding-left: 0;
}

.par-prose ul.par-strip {
	padding: 1.6rem !important;
}

/* ===================================================================
   11. THE TOOL ITSELF
   =================================================================== */

/* The plugin renders inside .par and styles itself from the same
   tokens declared at the top of this file. It only needs the page's
   vertical rhythm, which .par-page > * + * already provides. */

.par-page > .par {
	margin-bottom: 0;
}