/* New UI preview (Nov 2026): the part all the new designs share. Loaded by sunshine_includes/header.php (ui_header_html()
   in ui_skin.php) only when a new design is on, after the old theme's style sheets, which it overrides.
   The colors, fonts and the place of the menu are in design_a.css (Design A), blue_sky.css (Designs B and C: what they
   share), design_b.css and design_c.css (the --names below).
   media="screen": printing is not changed. Pages are not edited: these rules restyle what the pages already print
   (#hd header, #navigation menu, #bd page, #pageName title, #zWrap content, #ft footer). */

/* ---------- the page ---------- */
html { background-color: var(--bg) !important; min-height: 100%; padding-bottom: 0; -webkit-text-size-adjust: 100%; }
body { background-image: none !important; background-color: transparent; }
#body { background-image: none; font-family: var(--body-font); font-size: 15px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; }
#doc { width: auto; margin: 0; background: none; background-image: none; min-height: 100vh; display: flex; flex-direction: column; }
#wrapper { flex: 1 0 auto; }

.ui-skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 0 0 8px 0; }
.ui-skip:focus { left: 0; }

/* ---------- header ---------- */
#hd.ui-hd { float: none; width: auto; min-height: 0; overflow: visible; background-image: none; background-color: var(--hd-bg); color: var(--hd-ink); }
.ui-hd-in { display: flex; align-items: center; gap: 14px; max-width: var(--page-max); margin: 0 auto; padding: 0 24px; box-sizing: border-box; min-height: var(--hd-h); }
#body a.ui-brand, #body a.ui-brand:link, #body a.ui-brand:visited { display: flex; align-items: center; gap: 12px; color: var(--hd-ink); text-decoration: none; }
/* the Sunshine logo: the sunflowers of the banner (images/sunshine_logo_2x.png, cut in a left and a right piece: ui/logo_left.png,
   ui/logo_right.png) on the banner's yellow, and between them the caption as text in the design's own type face */
.ui-logo { display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; height: var(--logo-h);
	padding: 0 calc(var(--logo-h) * 1.12) 0 calc(var(--logo-h) * .93);
	background: url(logo_left.png) left center / auto 100% no-repeat, url(logo_right.png) right center / auto 100% no-repeat, #ffcf00; }
.ui-logo-name { font-family: var(--head-font); font-weight: var(--brand-weight); font-size: calc(var(--logo-h) * var(--brand-size, .38)); line-height: 1; letter-spacing: var(--brand-spacing);
	color: var(--brand-ink, #d42a0a); white-space: nowrap; }
.ui-brand-tag { font-size: 13px; color: var(--hd-soft); white-space: nowrap; }
.ui-user { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--hd-soft); min-width: 0; }
.ui-user-id { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; min-width: 0; }
.ui-user-role { font-weight: 700; color: var(--hd-ink); }
.ui-user-email { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-user-last { white-space: nowrap; }
#body a.ui-signout, #body a.ui-signout:link, #body a.ui-signout:visited { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
	border: 1px solid var(--signout-line); color: var(--signout-ink); background: var(--signout-bg); font-weight: 700; text-decoration: none; white-space: nowrap; }
#body a.ui-signout:hover, #body a.ui-signout:focus { background: var(--signout-hover); text-decoration: none; }
.ui-menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: -8px; border: 0; border-radius: 10px; background: transparent; color: var(--hd-ink); cursor: pointer; }
.ui-menu-btn:hover { background: var(--signout-hover); }
.ui-ico { flex: none; vertical-align: middle; }

/* the sign-in message of hheader.php */
.alert-banner { font-family: var(--body-font); font-size: 14px; padding: 10px 24px; }

/* ---------- the menu (links from sidebar.php, drawn in groups by ui_skin.php) ---------- */
#navigation.ui-nav { float: none; clear: none; display: block; width: auto; padding: 0; background: none; word-wrap: normal; }
#body #navigation.ui-nav #mainNav { border: 0; margin: 0; padding: 0; list-style: none; position: static; z-index: auto; }
#body #navigation.ui-nav #mainNav:after { content: none; }
#body #navigation.ui-nav ul { list-style: none; margin: 0; padding: 0; }
#body #navigation.ui-nav li { position: static; }
#body #navigation.ui-nav #mainNav li a, #body #navigation.ui-nav #mainNav li a:link, #body #navigation.ui-nav #mainNav li a:visited {
	display: block; border: 0; padding: 7px 12px; border-radius: var(--radius-s); font-family: var(--body-font); font-size: 14.5px; line-height: 1.3;
	color: var(--nav-ink); background: none; text-decoration: none !important; cursor: pointer; white-space: normal; }
#body #navigation.ui-nav #mainNav li a:hover, #body #navigation.ui-nav #mainNav li a:focus { background: var(--nav-hover); color: var(--nav-hover-ink, var(--nav-ink-strong)); }
#body #navigation.ui-nav #mainNav li.active > a, #body #navigation.ui-nav #mainNav li.active > a:link, #body #navigation.ui-nav #mainNav li.active > a:visited {
	background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 700; cursor: default; }
.ui-ext { opacity: .55; font-size: 12px; }
.ui-group-btn { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 0; padding: 9px 10px; border: 0; border-radius: var(--radius-s);
	background: none; color: var(--nav-ink-strong); font: 700 14.5px/1.2 var(--body-font); text-align: left; cursor: pointer; }
.ui-group-btn:hover { background: var(--nav-hover); color: var(--nav-hover-ink, var(--nav-ink-strong)); }
.ui-group-btn .ui-ico:first-child { color: var(--group-ico); }
.ui-group-title { flex: 1 1 auto; }
.ui-group-alert { flex: none; font-weight: 700; font-size: 11.5px; color: #fff; background: #d9480f; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.ui-group-count { font-weight: 600; font-size: 11.5px; color: var(--nav-soft); background: var(--nav-count-bg); border-radius: 999px; padding: 1px 7px; }
.ui-group-btn .ui-ico:last-child { width: 16px; height: 16px; color: var(--nav-soft); transition: transform .15s; }
.ui-group.is-open > .ui-group-btn .ui-ico:last-child, .ui-group.is-drop > .ui-group-btn .ui-ico:last-child { transform: rotate(180deg); }
.ui-group.has-active > .ui-group-btn { color: var(--nav-active-ink); }
.ui-group-items { display: none; }
.ui-group.is-open > .ui-group-items { display: block; }
.ui-nav-tools { position: relative; }
.ui-nav-find { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--surface); color: var(--nav-soft); }
.ui-nav-find:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.ui-nav-find input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 8px 0; font: 14px var(--body-font); color: var(--ink); -webkit-appearance: none; appearance: none; }
#body #navigation.ui-nav .ui-nav-results { margin-top: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow); }
.ui-nav-results[hidden] { display: none; }
#navigation.ui-searching .ui-group { display: none; }   /* while finding a page, only the found links show */
.ui-nav-results .ui-none { padding: 7px 12px; color: var(--nav-soft); font-size: 14px; }
.ui-nav-results small { display: block; color: var(--nav-soft); font-size: 11.5px; font-weight: 400; }
#body #navigation.ui-nav #mainNav li.ui-nav-signout { display: none; }
#body #navigation.ui-nav #mainNav li.ui-nav-signout a { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.ui-scrim { display: none; }

/* ---------- the page's content ---------- */
#bd { float: none; width: auto; min-height: 60vh; box-sizing: border-box; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
#pageName { width: auto; margin: 0 0 16px 0; overflow: visible; }
html.ui-role-0 #bd { min-height: 0; }   /* not signed in (the Sign In page): the page is as tall as what is on it */
#body h1, #body h2, #body h3, #body h4 { font-family: var(--head-font); color: var(--heading); line-height: 1.25; }
#body #pageName h2 { font-size: 27px; font-weight: var(--title-weight); letter-spacing: var(--title-spacing); }
#body h2 { font-size: 22px; font-weight: var(--title-weight); }
#body h3 { font-size: 17px; font-weight: 700; }
#body h4 { font-size: 15px; font-weight: 700; color: var(--ink); font-family: var(--body-font); }
#zWrap { overflow: visible; overflow-x: auto; }
#body #bd a:link, #body #bd a:visited { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
#body #bd a:hover, #body #bd a:focus { color: var(--link-hover); text-decoration: underline; }
#bd hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
#bd img { max-width: 100%; }

/* fields */
#bd input[type="text"], #bd input[type="password"], #bd input[type="email"], #bd input[type="number"], #bd input[type="tel"], #bd input[type="date"],
#bd input[type="search"], #bd input[type="url"], #bd input:not([type]), #bd select, #bd textarea {
	font-family: var(--body-font); font-size: var(--ctl-fs); line-height: 1.35; color: var(--ink); background-color: #fff; border: 1px solid var(--field-line); border-radius: var(--ctl-radius);
	padding: var(--ctl-pad); margin: var(--ctl-m); height: var(--ctl-h); box-sizing: var(--ctl-box); }
#bd select { padding: var(--sel-pad); }
#bd textarea, #bd select[multiple], #bd select[size]:not([size="1"]) { height: auto; }
#bd textarea { max-width: 100%; box-sizing: border-box; }
#bd input[type="text"]:focus, #bd input[type="password"]:focus, #bd input[type="email"]:focus, #bd input[type="number"]:focus, #bd input[type="tel"]:focus,
#bd input[type="date"]:focus, #bd input[type="search"]:focus, #bd input[type="url"]:focus, #bd input:not([type]):focus, #bd select:focus, #bd textarea:focus {
	outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
#bd input[disabled], #bd select[disabled], #bd textarea[disabled], #bd input[readonly] { background-color: var(--field-off); }
/* MathQuill keeps a hidden text box inside its math field: it must stay as MathQuill made it */
#bd .mq-textarea textarea, #bd .mq-editable-field textarea, #bd .mq-math-mode textarea { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }

/* the Question Bank's Add / Update / Retrieve pages (sunshine_includes/question_bank_wide.css) give their long fields
   "what is left of the line after the label", counted for the old look's small label text. Here the labels are bigger
   and the fields have padding, so the field no longer fitted and dropped under its label. The same fields, counted for
   these designs (the widths include the field's own padding and border): label and field on one line.
   The numbers are the widest label of the designs (13px text, as all tables have) plus 8px; the kit's tools/ui_qb_field_room.py measures them. */
@media screen {
	#body #zWrap input[name^="tagQECPrefixChapterTitle"], #body #zWrap input[name^="tagQECPrefixKeyWords"], #body #zWrap input[name^="tagQECPrefixAnswerText"],
	#body #zWrap input[name^="tagQECPrefixImageURL"], #body #zWrap input[name^="tagQECPrefixCorrectFeedback"], #body #zWrap input[name^="tagQECPrefixIncorrectFeedback"],
	#body #zWrap input[name^="tagQECPrefixHint"], #body #zWrap input[name^="tagQECPrefixSortOrder"], #body #zWrap input[name="title_worksheet"], #body #zWrap input[name="title_test"] {
		box-sizing: border-box; width: calc(100% - 8px); }
	#body #zWrap input[name^="tagQECPrefixChapterTitle"] { width: calc(100% - 118px); }                       /* after "Chapter & Title: +" */
	#body #zWrap input[name^="tagQECPrefixKeyWords"] { width: calc(100% - 93px); }                            /* after "Key Words: +" */
	#body #zWrap input[type="hidden"] ~ input[name^="tagQECPrefixAnswerText"] { width: calc(100% - 121px); }  /* after "Correct answer: +" */
	#body #zWrap input[type="radio"] ~ input[name^="tagQECPrefixAnswerText"] { width: calc(100% - 46px); }    /* after the round button and "+" */
	#body #zWrap input[name^="tagQECPrefixImageURL"] { width: calc(100% - 139px); }                           /* before the Upload Image button */
}

/* buttons */
#bd input[type="submit"], #bd input[type="button"], #bd input[type="reset"], #bd button {
	font-family: var(--body-font); font-size: var(--btn-fs); font-weight: var(--btn-weight, 700); line-height: 1.2; padding: var(--btn-pad); margin: var(--ctl-m); border-radius: var(--radius-btn);
	border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; -webkit-appearance: none; appearance: none; }
#bd input[type="submit"]:hover, #bd input[type="button"]:hover, #bd input[type="reset"]:hover, #bd button:hover { background: var(--btn-hover); }
#bd input[type="submit"] { background: var(--go-bg); border-color: var(--go-line, var(--go-bg)); color: var(--go-ink); }
#bd input[type="submit"]:hover { background: var(--go-hover); border-color: var(--go-line, var(--go-hover)); }
/* in a table of rows (lists with many buttons): quiet (and small: see "tables" below) */
#bd table[border="1"] input[type="submit"], #bd table[border="1"] input[type="button"], #bd table[border="1"] button {
	background: var(--btn-bg); border-color: var(--btn-line); color: var(--btn-ink); }
#bd table[border="1"] input[type="submit"]:hover, #bd table[border="1"] input[type="button"]:hover, #bd table[border="1"] button:hover { background: var(--btn-hover); }
#bd input[type="submit"]:focus-visible, #bd input[type="button"]:focus-visible, #bd button:focus-visible, #bd a:focus-visible, .ui-group-btn:focus-visible,
#body #navigation.ui-nav a:focus-visible, #body a.ui-signout:focus-visible, .ui-menu-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#bd input[type="submit"][disabled], #bd input[type="button"][disabled], #bd button[disabled] { opacity: .55; cursor: default; }
/* buttons one under the other in a cell (the Action column of the lists: Lock, Unlock, ...): a little room between them, so
   they are not stuck together. Only a button that stands under another one gets it, so a row with one button keeps its height. */
#bd :is(input[type="submit"], input[type="button"], input[type="reset"], button) + br + :is(input[type="submit"], input[type="button"], input[type="reset"], button),
#bd td > form + form > :is(input[type="submit"], input[type="button"], button):first-of-type { margin-top: 5px; }
/* the Question Bank's Update pages: the row of buttons under a question (Preview, Update, Remove, Activate, Deactivate) stands in the
   middle of its cell, with as much room under it as the line break gives above it, so it does not sit on the next question's title */
#bd td:has(> input[name="PreviewQuestions"]) { padding-bottom: 14px; }
#bd input[type="checkbox"], #bd input[type="radio"] { accent-color: var(--check, var(--go-bg)); }

/* tables. 11 Nov 2026 (Will): "make the row height the same as the original UI if there is only one line of data per row".
   The old look: 12px text, about 14px for a line, no space above and below it in a cell (its style sheet sets the cells'
   padding to 0, whatever cellpadding the page asks for), so a row of a list is 15px tall. Here: every table has 13px text
   on a 14px line and no space above and below, so a row with one line is as tall as before and a list shows as many rows
   on a screen as before. (Checked on every page by the kit's tools/ui6_row_heights.py.) */
#bd { --ctl-fs: 14px; --ctl-pad: 5px 8px; --sel-pad: 4px 6px; --ctl-m: 2px 0; --ctl-h: auto; --ctl-box: content-box; --ctl-radius: var(--radius-s); --btn-fs: 14px; --btn-pad: 7px 14px; }
/* (:where() keeps these as weak as the old style sheet's own "td { padding: 0 }": a page's own styles for its table still win) */
:where(#bd) table { font-size: 13px; line-height: 1.077; }
:where(#bd) font[size] table, :where(#bd) [style*="font-size"] table { font-size: inherit; }   /* a size set around the table (<font size="1"><table>) is kept */
#bd table { border-color: var(--table-line, var(--line));
	/* fields and buttons in a table without lines (a form): the usual size, also when that table is inside a table with lines */
	--ctl-fs: 14px; --ctl-pad: 5px 8px; --sel-pad: 4px 6px; --ctl-m: 2px 0; --ctl-h: auto; --ctl-box: content-box; --ctl-radius: var(--radius-s); --btn-fs: 14px; --btn-pad: 7px 14px; }
/* a table drawn with lines (border="1", a list): one thin line in --table-line, dark enough to show on white, on a title row and on
   a colored table (bgcolor="Lavender" on the registration pages); its fields, lists and buttons are as small as the old look's,
   so a row with a button is not taller than before either */
#bd table[border]:not([border="0"]) { border: 1px solid var(--table-line, var(--line)); border-collapse: collapse;
	--ctl-fs: 13px; --ctl-pad: 0 4px; --sel-pad: 0 2px; --ctl-m: 0; --ctl-h: 19px; --ctl-box: border-box; --ctl-radius: 3px; --btn-fs: 12.5px; --btn-pad: 2px 9px; }
#bd table td, #bd table th { border-color: var(--table-line, var(--line)); }
#bd table[border]:not([border="0"]) > tbody > tr > td, #bd table[border]:not([border="0"]) > tbody > tr > th,
#bd table[border]:not([border="0"]) > thead > tr > th, #bd table[border]:not([border="0"]) > thead > tr > td,
#bd table[border]:not([border="0"]) > tr > td, #bd table[border]:not([border="0"]) > tr > th {
	border: 1px solid var(--table-line, var(--line)); }
:where(#bd table[border]:not([border="0"])) td, :where(#bd table[border]:not([border="0"])) th { padding: 0 4px; }
:where(#bd table[border]:not([border="0"]) table:not([border]), #bd table[border]:not([border="0"]) table[border="0"]) td,
:where(#bd table[border]:not([border="0"]) table:not([border]), #bd table[border]:not([border="0"]) table[border="0"]) th { padding: 0; }   /* a table without lines inside it: as before */
#bd table[border]:not([border="0"]) > tbody > tr > th, #bd table[border]:not([border="0"]) > thead > tr > th, #bd table[border]:not([border="0"]) > tr > th {
	background: var(--th-bg); color: var(--ink); font-weight: 700; }

/* ---------- footer ---------- */
#ft { float: none; clear: both; min-height: 0; padding: 22px 24px; background-image: none; background-color: var(--foot-bg); color: var(--foot-ink); font-size: 13px; line-height: 1.5; }
#ft:after { content: none; }
#fWrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 40px; max-width: var(--page-max); margin: 0 auto; overflow: visible; box-sizing: border-box; }
#fContent, #fMisc { float: none; width: auto; text-align: left; }
#fMisc { order: 1; }
#fContent { order: 3; text-align: right; }
/* a quotation in the middle of the footer (ui/quotes.js has the list; ui.js shows one and changes it now and then) */
.ui-quote { order: 2; flex: 1 1 280px; max-width: 620px; min-height: 5.2em; margin: 0 auto; padding: 0 8px; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; justify-content: center;
	opacity: 1; transition: opacity .6s ease; }
.ui-quote.is-changing { opacity: 0; }
.ui-quote p { margin: 0; font-family: var(--head-font); font-size: 17px; line-height: 1.4; font-style: italic; color: var(--foot-quote, var(--foot-ink)); }
.ui-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--foot-accent); }
#ft #fContent span, #ft #fContent span[style] { color: var(--foot-accent) !important; }
#ft span.org { color: var(--foot-accent); }
#body #ft a:link, #body #ft a:visited { color: var(--foot-accent); }

/* the "Preview" label (only in a browser that is previewing) */
.ui-preview-chip { position: fixed; right: 14px; bottom: 14px; z-index: 150; padding: 7px 14px; border-radius: 999px; background: #1f2937; color: #fff; font: 13px var(--body-font); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#body .ui-preview-chip a:link, #body .ui-preview-chip a:visited { color: #ffd76a; text-decoration: underline; }

/* ---------- phones and narrow windows: the menu slides in from the left ---------- */
@media screen and (max-width: 900px) {
	.ui-hd-in { padding: 0 14px; gap: 10px; }
	.ui-menu-btn { display: inline-flex; }
	.ui-brand-tag, .ui-user-id, .ui-user-last { display: none; }
	#body a.ui-signout span { display: none; }
	#body a.ui-signout { padding: 8px; }
	#wrapper { display: block; }
	#wrapper > .dontprint { position: fixed; top: 0; left: 0; bottom: 0; z-index: 120; width: min(320px, 86vw); max-height: none; box-sizing: border-box; padding: 16px 12px 28px; overflow-y: auto;
		background: var(--drawer-bg); box-shadow: none; transform: translateX(-104%); transition: transform .2s ease; visibility: hidden; }
	html.ui-nav-open #wrapper > .dontprint { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.3); }
	html.ui-nav-open .ui-scrim { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(20,24,32,.45); }
	#body #navigation.ui-nav #mainNav { display: block; }
	#body #navigation.ui-nav #mainNav li.ui-nav-signout { display: block; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
	.ui-nav-tools { margin: 0 0 10px 0; }
	#bd { margin: 12px; padding: 18px 16px 22px; min-height: 50vh; }
	#body #pageName h2 { font-size: 23px; }
	#ft { padding: 18px 16px; }
	#fContent { text-align: left; }
	.ui-quote { order: 0; flex-basis: 100%; min-height: 0; text-align: left; padding: 0; margin: 0; }
	.ui-quote p { font-size: 16px; }
	.ui-preview-chip { right: 8px; bottom: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	#wrapper > .dontprint, .ui-group-btn .ui-ico:last-child, .ui-quote { transition: none; }
}
/* a small phone: the logo without its right-hand flowers, so the caption fits */
@media screen and (max-width: 430px) {
	.ui-logo { padding-right: 12px; background: url(logo_left.png) left center / auto 100% no-repeat, #ffcf00; }
}

/* The Question Bank's Add and Update pages (Will 11 Nov: "reduce the text area and input field height so that all the info
   fits on one page"): one question is a long form, so here the fields, lists and buttons are as small as in a list (the old
   look's sizes), the box for the question's text shows five lines instead of eight (it still stretches by its corner),
   and the lines of the form sit closer together. (Measured by the kit's tools/ui_qb_form_height.py.) */
#bd:has([name^="tagQECPrefix"]) table { --ctl-fs: 13px; --ctl-pad: 0 5px; --sel-pad: 0 2px; --ctl-m: 1px 0; --ctl-h: 21px; --ctl-box: border-box; --ctl-radius: 3px; --btn-fs: 12.5px; --btn-pad: 2px 10px; }
#bd:has([name^="tagQECPrefix"]) textarea[name^="tagQECPrefixQuestionText"] { height: 84px; min-height: 40px; padding: 3px 6px; line-height: 1.25; }
#body #zWrap:has([name^="tagQECPrefix"]) :is(input, select, textarea, form) { margin-bottom: 1px; }
#bd:has([name^="tagQECPrefix"]) p { margin-top: 4px; margin-bottom: 4px; }