/*
 * Stylesheet for the Livewire Quickstart tutorial (in-app documentation).
 *
 * Token architecture mirrors product/app (src/client/styles/):
 *   1. Primitives      — raw values, names + values copied from primitives.css
 *   2. Semantic tokens — aliases onto primitives, as in tokens.css / components.css
 *   3. Doc tokens      — this document's component API (--doc-*), mapped onto
 *                        the semantic layer so pages track the product palette.
 *
 * The docs are static files with no build step, so the needed token subset is
 * mirrored here rather than imported. When the app's tokens change, update the
 * primitive values below to match.
 *
 * Layout model: a Quickstart step is designed to fit the editor's right-hand
 * Docs panel (fixed height, no page scroll) without losing content. The page
 * splits into a fixed top (chrome + title + recording) and fixed bottom
 * (prev/next), with only the step list scrolling internally if it overflows —
 * see "Layout" below. Opened standalone (its own browser tab), the same
 * markup reverts to normal document flow.
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
	/* ── 1. Primitives (from product/app primitives.css) ─────────────────── */
	--color-system-gray-white: #ffffff;
	--color-system-gray-gray-025: #f3f4f6;
	--color-system-gray-gray-50: #f6f7f9;
	--color-system-gray-gray-060: #e0e0e0;
	--color-system-gray-gray-300: #999999;
	--color-system-cyan-cyan-400: #1484e0;
	--color-system-cyan-cyan-900: #0d222d;
	--color-system-blue-blue-050: #e5f4ff;
	--color-system-lime-lime-500: #47ff57;
	--color-system-green-green-100: #e8f5e9;
	--color-system-green-green-700: #43a047;
	--color-system-document-range-page-125: #c1c1c1;
	--color-system-document-range-page-500: #4b4b4b;
	--color-system-document-range-page-800: #252424;
	--color-system-document-range-page-black: #000000;
	--color-system-document-range-half-values-page-910: rgb(23, 22, 22, 0.15);
	--radius-r-004: 4px;
	--radius-r-008: 8px;
	--radius-r-012: 12px;
	--radius-r-016: 16px;
	--spacing-space-002: 2px;
	--spacing-space-004: 4px;
	--spacing-space-006: 6px;
	--spacing-space-008: 8px;
	--spacing-space-010: 10px;
	--spacing-space-012: 12px;
	--spacing-space-016: 16px;
	--spacing-space-020: 20px;
	--border-border-w-01: 1px;

	/* ── 2. Semantic tokens (from product/app tokens.css / components.css) ── */
	--font-family-base: "IBM Plex Sans", sans-serif;
	--color-system-primary-primary-400: var(--color-system-cyan-cyan-400);
	--color-system-primary-primary-900: var(--color-system-cyan-cyan-900);
	--color-system-info-info-050: var(--color-system-blue-blue-050);
	--color-system-subtle-subtle-125: var(--color-system-document-range-page-125);
	--color-system-background-primary-background: var(--color-system-gray-white);
	--fonts-colors-type-dark-primary-heading: var(--color-system-document-range-page-black);
	--fonts-colors-type-dark-primary-body: var(--color-system-document-range-page-800);
	--fonts-colors-type-dark-tertiary-body: var(--color-system-document-range-page-500);
	--shadows-color-shadow-a: var(--color-system-document-range-half-values-page-910);
	--radius-default-radius: var(--radius-r-012);
	--radius-default-radius-sm: var(--radius-r-004);
	--panel-padding: var(--spacing-space-016);
	--panel-divider-color: var(--color-system-subtle-subtle-125);
	--container-bg: var(--color-system-primary-primary-900);

	/* The exact green the app's own module switcher uses for the active
	   Schematic/Harness pill (toolbar-btn-highlight-bg → accent-lime-active). */
	--toolbar-btn-highlight-bg: var(--color-system-lime-lime-500);

	/* ── 3. Doc tokens — this document's component API ───────────────────── */
	--doc-bg: var(--color-system-background-primary-background);
	--doc-surface: var(--color-system-gray-gray-50);
	--doc-border: var(--color-system-gray-gray-060);
	--doc-heading: var(--fonts-colors-type-dark-primary-heading);
	--doc-text: var(--fonts-colors-type-dark-primary-body);
	--doc-muted: var(--fonts-colors-type-dark-tertiary-body);
	--doc-accent: var(--color-system-primary-primary-400);
	--doc-accent-soft: var(--color-system-info-info-050);
	--doc-code-bg: var(--color-system-gray-gray-025);
	--doc-success-bg: var(--color-system-green-green-100);
	--doc-success: var(--color-system-green-green-700);
	--doc-module-bg: var(--toolbar-btn-highlight-bg);
	--doc-shadow: 2px 2px 12px 2px var(--shadows-color-shadow-a);
	--doc-radius: var(--radius-default-radius);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-family-base);
	color: var(--doc-text);
	background: var(--doc-bg);
	line-height: 1.5;
	font-size: 13px;
	-webkit-font-smoothing: antialiased;

	/* Embedded (default): fills the panel's iframe exactly (100vh) with no
	   page-level scroll — see the Layout comment below for why. */
	height: 100vh;
	overflow: hidden;
}

a {
	color: var(--doc-accent);
}

h1,
h3,
h4 {
	color: var(--doc-heading);
	margin: 0;
}

p {
	margin: 0;
}

ol,
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

code,
kbd {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
		monospace;
	background: var(--doc-code-bg);
	padding: 1px 5px;
	border-radius: var(--radius-default-radius-sm);
	font-size: 0.88em;
}

/* ── Layout ────────────────────────────────────────────────────────────────
 * .tut-top (chrome/title/recording) and .tut-pager are fixed; only .tut-body
 * (the step list) scrolls if its content overflows. Standalone (own tab,
 * `.standalone` on <html>) lifts the 100vh/overflow:hidden constraint set on
 * body above, since a browser tab isn't a fixed-height panel.
 */
.standalone body {
	height: auto;
	min-height: 100vh;
	overflow: visible;
}

.tut-page {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.standalone .tut-page {
	height: auto;
}

.tut-top {
	flex: 0 0 auto;
	padding: var(--spacing-space-016) var(--spacing-space-020) 0;
}

.tut-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 var(--spacing-space-020);
}

.standalone .tut-body {
	overflow: visible;
}

.tut-body::-webkit-scrollbar {
	width: 8px;
}

.tut-body::-webkit-scrollbar-thumb {
	background: var(--doc-border);
	border-radius: 4px;
}

.tut-pager {
	flex: 0 0 auto;
	padding: var(--spacing-space-006) var(--spacing-space-020);
	border-top: var(--border-border-w-01) solid var(--doc-border);
	background: var(--doc-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-space-008);
}

/* Standalone-only side padding. Embedded, the panel is a fixed 720px, so the
 * base 20px gutter (above) is already sized correctly. Standalone (its own,
 * often much wider, browser tab) that same 20px reads as no padding at all —
 * this centers a comfortable reading column instead, with the 20px gutter as
 * a floor on narrow windows and growing padding as the window widens. */
.standalone .tut-top,
.standalone .tut-body,
.standalone .tut-pager {
	padding-left: max(var(--spacing-space-020), calc((100% - 760px) / 2));
	padding-right: max(var(--spacing-space-020), calc((100% - 760px) / 2));
}

/* Branded chrome — shown only standalone; redundant with the panel's own
 * "Documentation" header when embedded. */
.tut-chrome {
	display: none;
}

.standalone .tut-chrome {
	display: flex;
	align-items: center;
	gap: var(--spacing-space-010);
	margin-bottom: var(--spacing-space-016);
}

.tut-chrome img {
	height: 22px;
	width: auto;
	display: block;
}

.tut-chrome .name {
	font-weight: 600;
	font-size: 14px;
	color: var(--doc-heading);
}

/* Eyebrow: breadcrumb + step counter + module pill — always visible, it's
 * the primary wayfinding, not decorative chrome. */
.tut-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--spacing-space-008);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--doc-muted);
	margin-bottom: var(--spacing-space-006);
}

.tut-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.tut-eyebrow a:hover {
	color: var(--doc-accent);
	text-decoration: underline;
}

.tut-eyebrow .sep {
	opacity: 0.5;
}

.tut-eyebrow .count {
	margin-left: auto;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
}

.chip-mode {
	display: inline-block;
	background: var(--doc-module-bg);
	color: var(--color-system-document-range-page-black);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tut-title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--spacing-space-004);
}

.tut-title .accent {
	color: var(--doc-accent);
}

.tut-lead {
	color: var(--doc-muted);
	font-size: 12.5px;
	line-height: 1.5;
	margin-bottom: var(--spacing-space-012);
}

/* Recording viewport (or, on the landing page, a static drawing preview) */
.tut-figure {
	margin: 0 0 var(--spacing-space-012);
	border: var(--border-border-w-01) solid var(--doc-border);
	border-radius: var(--doc-radius);
	overflow: hidden;
	box-shadow: var(--doc-shadow);
	background: var(--doc-surface);
}

/* On the landing page the figure lives in the scrolling body (it's taller
 * than the step recordings), so it needs the breathing room .tut-top's own
 * padding would otherwise have given it. */
.tut-body > .tut-figure {
	margin-top: var(--spacing-space-012);
}

.tut-figure-bar {
	display: flex;
	align-items: center;
	gap: var(--spacing-space-008);
	padding: var(--spacing-space-006) var(--spacing-space-010);
	background: var(--container-bg);
	font-family: "IBM Plex Mono", monospace;
}

.tut-figure-bar .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}

.tut-figure-bar .tab {
	margin-left: var(--spacing-space-006);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--color-system-document-range-page-black);
	background: var(--doc-module-bg);
	border-radius: 4px;
	padding: 1px 6px;
}

/* Neutral variant for previews that aren't tied to one module's active-pill
 * color (e.g. the landing page's finished-drawing preview). */
.tut-figure-bar .tab-preview {
	color: var(--color-system-gray-white);
	background: var(--doc-accent);
}

.tut-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.tut-figure figcaption {
	padding: var(--spacing-space-006) var(--spacing-space-010);
	font-size: 11px;
	color: var(--doc-muted);
	background: var(--doc-surface);
	border-top: var(--border-border-w-01) solid var(--doc-border);
}

/* Step list */
.tut-steps-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--spacing-space-006);
}

.tut-steps-head h2 {
	font-size: 12px;
	font-weight: 600;
	color: var(--doc-heading);
	margin: 0;
}

.tut-steps-head .hint {
	font-size: 11px;
	color: var(--doc-muted);
}

.tut-steps {
	counter-reset: step;
}

.tut-steps li {
	counter-increment: step;
	display: flex;
	gap: var(--spacing-space-010);
	padding: var(--spacing-space-008) 0;
	border-top: var(--border-border-w-01) solid var(--doc-border);
}

.tut-steps li:first-child {
	border-top: none;
}

.tut-steps li::before {
	content: counter(step);
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background: var(--doc-accent-soft);
	color: var(--doc-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 10.5px;
}

.tut-steps h3 {
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 1px;
}

.tut-steps p {
	font-size: 12px;
	color: var(--doc-muted);
	line-height: 1.45;
}

/* Inline chips referencing on-canvas objects, commands and keys */
.chip {
	display: inline-block;
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.92em;
	padding: 0 5px;
	border-radius: var(--radius-default-radius-sm);
	white-space: nowrap;
}

.chip-des {
	background: var(--doc-code-bg);
	color: var(--doc-text);
	font-weight: 600;
}

.chip-part {
	background: var(--doc-code-bg);
	color: var(--doc-text);
}

.chip-cmd {
	background: var(--doc-accent-soft);
	color: var(--doc-accent);
	font-weight: 600;
}

.chip-key {
	background: var(--doc-surface);
	color: var(--doc-heading);
	border: var(--border-border-w-01) solid var(--doc-border);
	border-bottom-width: 2px;
	font-weight: 600;
}

/* Outcome callout */
.tut-outcome {
	display: flex;
	gap: var(--spacing-space-010);
	background: var(--doc-success-bg);
	border-radius: var(--doc-radius);
	padding: var(--spacing-space-010) var(--spacing-space-012);
	margin: var(--spacing-space-012) 0;
}

.tut-outcome .ic {
	flex: none;
	color: var(--doc-success);
	margin-top: 1px;
}

.tut-outcome h4 {
	font-size: 12px;
	color: var(--doc-success);
	margin-bottom: 1px;
}

.tut-outcome p {
	font-size: 12px;
	color: var(--doc-text);
	line-height: 1.45;
}

/* Completion recap (final step) */
.tut-done {
	background: var(--doc-success-bg);
	border-radius: var(--doc-radius);
	padding: var(--spacing-space-012);
	margin: var(--spacing-space-012) 0;
}

.tut-done .top {
	display: flex;
	align-items: center;
	gap: var(--spacing-space-008);
	margin-bottom: var(--spacing-space-006);
}

.tut-done .top h3 {
	font-size: 14px;
	color: var(--doc-success);
}

.tut-done .seal {
	color: var(--doc-success);
	flex: none;
}

.tut-done p {
	font-size: 12px;
	color: var(--doc-text);
	margin-bottom: var(--spacing-space-008);
}

.tut-done .recap {
	display: grid;
	gap: var(--spacing-space-004);
}

.tut-done .recap li {
	display: flex;
	gap: var(--spacing-space-008);
	font-size: 12px;
	color: var(--doc-text);
}

.tut-done .recap b {
	color: var(--doc-success);
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
}

/* Prev/Next pager links — compact: this bar is fixed (never scrolls), so
 * every pixel it takes is a pixel lost from the scrollable step list above. */
.pg {
	display: flex;
	align-items: center;
	gap: var(--spacing-space-006);
	text-decoration: none;
	color: var(--doc-text);
	font-size: 11px;
	padding: var(--spacing-space-004) var(--spacing-space-006);
	border-radius: var(--radius-default-radius-sm);
	transition: background 0.15s ease;
	line-height: 1.2;
}

.pg:hover {
	background: var(--doc-surface);
}

.pg .k {
	display: block;
	font-size: 9px;
	color: var(--doc-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.pg .t {
	display: block;
	font-weight: 600;
	line-height: 1.25;
}

.pg.next {
	margin-left: auto;
	text-align: right;
}

.pg svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.pg-spacer {
	flex: 1;
}