/**
 * post-form-contract.css
 *
 * Canonical posting-form presentation fixes (loaded after theme CSS).
 * QR compact presentation is excluded via :not(.qr-compact).
 */

form[name="post"]:not(.qr-compact) select[name="post_flag"]{
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	min-width: 12em;
	min-width: max(12em, -webkit-min-content);
	min-width: max(12em, min-content);
	field-sizing: content;
	line-height: normal;
	min-height: 2em;
	padding-block: 0.2em;
	padding-inline: 0.35em;
	overflow: visible;
}

/* --- Help affordance + floating details (posting form only) --- */

form[name="post"]:not(.qr-compact) .help-bubble{
	color: var(--theme-help-bubble-fg, var(--theme-help-bubble-color, var(--theme-content-fg)));
	background: var(--theme-help-bubble-bg);
	border: 1px solid var(--theme-help-bubble-border, var(--theme-reply-border));
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}

form[name="post"]:not(.qr-compact) .help-details{
	background-color: var(--theme-help-details-bg, var(--theme-overlay-bg, var(--theme-reply-bg)));
	background-image: var(--theme-help-details-bg-image, none);
	color: var(--theme-help-details-fg, var(--theme-content-fg));
	border: 1px solid var(--theme-help-details-border, var(--theme-reply-border, currentColor)) !important;
	box-shadow: var(--theme-floating-panel-shadow) !important;
	border-radius: 3px;
}

form[name="post"]:not(.qr-compact) .help-bubble:hover + .help-details,
form[name="post"]:not(.qr-compact) .help-details:hover{
	z-index: 25;
	overflow: auto;
	max-height: min(70vh, 32rem);
	-webkit-overflow-scrolling: touch;
}

form[name="post"]:not(.qr-compact) textarea ~ .help-details.markup-doc{
	width: max-content;
	min-width: min(18rem, calc(100svw - 2rem));
	max-width: min(26rem, calc(100svw - 2rem));
}

form[name="post"]:not(.qr-compact) .help-details:not(.markup-doc){
	width: min(22rem, calc(100svw - 2rem));
	max-width: min(22rem, calc(100svw - 2rem));
}

/* Markup help: vertical contract isolated from theme table/list rules */

form[name="post"]:not(.qr-compact) .help-details.markup-doc{
	box-sizing: border-box;
	columns: auto;
	column-width: auto;
	column-count: 1;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc dl{
	display: block;
	margin: 0 0 0.85em;
	padding: 0;
	break-inside: auto;
	-webkit-column-break-inside: auto;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc dl:last-child{
	margin-bottom: 0;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc dt{
	display: block;
	margin: 0 0 0.35em;
	padding: 0;
	font-size: 1.05em;
	font-weight: bold;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc dd{
	display: block;
	margin: 0 0 0.4em;
	padding: 0;
	list-style: none;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc dd:last-child{
	margin-bottom: 0;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc .dd-title{
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
	gap: 0.25em 0.75em;
	align-items: baseline;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc .dd-title code{
	display: inline-block;
	white-space: nowrap;
	font-family: monospace;
	font-size: 0.92em;
	word-break: normal;
	overflow-wrap: normal;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc .dd-title code + code{
	margin-left: 0;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc kbd.shortcut{
	float: none;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.82em;
	line-height: inherit;
	opacity: 0.72;
	white-space: nowrap;
	text-align: right;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc .dd-example{
	display: block;
	margin: 0.15em 0 0;
	padding: 0 0 0 1ch;
	font-size: 0.9em;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

form[name="post"]:not(.qr-compact) .help-details.markup-doc p{
	margin: 0;
}

form[name="post"]:not(.qr-compact) .help-details table,
form[name="post"]:not(.qr-compact) .help-details thead,
form[name="post"]:not(.qr-compact) .help-details tbody,
form[name="post"]:not(.qr-compact) .help-details tr,
form[name="post"]:not(.qr-compact) .help-details th,
form[name="post"]:not(.qr-compact) .help-details td{
	display: block;
	width: auto;
	float: none;
	white-space: normal;
}

/* Low-emphasis post-form microcopy (checkbox labels, inline options). */
form[name="post"]:not(.qr-compact) label:has(> input[type="checkbox"]),
form[name="post"]:not(.qr-compact) label:has(> input[type="radio"]){
	color: var(--theme-form-muted-fg, var(--theme-content-fg));
}

/* Board post-form options: stable two-column grid from first paint. */
form[name="post"]:not(.qr-compact) .post-form-options{
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 2em;
	row-gap: 0;
	align-items: start;
	max-width: 100%;
}

form[name="post"]:not(.qr-compact) .mature_post_button{
	display: none;
}

form[name="post"]:not(.qr-compact) .post-form-option-row{
	display: contents;
}

form[name="post"]:not(.qr-compact) .post-form-option-public{
	grid-column: 1;
}

form[name="post"]:not(.qr-compact) .post-form-option-mod{
	grid-column: 2;
}

form[name="post"]:not(.qr-compact) .post-form-option-row-spoiler > .post-form-option-public,
form[name="post"]:not(.qr-compact) .post-form-option-row-spoiler > .post-form-option-mod{
	grid-row: 1;
}

form[name="post"]:not(.qr-compact) .post-form-option-row-mature > .post-form-option-public,
form[name="post"]:not(.qr-compact) .post-form-option-row-mature > .post-form-option-mod{
	grid-row: 2;
}

form[name="post"]:not(.qr-compact) .post-form-option-row-political > .post-form-option-public,
form[name="post"]:not(.qr-compact) .post-form-option-row-political > .post-form-option-mod{
	grid-row: 3;
}

@media (max-width: 36rem){
	form[name="post"]:not(.qr-compact) .post-form-options{
		grid-template-columns: minmax(0, max-content);
		column-gap: 0;
	}

	form[name="post"]:not(.qr-compact) .post-form-option-mod{
		grid-column: 1;
	}

	form[name="post"]:not(.qr-compact) .post-form-option-row-spoiler > .post-form-option-mod{
		grid-row: 4;
	}

	form[name="post"]:not(.qr-compact) .post-form-option-row-mature > .post-form-option-mod{
		grid-row: 5;
	}

	form[name="post"]:not(.qr-compact) .post-form-option-row-political > .post-form-option-mod{
		grid-row: 6;
	}
}

/*
 * Mobile: posting-form table/help panels must not widen the layout viewport.
 * Board/thread index pages include the full post form; min(22rem, 100vw) can exceed
 * the small viewport when vw tracks an already-expanded layout width (navbar then
 * stretches with the page). Use svw + table max-width so navbar matches home/thread.
 */
@media screen and (max-width: 480px) {
	form[name="post"]:not(.qr-compact) {
		max-width: 100%;
		box-sizing: border-box;
		/* Contain intrinsic table/help overflow without squashing columns via fixed layout. */
		overflow-x: clip;
	}

	form[name="post"]:not(.qr-compact) table {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	form[name="post"]:not(.qr-compact) table th {
		width: 1%;
		white-space: nowrap;
		vertical-align: top;
	}

	form[name="post"]:not(.qr-compact) input[type="text"],
	form[name="post"]:not(.qr-compact) textarea,
	form[name="post"]:not(.qr-compact) select {
		max-width: 100%;
		box-sizing: border-box;
	}

	form[name="post"]:not(.qr-compact) input[type="text"],
	form[name="post"]:not(.qr-compact) textarea {
		width: min(220px, 100%);
	}

	/*
	 * Help panels are position:absolute inside position:relative td cells.
	 * Intrinsic widths (22rem / max-content) can extend past the cell and widen
	 * document scrollWidth while visibility:hidden — board index then shows blank
	 * horizontal scroll because thread rows stay narrow. Clip at the cell.
	 */
	form[name="post"]:not(.qr-compact) table td:has(.help-details) {
		overflow-x: clip;
	}

	form[name="post"]:not(.qr-compact) .help-details {
		box-sizing: border-box;
		max-width: min(22rem, calc(100svw - 2rem), 100%);
	}

	form[name="post"]:not(.qr-compact) textarea ~ .help-details.markup-doc {
		width: min(26rem, calc(100svw - 2rem), 100%);
		min-width: 0;
		max-width: min(26rem, calc(100svw - 2rem), 100%);
	}

	form[name="post"]:not(.qr-compact) .help-details:not(.markup-doc) {
		width: min(22rem, calc(100svw - 2rem), 100%);
		max-width: min(22rem, calc(100svw - 2rem), 100%);
	}
}