/*
 * Guided layout - see includes/class-bjkb-guided.php for the Markdown each
 * component comes from. Loaded only on a guided article, or on a revision
 * preview where either side is one, so none of it can reach another
 * article's page.
 *
 * Every colour a theme already has (card, panel, border, text, accent) comes
 * from its own custom properties, so these rules work unchanged in Account,
 * App Light and App Dark. The only colours defined here are the four callout
 * tints and the step-result green: a light set, plus a translucent set for
 * App Dark that sits on its dark card instead of punching a pale hole in it
 * (the same approach as the --bjkb-diff-* tokens).
 */

/* ------------------------------------------------------------------ */
/* Callout and result colours                                          */
/* ------------------------------------------------------------------ */

.bjkb-callout-tip {
	--bjkb-callout-line: #1A7F37;
	--bjkb-callout-bg: #EFF8F1;
	--bjkb-callout-border: #C4E4CC;
	--bjkb-callout-ink: #116329;
}

.bjkb-callout-note {
	--bjkb-callout-line: #0969DA;
	--bjkb-callout-bg: #EFF5FC;
	--bjkb-callout-border: #C3D9F3;
	--bjkb-callout-ink: #0A4D9C;
}

/* Amber, like the stale-article notice: something to act on, not an alarm. */
.bjkb-callout-important {
	--bjkb-callout-line: #BF8700;
	--bjkb-callout-bg: #FFF7E1;
	--bjkb-callout-border: #EDD9A0;
	--bjkb-callout-ink: #7A5500;
}

/* The Booth Junkie teal family (#44869A), whatever the theme's accent. */
.bjkb-callout-premium {
	--bjkb-callout-line: #44869A;
	--bjkb-callout-bg: #EDF5F7;
	--bjkb-callout-border: #C2DBE2;
	--bjkb-callout-ink: #2C5C6C;
}

.bjkb-step-result {
	--bjkb-result-bg: #EFF8F1;
	--bjkb-result-ink: #116329;
}

body.bjkb-theme-app-dark .bjkb-callout-tip {
	--bjkb-callout-line: #3FB950;
	--bjkb-callout-bg: rgba(46, 160, 67, 0.12);
	--bjkb-callout-border: rgba(63, 185, 80, 0.32);
	--bjkb-callout-ink: #7EE787;
}

body.bjkb-theme-app-dark .bjkb-callout-note {
	--bjkb-callout-line: #58A6FF;
	--bjkb-callout-bg: rgba(56, 139, 253, 0.12);
	--bjkb-callout-border: rgba(88, 166, 255, 0.32);
	--bjkb-callout-ink: #A5CDFF;
}

body.bjkb-theme-app-dark .bjkb-callout-important {
	--bjkb-callout-line: #D29922;
	--bjkb-callout-bg: rgba(210, 153, 34, 0.13);
	--bjkb-callout-border: rgba(227, 179, 65, 0.32);
	--bjkb-callout-ink: #F2CC60;
}

body.bjkb-theme-app-dark .bjkb-callout-premium {
	--bjkb-callout-line: #6FB3C6;
	--bjkb-callout-bg: rgba(90, 156, 176, 0.16);
	--bjkb-callout-border: rgba(124, 195, 216, 0.32);
	--bjkb-callout-ink: #A9DCEA;
}

body.bjkb-theme-app-dark .bjkb-step-result {
	--bjkb-result-bg: rgba(46, 160, 67, 0.14);
	--bjkb-result-ink: #7EE787;
}

/* ------------------------------------------------------------------ */
/* The article around the components                                   */
/* ------------------------------------------------------------------ */

/* A size up from the knowledgebase's 15px, and more room between lines:
   these articles are read step by step, often next to the app itself. */
.bjkb-guided .bjkb-article-content,
.bjkb-guided .bjkb-article-lead {
	font-size: 16px;
	line-height: 1.65;
}

.bjkb-guided .bjkb-article-content > p,
.bjkb-guided .bjkb-article-content > ul,
.bjkb-guided .bjkb-article-content > ol:not(.bjkb-steps) {
	margin: 0 0 14px;
}

.bjkb-guided .bjkb-article-content > ul,
.bjkb-guided .bjkb-article-content > ol:not(.bjkb-steps) {
	padding-left: 1.4em;
}

.bjkb-guided .bjkb-article-content > ul > li,
.bjkb-guided .bjkb-article-content > ol:not(.bjkb-steps) > li {
	margin-bottom: 6px;
}

/* Each section starts clearly: a rule and real space above every h2. The
   sizes step down from the article title (1.7em) through h2 and h3 to a
   step's action (1.0625em), so section > sub-section > step reads at a
   glance. */
.bjkb-guided .bjkb-article-content > h2 {
	margin: 44px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--bjkb-border);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
}

.bjkb-guided .bjkb-article-content > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.bjkb-guided .bjkb-article-content > h3 {
	margin: 32px 0 10px;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.35;
}

/* "On this page": two columns where there's room, so a long guided article
   doesn't push its first step a whole screen further down. */
@media (min-width: 700px) {
	.bjkb-guided .bjkb-toc ul {
		columns: 2;
		column-gap: 32px;
	}

	.bjkb-guided .bjkb-toc li {
		break-inside: avoid;
	}
}

.bjkb-guided .bjkb-article-content :not(pre) > code,
.bjkb-guided .bjkb-article-lead code {
	padding: 1px 5px;
	border: 1px solid var(--bjkb-border);
	border-radius: 4px;
	background: var(--bjkb-bg-panel);
	color: inherit;
	font-size: 0.875em;
}

/* Visible to screen readers only - a callout's type ahead of a custom title. */
.bjkb-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Summary card ("> [!SUMMARY]")                                       */
/* ------------------------------------------------------------------ */

/* Printed above the table of contents (Bjkb_Guided::split_lead()). The
   color-mix() tint falls back to the plain panel colour where unsupported. */
.bjkb-summary {
	margin: 0 0 24px;
	padding: 18px 22px 20px;
	background: var(--bjkb-bg-panel);
	background: color-mix(in srgb, var(--bjkb-accent) 7%, var(--bjkb-bg-card));
	border: 1px solid var(--bjkb-border);
	border-color: color-mix(in srgb, var(--bjkb-accent) 30%, var(--bjkb-border));
	border-radius: var(--bjkb-radius-card);
}

.bjkb-summary > * {
	margin: 0;
}

.bjkb-summary > * + * {
	margin-top: 10px;
}

.bjkb-summary-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--bjkb-accent);
	font-size: 0.8125em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bjkb-summary-title .bjkb-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.bjkb-summary > ul {
	padding: 0;
	list-style: none;
}

.bjkb-summary > ul > li {
	position: relative;
	margin: 0;
	padding-left: 26px;
}

.bjkb-summary > ul > li + li {
	margin-top: 6px;
}

/* A tick, drawn with two borders - no icon font, nothing to download. */
.bjkb-summary > ul > li::before {
	content: "";
	position: absolute;
	top: 0.38em;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid var(--bjkb-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ------------------------------------------------------------------ */
/* Callouts ("> [!TIP]", "[!NOTE]", "[!IMPORTANT]", "[!PREMIUM]")      */
/* ------------------------------------------------------------------ */

.bjkb-callout {
	margin: 20px 0 22px;
	padding: 14px 18px 15px 16px;
	background: var(--bjkb-callout-bg);
	border: 1px solid var(--bjkb-callout-border);
	border-left: 4px solid var(--bjkb-callout-line);
	border-radius: var(--bjkb-radius-card);
	color: var(--bjkb-text);
}

.bjkb-callout > * {
	margin: 0;
}

.bjkb-callout > * + * {
	margin-top: 8px;
}

.bjkb-callout > ul,
.bjkb-callout > ol {
	padding-left: 1.3em;
}

.bjkb-callout-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--bjkb-callout-ink);
	font-weight: 700;
	line-height: 1.35;
}

.bjkb-callout-title .bjkb-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--bjkb-callout-line);
}

/* ------------------------------------------------------------------ */
/* Step cards (an ordered list)                                        */
/* ------------------------------------------------------------------ */

.bjkb-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 18px 0 26px;
	padding: 0;
	list-style: none;
}

.bjkb-steps > .bjkb-step {
	position: relative;
	margin: 0;
	padding: 16px 20px 18px 66px;
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* The number comes from data-bjkb-step - see Bjkb_Guided::convert_steps(). */
.bjkb-steps > .bjkb-step::before {
	content: attr(data-bjkb-step);
	position: absolute;
	top: 14px;
	left: 16px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--bjkb-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.bjkb-step > * {
	margin: 0;
}

.bjkb-step > * + * {
	margin-top: 12px;
}

.bjkb-step > ul,
.bjkb-step > ol {
	padding-left: 1.3em;
}

/* The action - the one thing to do in this step. Nudged down to sit level
   with the number when it's a single line. */
.bjkb-step > .bjkb-step-action {
	padding-top: 4px;
	color: var(--bjkb-text);
	font-size: 1.0625em;
	font-weight: 600;
	line-height: 1.5;
}

/* 700, not 800: the system font is Segoe UI on Windows, which has no 800,
   so Chrome jumped to Segoe UI Black - wider and heavier than bold text
   anywhere else in the article. */
.bjkb-step-action strong,
.bjkb-step-action b {
	font-weight: 700;
}

/* "Result: ..." - what the reader should see once the step is done. */
.bjkb-step > .bjkb-step-result {
	position: relative;
	padding: 8px 12px 8px 36px;
	background: var(--bjkb-result-bg);
	border-radius: var(--bjkb-radius-card);
	font-size: 0.95em;
}

.bjkb-step > .bjkb-step-result::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 15px;
	width: 5px;
	height: 10px;
	border: solid var(--bjkb-result-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bjkb-step-result-label {
	color: var(--bjkb-result-ink);
	font-weight: 700;
}

.bjkb-step > .bjkb-callout {
	margin: 12px 0 0;
}

/* ------------------------------------------------------------------ */
/* Screenshots ("![alt](src \"Caption\")")                            */
/* ------------------------------------------------------------------ */

/* The frame hugs the screenshot (fit-content) rather than stretching across
   the column, so a narrow screenshot doesn't float in a wide empty mat. */
.bjkb-figure {
	display: block;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 22px auto 24px;
	padding: 6px;
	background: var(--bjkb-bg-panel);
	border: 1px solid var(--bjkb-border);
	border-radius: calc(var(--bjkb-radius-card) + 3px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 24px -14px rgba(0, 0, 0, 0.3);
}

.bjkb-article-content .bjkb-figure img {
	margin: 0;
}

/* contain: inline-size keeps a long caption from widening the frame past
   its screenshot - it wraps to the screenshot's width instead. */
.bjkb-figure figcaption {
	contain: inline-size;
	margin: 0;
	padding: 8px 6px 2px;
	color: var(--bjkb-text-muted);
	font-size: 0.875em;
	line-height: 1.45;
}

/* In a step the card is already the frame, so the screenshot keeps only a
   hairline border - no mat, no shadow, no box in a box in a box - and runs
   under the number column, 20px in from the card's edge to match the
   padding on the right, for as much width as the card has. Not when it's
   the step's first block: it would sit on the number. */
.bjkb-step > .bjkb-figure {
	margin: 14px 0 0;
	padding: 0;
	overflow: hidden;
	background: var(--bjkb-bg-card);
	border-radius: var(--bjkb-radius-card);
	box-shadow: none;
}

.bjkb-step > .bjkb-figure img {
	border-radius: 0;
}

.bjkb-step > .bjkb-figure figcaption {
	padding: 8px 12px 9px;
	border-top: 1px solid var(--bjkb-border);
	background: var(--bjkb-bg-panel);
}

.bjkb-step > .bjkb-figure:not(:first-child),
.bjkb-step > .bjkb-table-wrap:not(:first-child),
.bjkb-step > .bjkb-image-row:not(:first-child) {
	max-width: calc(100% + 46px);
	margin-left: -46px;
}

/* Two portrait screenshots side by side (Bjkb_Markdown::pair_portrait_images()). */
.bjkb-image-row > .bjkb-figure {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

/* Scrolls sideways inside its own box if it's ever wider than the column,
   with a soft shadow at whichever edge has more to see (the "local" covers
   scroll with the table and hide each shadow once that edge is reached).
   On a phone the rows stack instead - see the phone rules further down. */
.bjkb-table-wrap {
	margin: 18px 0 24px;
	overflow-x: auto;
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
	background:
		linear-gradient(to right, var(--bjkb-bg-card) 40%, transparent) left center / 28px 100% no-repeat local,
		linear-gradient(to left, var(--bjkb-bg-card) 40%, transparent) right center / 28px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent) left center / 12px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) right center / 12px 100% no-repeat scroll;
	background-color: var(--bjkb-bg-card);
}

.bjkb-table-wrap:focus-visible {
	outline: 2px solid var(--bjkb-accent);
	outline-offset: 2px;
}

.bjkb-table-wrap > table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375em;
	line-height: 1.5;
}

/* min-width per column, so a narrow column never squeezes its cells to a
   word per line - and three or more columns get wider ones. Above phone
   width only: on a phone every row stacks (see the phone rules). */
.bjkb-table-wrap th,
.bjkb-table-wrap td {
	padding: 11px 14px;
	border: 0;
	border-top: 1px solid var(--bjkb-border);
	text-align: left;
	vertical-align: top;
}

@media (min-width: 601px) {
	.bjkb-table-wrap th,
	.bjkb-table-wrap td {
		min-width: 8em;
	}

	.bjkb-table-wrap:has(th:nth-child(3)) td {
		min-width: 11em;
	}
}

.bjkb-table-wrap thead th {
	border-top: 0;
	background: var(--bjkb-bg-panel);
	color: var(--bjkb-text-muted);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: bottom;
}

.bjkb-step > .bjkb-table-wrap {
	margin: 12px 0 0;
}

/* ------------------------------------------------------------------ */
/* Collapsible reference ("> [!DETAILS] Title")                        */
/* ------------------------------------------------------------------ */

.bjkb-details {
	margin: 20px 0 24px;
	background: var(--bjkb-bg-card);
	border: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card);
}

.bjkb-details > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--bjkb-radius-card);
	color: var(--bjkb-text);
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.bjkb-details > summary::-webkit-details-marker {
	display: none;
}

/* Chevron: points right when closed, down when open. */
.bjkb-details > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin: 0 3px 0 2px;
	border: solid var(--bjkb-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.bjkb-details[open] > summary::before {
	transform: rotate(45deg);
}

/* A "Show"/"Hide" pill, so the row reads as something to click rather than
   a heading. The "/ ''" form keeps it from being read out on top of the
   state screen readers already announce; browsers that don't know that
   syntax keep the first declaration. */
.bjkb-details > summary::after {
	content: "Show";
	content: "Show" / "";
	flex: 0 0 auto;
	margin-left: auto;
	padding: 2px 10px;
	background: var(--bjkb-control-bg);
	border: 1px solid var(--bjkb-control-border);
	border-radius: 999px;
	color: var(--bjkb-text-muted);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bjkb-details[open] > summary::after {
	content: "Hide";
	content: "Hide" / "";
}

.bjkb-details > summary:hover {
	background: var(--bjkb-bg-panel);
}

.bjkb-details > summary:hover::after {
	border-color: var(--bjkb-accent);
	color: var(--bjkb-text);
}

.bjkb-details > summary:focus-visible {
	outline: 2px solid var(--bjkb-accent);
	outline-offset: 2px;
}

.bjkb-details[open] > summary {
	border-bottom: 1px solid var(--bjkb-border);
	border-radius: var(--bjkb-radius-card) var(--bjkb-radius-card) 0 0;
}

.bjkb-details-body {
	padding: 16px 18px 18px;
}

.bjkb-details-body > :first-child {
	margin-top: 0;
}

.bjkb-details-body > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Phones                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	/* Every pixel of width counts for a screenshot inside a step card
	   inside the article card. */
	.bjkb-guided .bjkb-article {
		padding: 20px 16px;
	}

	.bjkb-summary {
		padding: 16px 16px 18px;
	}

	.bjkb-callout {
		padding: 12px 14px 13px 12px;
	}

	.bjkb-steps > .bjkb-step {
		padding: 14px 14px 16px 54px;
	}

	.bjkb-steps > .bjkb-step::before {
		top: 12px;
		left: 12px;
		min-width: 30px;
		height: 30px;
		font-size: 15px;
	}

	.bjkb-step > .bjkb-step-action {
		padding-top: 2px;
	}

	/* A screenshot or table in a step takes nearly the card's full width on
	   a phone, 8px in from each edge: under the number as well as the text,
	   and into the right-hand padding too. */
	.bjkb-step > .bjkb-figure:not(:first-child),
	.bjkb-step > .bjkb-table-wrap:not(:first-child),
	.bjkb-step > .bjkb-image-row:not(:first-child) {
		max-width: calc(100% + 52px);
		margin-left: -46px;
		margin-right: -6px;
	}

	/* Each table row becomes a small card of its own: the first cell is its
	   title, and every other cell sits under its column heading (data-label,
	   copied from the <th> by Bjkb_Guided::wrap_table()). A three-column
	   table would otherwise scroll sideways with its last column - usually
	   "What to do" - out of sight. */
	.bjkb-table-wrap {
		position: relative;
		overflow: visible;
		background: var(--bjkb-bg-card);
	}

	.bjkb-table-wrap > table,
	.bjkb-table-wrap tbody,
	.bjkb-table-wrap tr,
	.bjkb-table-wrap td {
		display: block;
		width: auto;
	}

	.bjkb-table-wrap thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bjkb-table-wrap tr {
		padding: 11px 14px 12px;
		border-top: 1px solid var(--bjkb-border);
	}

	.bjkb-table-wrap tbody > tr:first-child {
		border-top: 0;
	}

	.bjkb-table-wrap td {
		min-width: 0;
		padding: 0;
		border: 0;
	}

	.bjkb-table-wrap td + td {
		margin-top: 8px;
	}

	.bjkb-table-wrap td:first-child {
		font-weight: 600;
	}

	.bjkb-table-wrap td[data-label]:not(:first-child)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 1px;
		color: var(--bjkb-text-muted);
		font-size: 0.75em;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Sub-section entries are dropped from "On this page" on a phone - their
	   section's entry is a scroll away from them - so the first step isn't
	   two screens down. */
	.bjkb-guided .bjkb-toc-level-3 {
		display: none;
	}

	.bjkb-details > summary {
		padding: 12px 14px;
	}

	.bjkb-details-body {
		padding: 14px;
	}
}

@media (max-width: 480px) {
	/* bjkb-base.css stacks a portrait pair below this width. */
	.bjkb-image-row > .bjkb-figure {
		flex: 0 0 auto;
		width: fit-content;
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bjkb-details > summary::before {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Print                                                               */
/* ------------------------------------------------------------------ */

/* Collapsed blocks print open (assets/js/bjkb-guided.js opens them on
   beforeprint; the ::details-content rule below covers browsers that hide
   closed content that way), tables print in full, and the coloured cues
   that carry meaning - step numbers, callout tints - are kept. */
@media print {
	.bjkb-summary,
	.bjkb-callout,
	.bjkb-steps > .bjkb-step,
	.bjkb-figure,
	.bjkb-details,
	.bjkb-table-wrap {
		box-shadow: none;
	}

	.bjkb-summary,
	.bjkb-callout,
	.bjkb-figure,
	.bjkb-step-result,
	.bjkb-table-wrap tr {
		break-inside: avoid;
	}

	.bjkb-summary,
	.bjkb-callout,
	.bjkb-steps > .bjkb-step::before,
	.bjkb-step-result {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.bjkb-table-wrap {
		overflow: visible;
		background: none;
	}

	.bjkb-table-wrap th,
	.bjkb-table-wrap td {
		min-width: 0;
	}

	.bjkb-details > summary::before,
	.bjkb-details > summary::after {
		display: none;
	}

	.bjkb-details > summary {
		border-bottom: 1px solid var(--bjkb-border);
	}
}

/* On its own: a selector list with a pseudo-element a browser doesn't know
   is dropped whole, and would take the rules above with it. */
@media print {
	.bjkb-details::details-content {
		display: block;
		content-visibility: visible;
	}
}