/* Simple dark scheme. No external fonts, images or imports. */

:root {
	color-scheme: dark;

	--bg:      #1c1c1c;
	--surface: #262626;
	--border:  #3a3a3a;
	--text:    #dcdcdc;
	--muted:   #9a9a9a;
	--accent:  #b4b4b4;
	--visited: #b49cf0;
	--code:    #e6c07b;
	--danger:  #f28b82;
	--ok:      #81c995;
	--warn:    #fdd663;

	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

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

/* [hidden] must win over display rules below (e.g. table.form, .inline-group) */
[hidden] { display: none !important; }

html {
	background: var(--bg);
	color: var(--text);
	font: 100%/1.6 var(--font-body);
}

body {
	max-width: 72ch;
	margin: 0 auto;
	padding: 2rem 1.25rem;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 2em 0 0.6em; }
h1 { font-size: 2rem;    margin-top: 0; }
h2 { font-size: 1.5rem;  }
h3 { font-size: 1.2rem;  }
h4 { font-size: 1rem;    }

p, ul, ol, pre, table, blockquote { margin: 0 0 1.2em; }

small, .muted { color: var(--muted); }

a         { color: var(--accent); text-underline-offset: 0.15em; }
a:visited { color: var(--visited); }
a:hover   { text-decoration-thickness: 2px; }

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

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 2em 0;
}

blockquote {
	padding-left: 1em;
	border-left: 3px solid var(--border);
	color: var(--muted);
}

/* Code */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

code {
	color: var(--code);
	background: var(--surface);
	padding: 0.1em 0.35em;
	border-radius: 3px;
}

pre {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.9em 1em;
	overflow-x: auto;
}
pre code { background: none; padding: 0; color: var(--text); }

/* Tables */
table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
th, td { padding: 0.45em 0.75em; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-weight: 600; }

/* Forms */
input, select, textarea, button { font: inherit; color: inherit; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }

/* Single-line controls share one height so they line up side by side.
   Checkboxes, radios, range and color pickers keep their native size.
   :where() keeps specificity at zero so the focus and button rules below win. */
:root { --control-h: 2.25rem; }

:where(button, select,
       input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"])) {
	height: var(--control-h);
	padding: 0 0.75em;
	border: 1px solid var(--border);
	border-radius: 4px;
	line-height: 1;
	vertical-align: middle;
}

/* Checkbox/radio + label: centered on the same line as the controls above */
label:has(> input[type="checkbox"], > input[type="radio"]) {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	height: var(--control-h);
	vertical-align: middle;
}
label > input[type="checkbox"], label > input[type="radio"] { margin: 0; }
input[type="checkbox"], input[type="radio"] { vertical-align: middle; }

input, select, textarea { background: var(--surface); }

textarea {
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.5em 0.75em;
	vertical-align: top;
}

/* Fields: focus shown by the border only, no extra outline ring */
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: none;
	border-color: var(--accent);
}

/* Button roles: secondary (outline) is the default for every button; one primary action per
   area (a.button.primary: "Run tests"); icon actions (button.toggle, .help-btn) have no frame
   but a hover background; page navigation uses tabs (.tabs), not buttons */
button {
	padding: 0 1em;
	background: none;
	border-color: var(--border);
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
}
button:hover    { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status helpers for test results: red = blocked, yellow = warning, green = executed */
.error { color: var(--danger); }
.warn  { color: var(--warn); }
.ok    { color: var(--ok); }

/* Keep a cell on one line, e.g. hyphenated header names */
.nowrap { white-space: nowrap; }

img, video { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* Multi-select dropdown:
   <details class="dropdown"><summary>…</summary><div class="menu"><label><input type="checkbox"> …</label></div></details> */
:root { --dropdown-w: 16em; --field-w: 12em; --request-select-w: 12em; --request-pair-w: 30.5em; }

details.dropdown { position: relative; display: inline-block; vertical-align: middle; flex: none; }
details.dropdown > summary {
	display: block;
	height: var(--control-h);
	line-height: calc(var(--control-h) - 2px);
	width: var(--dropdown-w);
	padding: 0 2em 0 0.75em;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown > summary::after {
	content: "\25BE";
	position: absolute;
	right: 0.75em;
	top: 0;
	line-height: var(--control-h);
	color: var(--muted);
}
details.dropdown[open] > summary,
details.dropdown > summary:focus-visible { border-color: var(--accent); outline: none; }
details.dropdown > .menu {
	position: absolute;
	z-index: 10;
	top: calc(100% + 2px);
	left: 0;
	min-width: 100%;
	max-height: min(32rem, 70vh);
	overflow-y: auto;
	padding: 0.25em 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
}
details.dropdown .menu label {
	display: flex;
	height: 2rem;
	padding: 0 0.75em;
	white-space: nowrap;
	cursor: pointer;
}
details.dropdown .menu label:hover { background: var(--border); }

.placeholder { color: var(--muted); }

/* Tables with dropdowns: don't clip the open menus (plain tables scroll instead) */
table.form { display: table; overflow: visible; }

/* Let long unbroken strings (URLs) wrap anywhere */
.break { overflow-wrap: anywhere; }

/* Wider page for tools and forms (prose pages keep the 72ch default) */
body.wide { max-width: 94rem; }

/* Controls placed side by side with a fixed gap */
.inline-group { display: flex; align-items: center; gap: 0.4em; }

/* Uniform widths for dropdowns and text fields in a group; the spacer stands in for a missing dropdown */
.inline-group > input[type="text"] { width: var(--field-w); flex: none; }
.dropdown-spacer { width: var(--dropdown-w); flex: none; }

/* Indented sub-row cell */
.indent { padding-left: 1.75em; }

/* Collapsible page section: <details class="section" open><summary><h2>…</h2></summary>…</details> */
details.section > summary { list-style: none; cursor: pointer; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary > h2 { display: inline-block; }

/* Icon-only toggle button (e.g. show/hide sub-rows) */
button.toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--muted);
	font-weight: normal;
}
button.toggle:hover, button.toggle:focus-visible { background: var(--border); color: var(--text); }
button.toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
button.toggle .icon { display: inline-block; transition: transform 0.15s; }

/* Off-screen but rendered: elements keep their size and keep loading.
   (display:none or a closed <details> would stop <embed>/<object> from loading.) */
.offscreen {
	position: absolute;
	left: -10000px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Controls placed directly in a section (above its table) */
details.section > .inline-group { margin: 0.4em 0 0.8em; }

/* Warning banner at the top of a page */
.banner {
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.9em 3em 0.6em 1.1em;
	background: var(--surface);
	border: 1px solid var(--warn);
	border-left-width: 4px;
	border-radius: 4px;
}
.banner h2 { margin: 0 0 0.4em; font-size: 1.15rem; color: var(--warn); }
.banner p, .banner ul, .banner ol { margin: 0 0 0.6em; }
.banner pre { margin: 0.4em 0; }
.banner-close { position: absolute; top: 0.4em; right: 0.4em; font-size: 1.3em; }

/* Parameter tables: same first two column widths, so several tables line up.
   min-width keeps room for a dropdown plus a text field in the Values column. */
/* Header builders (request and response): header column, values column; same widths in all tables */
table.params { table-layout: fixed; }
table.params th:nth-child(1), table.params td:nth-child(1) { width: 26em; }
table.params th:nth-child(2), table.params td:nth-child(2) { width: auto; }

/* Dropdown menu entries that are actions (buttons) rather than checkboxes */
details.dropdown .menu button.item {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	height: 2rem;
	padding: 0 0.75em;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--text);
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
}
details.dropdown .menu button.item:hover,
details.dropdown .menu button.item:focus-visible { background: var(--border); filter: none; outline: none; }
details.dropdown.add-header .menu { min-width: 24em; }

/* Single-choice selects in a control group keep their natural width */
.inline-group > select { flex: none; min-width: 8em; }

/* Sections placed side by side (wrap on narrow windows) */
.section-row { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 2.5em; }
.section-row > details.section, .section-row > details.subsection { flex: 0 1 auto; min-width: 0; }

/* Response header boxes: parent and child in slightly different shades */
.header-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(22em, 1fr)); gap: 1em; }
.header-box { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.header-box.parent { background: #232323; }
.header-box.child  { background: #2b2a26; }
.header-box-title { padding: 0.4em 0.8em; font-weight: 600; border-bottom: 1px solid var(--border); }
.header-box-title small { color: var(--muted); font-weight: normal; }
.header-box pre {
	margin: 0;
	padding: 0.7em 0.8em;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 0.85em;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Warning marker next to a control, e.g. a fetch method that triggers a CORS preflight */
.preflight { color: var(--danger); font-weight: 600; white-space: nowrap; }
/* Same marker in yellow: values that are configured, not measured (tooltip explains) */
.configured-mark { color: var(--warn); font-weight: 600; cursor: help; }

/* A link that looks like a button (keeps link behavior: middle-click, open in new tab) */
a.button {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--control-h);
	padding: 0 1em;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
	vertical-align: middle;
}
a.button:visited { color: var(--text); }
a.button:hover { border-color: var(--accent); }
/* Primary: the one main action of an area */
a.button.primary { background: #2e2e2e; border-color: var(--accent); }
a.button.primary:hover { background: var(--border); }
/* Secondary: same as the default button */
button.secondary { background: none; color: var(--text); border-color: var(--border); }
button.secondary:hover { border-color: var(--accent); }
.actions { margin-top: 1.2em; }

/* Blocks side by side inside one section (e.g. Script: Execution | Resource Access) */
.section-row > div { flex: 0 1 auto; min-width: 0; }
.section-row > div > h3:first-child { margin-top: 0.6em; }
/* ...that stay in one row: blocks shrink and long cell texts wrap instead of the row wrapping */
.section-row.fit { flex-wrap: nowrap; }

/* Custom header row: header-name field fills the Response header column */
input.custom-name { width: 100%; }
/* Custom response content */
#custom-body { width: 100%; font-family: var(--font-mono); font-size: 0.9em; resize: vertical; }

/* Collapsible subsection inside a section: <details class="subsection" open><summary><h3>…</h3></summary>…</details> */
details.subsection > summary { list-style: none; cursor: pointer; }
details.subsection > summary::-webkit-details-marker { display: none; }
details.subsection > summary > h3 { display: inline-block; }

/* Expander arrow of sections and subsections: a drawn triangle, one capital-letter height
   tall, sitting on the baseline, so it is centered on the heading's capitals in any font
   (0.7em fallback for browsers without the cap unit) */
details.section > summary > h2::before,
details.subsection > summary > h3::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	width: 1cap;
	height: 1cap;
	margin-right: 0.45em;
	vertical-align: baseline;
	background: var(--muted);
	clip-path: polygon(20% 0, 90% 50%, 20% 100%);
}
details.section[open] > summary > h2::before,
details.subsection[open] > summary > h3::before { clip-path: polygon(0 15%, 100% 15%, 50% 85%); }

/* Framed groups: Configuration, Response Headers, Results */
details.section.group {
	margin: 0 0 1.5em;
	padding: 0 1.25em 1em;
	border: 1px solid var(--border);
	border-radius: 6px;
}
details.section.group > summary > h2 { margin: 0.7em 0 0.3em; }

/* Group header band: full frame width, slightly lighter than the content, with a vertical
   line on the left; a separator line below it while the group is open */
details.section.group > summary {
	margin: 0 -1.25em;
	padding: 0.45em 1.25em 0.45em calc(1.25em - 4px);
	background: var(--surface);
	border-left: 4px solid var(--accent);
	border-radius: 5px;
}
details.section.group[open] > summary {
	margin-bottom: 0.4em;
	border-bottom: 1px solid var(--border);
	border-radius: 5px 5px 0 0;
}
details.section.group > summary > h2 { margin: 0; }
details.section.group:not([open]) { padding-bottom: 0; }

/* Space between the Response Headers band and its boxes, about the group's bottom padding */
details.section.group > .header-boxes { margin-top: 1.25em; }

/* Help: info buttons in dropdown menus (shown on hover/focus) and the help panel */
details.dropdown .menu .menu-row { display: flex; align-items: center; }
details.dropdown .menu .menu-row > label,
details.dropdown .menu .menu-row > button.item { flex: 1; min-width: 0; }
button.help-btn {
	flex: none;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--muted);
	font-weight: normal;
	visibility: hidden;
}
button.help-btn:hover { color: var(--text); filter: none; }
.menu-row:hover > button.help-btn, button.help-btn:focus-visible { visibility: visible; }
.inline-group > button.help-btn { visibility: visible; height: var(--control-h); }


.help-panel {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 30;
	width: min(28rem, calc(100vw - 2rem));
	max-height: 60vh;
	overflow-y: auto;
	padding: 0.8em 2.6em 0.4em 1em;
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 4px solid var(--accent);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.help-panel:focus { outline: none; }
.help-panel h2 { margin: 0 0 0.1em; font-size: 1.1rem; font-family: var(--font-mono); }
.help-panel p { margin: 0 0 0.6em; }
.help-panel .help-kind { color: var(--muted); font-size: 0.85em; }
.help-panel .help-test { color: var(--muted); }
.help-close { position: absolute; top: 0.3em; right: 0.3em; font-size: 1.3em; }

/* Results page: applied configuration (request box + parent/child header boxes, custom body below) */
.applied { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 1.25em 0 1em; }
@media (max-width: 56em) { .applied { grid-template-columns: 1fr; } }
.header-box.request { background: var(--surface); }
.applied-request { display: flex; flex-direction: column; gap: 0.5em; padding: 0.7em 0.8em; }
.applied-request code { font-family: var(--font-mono); color: var(--code); }
.header-box.custom-body pre { margin: 0; padding: 0.7em 0.8em; background: none; border: 0; border-radius: 0; font-family: var(--font-mono); font-size: 0.85em; white-space: pre-wrap; overflow-wrap: anywhere; }
.header-box-title small a { color: var(--accent); }

/* Navigation between configurator and results: tabs, same box for both, current one filled */
.tabs { display: inline-flex; margin: 0 0 1.2em; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.tab { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 6.5em; height: var(--control-h); padding: 0 1em; color: var(--muted); font-weight: 600; text-decoration: none; }
.tab + .tab { border-left: 1px solid var(--border); }
a.tab:hover, a.tab:focus-visible { background: var(--surface); color: var(--text); }
.tab.current { background: #333; color: var(--text); }

/* Help button in a section heading: always visible, sized to the heading line */
summary > button.help-btn { visibility: visible; width: auto; height: auto; padding: 0 0.2em; font-size: 1.15em; line-height: 1; vertical-align: middle; cursor: pointer; }
/* Help button inside a header box line */
pre a.inline-help { color: var(--muted); text-decoration: none; font-family: var(--font-body); cursor: pointer; }
pre a.inline-help:hover, pre a.inline-help:focus-visible { color: var(--text); }
/* Help button inside a table cell, e.g. next to Set-Cookie in the configurator */
button.help-btn.cell-help { visibility: visible; width: auto; height: auto; padding: 0 0.2em; line-height: 1; vertical-align: middle; cursor: pointer; }

/* Inline SVG icons (info, warning): size follows the text, color from the text (currentColor) */
.icon { width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex: none; }
.icon .icon-cut { fill: var(--bg); stroke: var(--bg); }
.preflight, .configured-mark { display: inline-flex; align-items: center; gap: 0.3em; vertical-align: middle; }

/* Icon actions: uniform hover background; contents of a cell centered on one line */
button.help-btn:hover, button.help-btn:focus-visible, a.inline-help:hover, a.inline-help:focus-visible { background: var(--border); color: var(--text); border-radius: 4px; }
.cell-line { display: inline-flex; align-items: center; gap: 0.35em; vertical-align: middle; }
button.toggle .icon { width: 14px; height: 14px; }
th .cell-line { white-space: nowrap; }
th button.help-btn.th-help { visibility: visible; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.help-close .icon, .banner-close .icon { width: 14px; height: 14px; }
/* Warning variant of a help button (e.g. Permissions not readable): yellow triangle */
button.help-btn.warn-help { color: var(--warn); }
button.help-btn.warn-help:hover, button.help-btn.warn-help:focus-visible { color: var(--warn); }
/* Request box: label/value pairs */
.applied-request > span.muted:not(:first-child) { margin-top: 0.4em; }
/* Configurator: request settings rows line up */

/* Request Settings: labels share one width so the controls line up; some space between rows */
/* Request settings: short labels under the Fetch / Embedded resource attributes headings, one width */
.inline-group > label[for="child-method"], .inline-group > label[for="fetch-mode"], .inline-group > label[for="crossorigin"], .inline-group > label[for="frame-allow"] { flex: none; width: 7em; white-space: nowrap; }
.inline-group:has(> label[for="crossorigin"]), .inline-group:has(> label[for="req-hn"]) { margin-top: 0.5em; }
/* Request headers table in the configurator: two columns (header, values) */
.req-title { margin: 1.2rem 0 0.4em; }
.req-title small { color: var(--muted); font-weight: normal; }
.req-list { display: flex; flex-direction: column; gap: 0.2em; }

/* Footnote under a result table (request settings that apply to it) */
/* Footnote of a result table: its caption, directly below it, as wide as the table, closed by a line */
caption.table-note { caption-side: bottom; text-align: left; padding: 0.35em 10px 0.45em; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.9em; line-height: 1.45; }
.table-note code { color: var(--code); }
.table-note .preflight { font-size: 1em; }
/* Result tables with a caption keep their natural width (the caption follows it) */
table#embeds, table#access { width: auto; }
/* Lines in a header box that aren't regular response headers of these responses */
.test-only { color: var(--muted); font-style: italic; }
/* Marker at the end of a header line: inline (not a flex box), so it stays with the last word */
.configured-mark.inline-mark { display: inline; }
.configured-mark.inline-mark .icon { vertical-align: -0.2em; }
/* Result rows: Script | Cookies, Embedded Resources | Referrer. Side-by-side tables start at the
   same height: a common header-row height (help icons and code labels can't make one taller),
   and an empty subheading where the neighbor has one (same element, same dimensions) */
.results-row { column-gap: 2.5em; }
.results-row thead th { height: 2.7em; box-sizing: border-box; }
h4.h4-spacer { visibility: hidden; }
/* Footnote marker (dagger) in a table header and its caption */
sup.fn-mark { font-size: 0.75em; margin-left: 0.15em; color: var(--muted); font-weight: normal; }
caption.table-note sup.fn-mark { margin-left: 0; }
caption.table-note button.help-btn { vertical-align: middle; }

/* Result columns switched off in the configurator: greyed out and struck through */
th.col-off, td.col-off { color: var(--muted); text-decoration: line-through; opacity: 0.6; }
th.col-off code, td.col-off code { text-decoration: line-through; }
td.off { color: var(--muted); }
/* Configurator: Result Columns rows */
/* Result Columns: label + dropdown pairs side by side, as many per row as fit */
#result-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(27em, 1fr)); gap: 0.6em 2.5em; }
#result-columns .inline-group { margin: 0; }
#result-columns .menu label.master { border-bottom: 1px solid var(--border); padding-bottom: 0.35em; margin-bottom: 0.2em; font-weight: 600; }
#result-columns .col-label { flex: none; width: 11.5em; white-space: nowrap; }
#result-columns summary.partial { color: var(--warn); }
p.note { margin: 0.2em 0 0.8em; font-size: 0.9em; }
/* text-decoration doesn't propagate into inline-flex boxes: strike the label inside the cell line */
td.col-off .cell-line, th.col-off .cell-line { text-decoration: line-through; }
/* Configurator: the page's actions below the three groups */
.page-actions { margin: 0 0 2em; }
.page-actions .actions { margin-top: 0; }
/* The first content of a group starts at the same distance below its band */
details.section.group > summary + * { margin-top: 1.2rem; }
/* Request group: Fetch method and Embedded resources side by side (wrapping when narrow) */
/* Request settings: two pairs per row (method | mode, embedded | frame allow), one per row when narrow */
.request-row { display: grid; grid-template-columns: repeat(auto-fill, var(--request-pair-w)); justify-content: start; align-items: center; gap: 0.6em 1.5em; }
.request-row > .inline-group { margin: 0; }
/* (more specific than the earlier top margin of the crossorigin row) */
.request-row > .inline-group:has(> label) { margin: 0; }
/* The hidden Preflight marker keeps its space, so nothing in the row moves when it appears */
#preflight[hidden] { display: inline-flex !important; visibility: hidden; }

/* Header builders: the value dropdown and the free-text field grow into free space (up to a
   comfortable width) and shrink when the window gets narrow, so the table never leaves its box */
table.params td.values > .inline-group { flex-wrap: nowrap; min-width: 0; }
table.params td.values > .inline-group > details.dropdown,
table.params td.values > .inline-group > .dropdown-spacer { flex: 1 1 22em; width: auto; min-width: 6em; max-width: 24em; }
table.params td.values > .inline-group > input[type="text"] { flex: 1 1 16em; width: auto; min-width: 4em; max-width: 20em; }
/* the header column gives way too, and long header names wrap instead of overflowing */
table.params th:nth-child(1), table.params td:nth-child(1) { width: min(26em, 40%); }
table.params td:first-child { white-space: normal; }
table.params td:first-child .cell-line > code { min-width: 0; overflow-wrap: anywhere; }
table.params td:first-child .cell-line > input.custom-name { min-width: 4em; flex: 1 1 auto; width: auto; }
/* ...and the visible dropdown field follows its flexible width (otherwise it keeps 16em) */
table.params td.values > .inline-group > details.dropdown > summary { width: 100%; box-sizing: border-box; }

/* Result menu: a small toolbar next to the cursor over a result cell */
.result-menu { position: absolute; z-index: 60; display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.result-menu button.toggle .icon, .result-menu button.help-btn .icon { width: 16px; height: 16px; }
.result-menu button.help-btn.cell-help { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.result-menu button[disabled] { opacity: 0.35; cursor: not-allowed; background: none; }
.result-menu button.done { color: var(--ok); }
/* result cells can be focused (keyboard opens the menu) */
td[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* help panel: the code that implements a test */
pre.help-code { margin: 0.6em 0; padding: 0.6em 0.7em; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-mono); font-size: 0.85em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
/* results page in single-test-case mode */
.test-case-note { margin: 0 0 1.2em; padding: 0.55em 0.8em; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }
.test-case-note code { color: var(--code); }

/* Request settings: the custom allow value takes the remaining width of its pair */
#frame-allow-value { flex: none; width: 8em; }
/* the four Request selects share one width, like the other dropdowns */
#child-method, #fetch-mode, #crossorigin, #frame-allow { width: var(--request-select-w); min-width: 0; flex: none; }
table#permissions { width: auto; }
/* help panel: a requested URL wraps anywhere instead of widening the panel */
code.help-url { overflow-wrap: anywhere; color: var(--code); }
#crossorigin-value { flex: none; width: 8em; }
/* Links to the results page disabled (parent Content-Type isn't text/html) */
a.button.disabled, a.tab.disabled, button.disabled, .actions button:disabled { opacity: 0.45; cursor: not-allowed; }
/* Notice page on the auxiliary test hosts */
.aux-note { max-width: 46em; padding: 0.9em 1.1em; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: 4px; }
.aux-note p:last-child { margin-bottom: 0; }
/* The Preflight marker opens its help: a help button that keeps the marker's look */
button.help-btn.preflight { visibility: visible; width: auto; height: auto; padding: 0 0.25em; margin: 0; border: 0; border-radius: 3px; background: none;
	color: var(--danger); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3em; }
button.help-btn.preflight:hover { background: var(--border); }
button.help-btn.preflight:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Header builders: each row's actions live in its hover menu (remove, info, restore). The
   remove buttons stay in the rows (the menu uses them), but hidden. */
table.params td:first-child .cell-line > button[title="Remove this header"] { display: none; }
table.params td:first-child code, table.params td.indent code { cursor: pointer; }
table.params td:first-child code:hover, table.params td.indent code:hover { text-decoration: underline dotted; text-underline-offset: 0.2em; }

/* Custom Response: Text | Hex switch, hex input and display */
.body-mode { margin: 0.2rem 0 0.4em; }
.body-mode .mode-btn { padding: 0.15em 0.8em; border: 1px solid var(--border); background: none; color: var(--muted); font: inherit; cursor: pointer; }
.body-mode .mode-btn:first-of-type { border-radius: 4px 0 0 4px; }
.body-mode .mode-btn + .mode-btn { border-left: 0; border-radius: 0 4px 4px 0; }
.body-mode .mode-btn[aria-pressed="true"] { background: #333; color: var(--text); }
#body-note { font-size: 0.9em; margin-left: 0.6em; }
#body-note.warn-text { color: var(--warn); }
textarea#custom-body.hex, pre.hex { font-family: var(--font-mono); letter-spacing: 0.02em; }
pre.hex { white-space: pre-wrap; overflow-wrap: anywhere; }