/* ParagonDesigner portal pages (inc/designer-portal.php; Dev Docs/Design/designer_portal/). */

/* Login form ([insertDesignerLoginForm]): the primary button on the accessible orange (white on #FF5000 is 2.9:1;
 * on #CC3D00 it is 4.6:1), as the site's other primary buttons. */
body.pg-designer-portal #loginform .button-primary { background: var(--pg-orange-strong, #cc3d00) !important; border-color: var(--pg-orange-strong, #cc3d00) !important; color: #fff !important; }
body.pg-designer-portal #loginform .button-primary:is(:hover, :focus-visible) { background: var(--pg-orange-deep, #a33000) !important; border-color: var(--pg-orange-deep, #a33000) !important; }

/* Quick gene filter over the pre-designed gene list (designer-portal.js). Same look as the FAQ archive's filter
 * (faq-archive.css, canonical): kept in step by hand until the two share one stylesheet. */
body.pg-designer-portal .pg-gene-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pg-space-1) var(--pg-space-2); margin: var(--pg-space-3) 0 var(--pg-space-2); padding: var(--pg-space-3); background: var(--pg-surface); border-radius: var(--pg-radius-md); }
body.pg-designer-portal .pg-gene-filter label { font-weight: 700; font-size: 14px; color: var(--pg-ink); }
body.pg-designer-portal .pg-gene-filter input[type="search"] { flex: 1 1 280px; max-width: 480px; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius-sm); background: var(--pg-white); font-size: 16px; color: var(--pg-ink); }
body.pg-designer-portal .pg-gene-filter input[type="search"]:focus-visible { outline: 3px solid var(--pg-purple); outline-offset: 2px; }
body.pg-designer-portal .pg-gene-filter__status { font-size: 14px; color: var(--pg-ink-muted); }
body.pg-designer-portal .pg-gene-filter__empty { clear: both; margin: var(--pg-space-3) 0 0; padding: var(--pg-space-3); border: 1px dashed var(--pg-border-strong); border-radius: var(--pg-radius-md); text-align: center; }
body.pg-designer-portal .pg-gene-filter__clear { margin-left: var(--pg-space-1); padding: 6px 14px; border: 2px solid var(--pg-purple); border-radius: var(--pg-radius-sm); background: var(--pg-white); color: var(--pg-purple); font-weight: 700; cursor: pointer; }
/* Gene symbols at the 14 px caption size (were 10 px), on an even grid that fills the text column (the shortcode's own
 * floated boxes are 12ex x 6ex of the small text): about 13 per row on desktop, 4 on phones. Hidden cells (the filter)
 * drop out of the grid. */
body.pg-designer-portal #geneNameTable { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; margin-bottom: 48px; }
body.pg-designer-portal #geneNameTable .regularCell { float: none; width: auto; height: auto; min-height: 40px; margin: 0; padding: 8px 0; font-size: 14px; line-height: 1.5; box-sizing: border-box; }
/* Read-through names (for example BCL2L2-PABPN1) wrap after their hyphen; single symbols never break. */
body.pg-designer-portal #geneNameTable .regularCell a { overflow-wrap: normal; word-break: normal; hyphens: none; }
body.pg-designer-portal #geneNameTable .regularCell a { font-size: 14px; }
body.pg-designer-portal #geneNameTable .regularCell .tags:empty { display: none; }
@media (max-width: 767px) {
	body.pg-designer-portal .pg-gene-filter { padding: var(--pg-space-2); }
	body.pg-designer-portal #geneNameTable { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}