/* rm-page-developer.css - the developer documentation page (menu.developer.php), Step 8 (6 Oct 2026). Tokens only (UI Code Style
   Guide 4.1); the layout: a table of contents that stays in view beside the text from 992 px (the site's desktop header), above
   the text as a CONTENTS menu below that. Code blocks scroll inside themselves, so the page never scrolls sideways (320 px up). */

/* ---- The page frame (was the page's <style> element and the logo's style attributes) ---- */

.rm-page-developer,
.rm-page-developer .my_background_image { background-color: var(--rm-page-dark); }

/* The theme clips #content (overflow: hidden), which would stop the table of contents from staying in view (position: sticky
   needs no clipping box between it and the window). 'clip' cuts the same overflow without that effect; only an id rule can
   override the theme's id rule. */
.rm-page-developer #content { overflow: clip; }

.rm-developer__logo {
	transform: scale(0.6);
	transform-origin: left;
}

.rm-developer__logo--retina { transform-origin: center; }

/* ---- Layout ---- */

.rm-developer {
	display: grid;
	max-width: 1500px;							/* lines stay readable on wide screens (the container grows to 4K) */
	margin: 0 auto;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rm-space-4);
	color: var(--rm-light);
	font-size: var(--rm-font-size-body);
	line-height: var(--rm-line-height);
}

.rm-developer__main { min-width: 0; }

.rm-developer__section { margin-bottom: var(--rm-space-8); }

.rm-developer h1,
.rm-developer h2,
.rm-developer h3,
.rm-developer h4 {
	color: var(--rm-lighter);
	scroll-margin-top: var(--rm-space-8);
}

.rm-developer h1 {
	margin-bottom: var(--rm-space-3);
	font-size: var(--rm-font-size-h1);
}

.rm-developer h2 {
	margin: 0 0 var(--rm-space-3);
	padding-bottom: var(--rm-space-2);
	border-bottom: var(--rm-border-width) solid var(--rm-white-10);
	font-size: var(--rm-font-size-h2);
}

.rm-developer h3 {
	margin: var(--rm-space-5) 0 var(--rm-space-2);
	font-size: var(--rm-font-size-h3);
}

.rm-developer [id] { scroll-margin-top: var(--rm-space-8); }

.rm-developer p,
.rm-developer ul,
.rm-developer ol,
.rm-developer dl { margin-bottom: var(--rm-space-3); }

.rm-developer li { margin-bottom: var(--rm-space-1); }

.rm-developer__lead {
	color: var(--rm-lighter);
	font-size: 1.1rem;
}

/* inline code; code blocks reset it below */
.rm-developer code {
	padding: 1px var(--rm-space-1);
	border-radius: var(--rm-radius-sm);
	background-color: var(--rm-white-08);
	color: var(--rm-lighter);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

/* links: the lighter Recuro orange for text links on dark backgrounds (Step 7, contrast at least 4.5:1); hover as the site's dark areas */
.rm-developer a { color: var(--rm-link-on-dark); }
.rm-developer a:hover { color: var(--rm-lighter); }
/* a code word that is a link looks like one */
.rm-developer a code { color: inherit; }

/* ---- The table of contents ---- */

.rm-developer__toc {
	position: sticky;
	top: 0;
	z-index: var(--rm-z-raised-2);
	align-self: start;
	border: var(--rm-border-width) solid var(--rm-dark);
	border-radius: var(--rm-radius);
	background-color: var(--rm-darker);
	font-size: var(--rm-font-size-small);
}

.rm-developer__toc-toggle {
	display: block;
	width: 100%;
	padding: var(--rm-space-2) var(--rm-space-3);
	border: 0;
	background: transparent;
	color: var(--rm-lighter);
	font-size: var(--rm-font-size-button);
	font-weight: var(--rm-font-weight-bold);
	letter-spacing: var(--rm-letter-spacing);
	text-align: left;
}

.rm-developer__toc-toggle::after {
	content: '\25BE';
	float: right;
}

.rm-developer__toc--open .rm-developer__toc-toggle::after { content: '\25B4'; }

.rm-developer__toc-toggle:focus-visible,
.rm-developer__toc-toggle-group:focus-visible,
.rm-developer__toc-all:focus-visible,
.rm-developer__toc-link:focus-visible,
.rm-developer__anchor:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 2px var(--rm-accent);		/* (full strength: the orange at 50 % was 1.6-1.9:1 - C-33) */
}

.rm-developer__toc-list {
	max-height: 70vh;
	margin: 0;
	padding: 0 var(--rm-space-3) var(--rm-space-2) var(--rm-space-2);
	overflow-y: auto;
	list-style: none;
}

/* closed on phones and tablets once the script runs (without it the list simply stays open) */
.rm-developer__toc--js:not(.rm-developer__toc--open) .rm-developer__toc-list { display: none; }

/* The tree (15 Oct 2026, owner: "make the left menu like a collapsable tree"): each entry a row - a group's button (a chevron that
   turns when the group opens) or a space of the same width, then its link - so nothing moves when the script adds the buttons.
   Without the script every list stays open and the buttons stay invisible; the general list spacing of .rm-developer does not apply */
.rm-developer .rm-developer__toc-list,
.rm-developer .rm-developer__toc-sub,
.rm-developer .rm-developer__toc-item { margin: 0; }

.rm-developer__toc-sub {
	padding-left: var(--rm-space-3);
	list-style: none;
}

.rm-developer__toc-sub[hidden] { display: none; }

.rm-developer__toc-row {
	display: flex;
	align-items: flex-start;
}

.rm-developer__toc-toggle-group,
.rm-developer__toc-spacer {
	flex: 0 0 auto;
	width: 22px;
	height: 26px;
}

.rm-developer__toc-toggle-group {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--rm-radius-sm);
	background: transparent;
	color: var(--rm-grey-aa);
	visibility: hidden;
	cursor: pointer;
}

.rm-developer__toc--tree .rm-developer__toc-toggle-group { visibility: visible; }

.rm-developer__toc-toggle-group:hover { color: var(--rm-white); }

.rm-developer__toc-chevron {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateX(-1px) rotate(-45deg);
	transition: transform var(--rm-duration-fast);
}

.rm-developer__toc-toggle-group[aria-expanded="true"] .rm-developer__toc-chevron { transform: translateY(-2px) rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
	.rm-developer__toc-chevron { transition: none; }
}

/* (written with .rm-developer: the page's link colour, .rm-developer a, would win otherwise) */
.rm-developer .rm-developer__toc-link {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 3px var(--rm-space-1);
	border-left: 2px solid transparent;
	color: var(--rm-light);
	overflow-wrap: anywhere;
}

.rm-developer .rm-developer__toc-list > .rm-developer__toc-item > .rm-developer__toc-row > .rm-developer__toc-link {
	color: var(--rm-lighter);
	font-weight: var(--rm-font-weight-bold);
}

.rm-developer .rm-developer__toc-link:hover,
.rm-developer .rm-developer__toc-list .rm-developer__toc-link--active { color: var(--rm-white); }

/* the groups the marked entry is in */
.rm-developer .rm-developer__toc-link--trail { color: var(--rm-lighter); }

.rm-developer .rm-developer__toc-link--active { border-left-color: var(--rm-orange); }

/* a call of the reference: its method small, its path as code */
.rm-developer__toc-method {
	color: var(--rm-grey-aa);
	font-size: var(--rm-font-size-xsmall);
	font-weight: var(--rm-font-weight-bold);
	letter-spacing: var(--rm-letter-spacing);
}

.rm-developer__toc-link--active .rm-developer__toc-method { color: var(--rm-lighter); }

/* (a path breaks after its slashes - the page puts a <wbr> after each - and inside a part only when that alone is too long) */
.rm-developer__toc-path {
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: break-word;
}

/* Expand all / Collapse all: shown once the script has made the tree (and, on phones, while the menu is open) */
.rm-developer__toc-tools {
	display: none;
	flex-wrap: wrap;
	gap: var(--rm-space-1);
	padding: 0 var(--rm-space-3) var(--rm-space-2);
}

.rm-developer__toc--tree.rm-developer__toc--open .rm-developer__toc-tools { display: flex; }

.rm-developer__toc-all {
	padding: 2px var(--rm-space-2);
	border: var(--rm-border-width) solid var(--rm-dark);
	border-radius: var(--rm-radius);
	background: transparent;
	color: var(--rm-light);
	font-size: var(--rm-font-size-xsmall);
	font-weight: var(--rm-font-weight-bold);
	letter-spacing: var(--rm-letter-spacing);
	text-transform: uppercase;
}

.rm-developer__toc-all:hover {
	border-color: var(--rm-grey-88);
	color: var(--rm-white);
}

/* ---- Code blocks ---- */

.rm-developer__code {
	--rm-developer-code-gold: #e8bf6a;		/* (railscasts' own gold for its former blue scopes, not a brand colour: code highlighting only) */

	margin: var(--rm-space-2) 0 var(--rm-space-4);
	border: var(--rm-border-width) solid var(--rm-dark);
	border-radius: var(--rm-radius);
	background-color: var(--rm-darker);
}

.rm-developer__code-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rm-space-2);
	padding: var(--rm-space-1) var(--rm-space-1) var(--rm-space-1) var(--rm-space-2);
	border-bottom: var(--rm-border-width) solid var(--rm-dark);
	background-color: var(--rm-dark);
	color: var(--rm-light);
	font-size: var(--rm-font-size-xsmall);
}

.rm-developer__code-label { min-width: 0; }

.rm-developer__code-head .rm-clip-btn { margin: 0; }			/* (the shared copy button: rm-components.css) */

.rm-developer__code pre {
	max-width: 100%;
	margin: 0;
	overflow-x: auto;
	font-size: var(--rm-font-size-small);
}

/* (owner's colour rule, 6 Oct 2026: green may stay in the code examples, blue may not - railscasts' blue scopes in its gold, its
   lavender params in the code's own colour; written stronger than railscasts.css, which loads after this file) */
.rm-developer__code pre code .hljs-attr,
.rm-developer__code pre code [class~="hljs-built_in"],
.rm-developer__code pre code .hljs-symbol,
.rm-developer__code pre code .hljs-bullet,
.rm-developer__code pre code .hljs-link { color: var(--rm-developer-code-gold); }
.rm-developer__code pre code .hljs-params { color: inherit; }
/* (Chrome makes a scrolling code block a tab stop: its keyboard focus is shown inside it; !important beats rm-base.css's
   :focus { outline: none !important }) */
.rm-developer__code :is(pre, code):focus-visible { outline: 2px solid var(--rm-accent) !important; outline-offset: -2px; }
/* (higher than highlight.js' own .hljs background, which loads after this file) */
.rm-developer__code pre code,
.rm-developer__code pre code.hljs {
	display: block;
	padding: var(--rm-space-2) var(--rm-space-3);
	border-radius: 0;
	background-color: var(--rm-darker);
	color: var(--rm-lighter);
	font-size: inherit;
	white-space: pre;
	overflow-wrap: normal;
}

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

.rm-developer__table-wrap {
	max-width: 100%;
	margin-bottom: var(--rm-space-4);
	overflow-x: auto;
}

.rm-developer__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rm-font-size-small);
}

.rm-developer__table th,
.rm-developer__table td {
	padding: var(--rm-space-1) var(--rm-space-2);
	border-bottom: var(--rm-border-width) solid var(--rm-white-10);
	text-align: left;
	vertical-align: top;
}

.rm-developer__table th { color: var(--rm-lighter); }

.rm-developer__table--errors tr:target { background-color: var(--rm-white-08); }

/* ---- The reference ---- */

.rm-developer__group { padding-top: var(--rm-space-2); }

.rm-developer__endpoint {
	margin-top: var(--rm-space-4);
	padding-top: var(--rm-space-3);
	border-top: var(--rm-border-width) solid var(--rm-white-10);
}

.rm-developer__endpoint-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rm-space-1) var(--rm-space-2);
	margin: 0 0 var(--rm-space-1);
	font-size: var(--rm-font-size-h4);
}

.rm-developer__method {
	padding: 2px var(--rm-space-2);
	border-left: 3px solid var(--rm-grey-88);
	border-radius: var(--rm-radius);
	background-color: var(--rm-dark);
	color: var(--rm-white);
	font-size: var(--rm-font-size-xsmall);
	font-weight: var(--rm-font-weight-bold);
	letter-spacing: var(--rm-letter-spacing);
}

/* brand colours only (owner, 6 Oct 2026: no green/red outside the code examples): reading grey, changing orange, removing white */
.rm-developer__method--get, .rm-developer__method--head { border-left-color: var(--rm-grey-aa); }

.rm-developer__method--post, .rm-developer__method--put, .rm-developer__method--patch { border-left-color: var(--rm-orange); }

.rm-developer__method--delete { border-left-color: var(--rm-white); }

.rm-developer__path {
	min-width: 0;
	color: var(--rm-lighter);
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

.rm-developer__anchor {
	color: var(--rm-grey-88);
	font-size: var(--rm-font-size-small);
}

.rm-developer__meta {
	color: var(--rm-grey-aa);
	font-size: var(--rm-font-size-small);
}

.rm-developer__errors { font-size: var(--rm-font-size-small); }

/* ---- The beginners' parts (15 Oct 2026): glossary, questions, parameter and field tables ---- */

.rm-developer__caption {
	caption-side: top;
	padding: 0 0 var(--rm-space-1);
	color: var(--rm-lighter);
	font-weight: var(--rm-font-weight-bold);
	text-align: left;
}

/* (the first column of a table names its row: a th, in the weight of the other cells) */
.rm-developer__table tbody th { font-weight: normal; }

.rm-developer__table--params tbody th { min-width: 9rem; }

/* (a field or parameter name stays on one line beside its columns; on phones the rows stack below 768 px) */
@media (min-width: 768px) {
	.rm-developer__table tbody th code { white-space: nowrap; overflow-wrap: normal; }
}

.rm-developer__glossary dt,
.rm-developer__faq dt {
	margin-top: var(--rm-space-2);
	color: var(--rm-lighter);
	font-weight: var(--rm-font-weight-bold);
}

.rm-developer__glossary dd,
.rm-developer__faq dd { margin: 0 0 var(--rm-space-2); }

.rm-developer__example {
	display: block;
	color: var(--rm-grey-aa);
	font-size: var(--rm-font-size-small);
}

.rm-developer__label {
	color: var(--rm-grey-aa);
	font-size: var(--rm-font-size-small);
}

.rm-developer__use { color: var(--rm-lighter); }

/* Phones and small tablets: a table of DevTable() becomes one block per row - the row's name, then each cell with its column's name
   (data-label) before it - instead of columns too narrow to read (the 5-column parameter and error tables) */
@media (max-width: 767.98px) {
	.rm-developer__table--stack thead { display: none; }

	.rm-developer__table--stack,
	.rm-developer__table--stack tbody,
	.rm-developer__table--stack tr,
	.rm-developer__table--stack th,
	.rm-developer__table--stack td { display: block; width: 100%; }

	.rm-developer__table--stack tr {
		padding: var(--rm-space-2) 0;
		border-bottom: var(--rm-border-width) solid var(--rm-white-10);
	}

	.rm-developer__table--stack th,
	.rm-developer__table--stack td {
		padding: 0 0 var(--rm-space-1);
		border: 0;
	}

	.rm-developer__table--stack tbody th { font-weight: var(--rm-font-weight-bold); }

	.rm-developer__table--stack td[data-label]::before {
		content: attr(data-label) ": ";
		color: var(--rm-grey-aa);
	}
}

/* DOC-28 (15 Oct 2026): phones and small tablets wrap a long code line inside its block - 105 of 127 blocks scrolled sideways
   without a hint (the PowerShell lines were cut at the right edge); the copy button still copies every line whole */
@media (max-width: 767.98px) {
	.rm-developer__code pre code,
	.rm-developer__code pre code.hljs { white-space: pre-wrap; overflow-wrap: anywhere; }
}

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

@media (max-width: 575.98px) {
	.rm-developer h1 { font-size: var(--rm-font-size-h2); }
	.rm-developer h2 { font-size: var(--rm-font-size-h3); }
	.rm-developer h3 { font-size: var(--rm-font-size-h4); }
	.rm-developer__lead { font-size: var(--rm-font-size-body); }
	.rm-developer__code pre code,
	.rm-developer__code pre code.hljs { padding: var(--rm-space-2); }
}

/* ---- Desktops: the contents in a column beside the text, in view below the sticky header (60 px) ---- */

@media (min-width: 992px) {
	.rm-developer {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--rm-space-6);
	}

	.rm-developer [id],
	.rm-developer h1,
	.rm-developer h2,
	.rm-developer h3,
	.rm-developer h4 { scroll-margin-top: calc(60px + var(--rm-space-4)); }

	.rm-developer__toc {
		top: calc(60px + var(--rm-space-3));
		max-height: calc(100vh - 60px - var(--rm-space-5));
		overflow-y: auto;
		border: 0;
		background: transparent;
	}

	.rm-developer__toc-toggle { display: none; }

	.rm-developer__toc--tree .rm-developer__toc-tools {
		display: flex;
		padding: 0 0 var(--rm-space-2);
	}

	.rm-developer__toc-list,
	.rm-developer__toc--js:not(.rm-developer__toc--open) .rm-developer__toc-list {
		display: block;
		max-height: none;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1200px) {
	.rm-developer { grid-template-columns: 250px minmax(0, 1fr); }
}

/* (wide desktops: room for the reference's longer paths in the tree) */
@media (min-width: 1720px) {
	.rm-developer {
		max-width: 1600px;
		grid-template-columns: 300px minmax(0, 1fr);
	}
}