/* BLL UI provides the shared colors, controls, cards, icons and header. */
.apps-page { display: flex; flex-direction: column; min-height: 100vh !important; }
.apps-page h1, .apps-page h2, .apps-page h3, .apps-page p { margin-top: 0; }
.apps-page button, .apps-page input, .apps-page select, .apps-page textarea { font-family: inherit; }
.bll-manager .bll-manager-page .bll-header { padding: 0; }
.apps-header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; width: 100%; max-width: var(--bll-page-width); min-height: var(--bll-header-height); margin: 0 auto; padding: 12px var(--bll-page-gutter); }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.header-actions form { margin: 0; }
.nav-link { padding: 9px 10px; text-decoration: none; color: var(--bll-muted) !important; font-weight: 500; }
.nav-link.active { color: var(--bll-ink) !important; }
.apps-content { flex: 1; width: 100%; }
.bll-manager .bll-manager-page .bll-content.catalog-content { padding-top: clamp(40px, 6vw, 72px); }
.apps-page .apps-list-title { margin: 0 0 28px; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.75px; }
/* Catalog: Plugins, then Services, each a title and its grid. */
.apps-page .apps-section + .apps-section { margin-top: 40px; }
/* Apps (admin): the listing tiles and table come after the filters. */
.apps-page .listing-section + .listing-section { margin-top: 32px; }
.apps-page .listing-tile .app-card-bottom { flex-wrap: nowrap; }
.apps-page .listing-tile .version { white-space: normal; }
/* Grid / Table: two icon buttons as tall as the fields, set apart from the search by a rule
   (under it on a phone, beside it from 992px, where it spans the labels too). */
.apps-page .listing-view { display: flex; align-items: flex-end; padding-top: 16px; border-top: 1px solid var(--bll-border); }
.apps-page .listing-view button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: calc(var(--bll-field-height) - 2px); padding: 0; }
.apps-page .listing-view .bll-ui-icon { width: 16px; height: 16px; vertical-align: 0; }
@media screen and (min-width: 992px){
	.apps-page .listing-view { align-self: stretch; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--bll-border); }
}
.apps-page .apps-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 20px; font-weight: 600; }
/* Header: the account menu. */
.user-menu-button .bll-ui-icon:last-child { width: 14px; height: 14px; }
.user-menu-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions .bll-dropdown form { margin: 0; }
/* BLL UI's dropdown item does not reset the underline of an <a> outside wp-admin (bll-ui gap). */
.apps-page a.bll-dropdown-item { text-decoration: none; }
/* Administration > site activity */
.apps-page .activity-filters{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.apps-page .activity-filters .bll-field-stack{
	flex: 1;
	min-width: 0;
}
.apps-page .activity-table{
	min-width: 860px;
}
.apps-page .activity-table td:first-child{
	max-width: 280px;
	overflow-wrap: anywhere;
}
.apps-page .activity-modules{
	min-width: 180px;
	max-width: 260px;
	overflow-wrap: anywhere;
}
.apps-page .activity-modules ul{
	margin: 12px 0 0;
	padding-left: 18px;
}
.apps-page .activity-modules li + li{
	margin-top: 8px;
}
@media screen and (min-width: 992px){
	.apps-page .activity-filters{
		flex-direction: row;
		align-items: end;
	}
}
/* Catalog > compact cards */
.apps-grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
.apps-page .app-card{
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 18px;
	min-width: 0;
}
.app-card-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}
.app-icon{
	width: 48px;
	height: 48px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--bll-gray-100);
	color: var(--bll-gray-600);
}
.app-icon > .bll-ui-icon{
	width: 25px;
	height: 25px;
}
.app-card .app-icon{
	width: 36px;
	height: 36px;
}
.app-card .app-icon > .bll-ui-icon{
	width: 20px;
	height: 20px;
}
.app-icon.availability-available{
	background: var(--bll-success-soft);
	color: var(--bll-success-ink);
}
.app-icon.availability-paused{
	background: var(--bll-warning-soft);
	color: var(--bll-warning-ink);
}
.app-icon.availability-discontinued,
.app-icon.availability-issue{
	background: var(--bll-danger-soft);
	color: var(--bll-danger-ink);
}
.availability-label{
	color: var(--bll-muted);
	font-size: 11px;
}
.app-card h3{
	font-size: 16px;
	letter-spacing: -.2px;
	line-height: 1.35;
	margin-bottom: 8px;
	overflow-wrap: anywhere;
}
.card-description{
	color: var(--bll-muted);
	line-height: 1.5;
	font-size: 12px;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.app-card .card-platform{
	margin-top: auto;
	margin-bottom: 12px;
	font-size: 11px;
	color: var(--bll-muted);
}
.card-platform strong{
	font-weight: 500;
	color: var(--bll-ink);
}
.app-card-bottom{
	border-top: 1px solid var(--bll-border);
	padding-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.version{
	font-size: 12px;
	color: var(--bll-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.card-action{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	font-weight: 600;
	font-size: 11px;
}
@media screen and (min-width: 560px){
	.apps-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (min-width: 900px){
	.apps-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media screen and (min-width: 1200px){
	.apps-grid{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.apps-page.access-page { min-height: 100svh !important; }
.bll-manager .bll-manager-page .bll-content.access-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 24px var(--bll-page-gutter); }
.access-layout { width: 100%; max-width: 440px; }
.apps-page .access-card { margin: 0; }
.access-card h1 { font-size: 21px; line-height: 1.3; letter-spacing: -.5px; margin-bottom: 24px; }
.access-icon { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--bll-accent-bg); color: var(--bll-accent-ink); border-radius: 12px; }
.stack-form { display: flex; flex-direction: column; gap: 22px; }
.stack-form .bll-card-header, .stack-form .bll-check { margin-bottom: 0; }
.stack-form .bll-field-stack { gap: 7px; }
.stack-form label { font-weight: 500; }
.stack-form .bll-help { font-weight: 400; }
.text-link { display: inline-block; text-decoration: none; color: var(--bll-muted) !important; }
.table-name { display: flex; align-items: center; gap: 13px; min-width: 240px; }
.table-name strong { font-size: 14px; }
.small-icon { width: 40px; height: 40px; border-radius: 10px; }
.small-icon > .bll-ui-icon { width: 21px; height: 21px; }
/* Administration > detected releases */
.apps-page .release-discovery{
	margin-bottom: 24px;
}
.release-row{
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--bll-border);
}
.release-row:last-child{
	padding-bottom: 0;
}
.release-summary{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	overflow-wrap: anywhere;
}
.release-summary strong{
	font-size: 14px;
}
.release-summary span,
.release-summary small{
	font-size: 12px;
	color: var(--bll-muted);
}
@media screen and (min-width: 783px){
	.release-row{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.release-row > .bll-button-group{
		flex-shrink: 0;
	}
}
.editor-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.editor-main, .editor-aside { display: flex; flex-direction: column; gap: 22px; }
.editor-form .bll-card { margin: 0; }
.editor-aside { position: sticky; top: 22px; }
/* Editor > version fields and public release notes */
.release-settings{
	border-top: 1px solid var(--bll-border);
	padding-top: 16px;
}
.release-settings summary,
.note-editor summary{
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
}
.release-settings > .stack-form,
.note-editor > .stack-form{
	margin-top: 18px;
}
.apps-page .activity-card{
	margin: 22px 0 0;
	min-width: 0;
}
.activity-card > .bll-card-header{
	margin-bottom: 8px;
}
.note-editor{
	margin-top: 18px;
}
.note-entry{
	border-top: 1px solid var(--bll-border);
	margin-top: 20px;
	padding-top: 20px;
}
.note-heading,
.note-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}
.note-heading{
	justify-content: space-between;
	margin-bottom: 12px;
}
.note-heading h3{
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}
.note-heading time{
	color: var(--bll-muted);
	font-size: 11px;
}
.note-content{
	font-size: 13px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.note-actions form{
	margin: 0;
}
.note-list > .bll-muted{
	margin: 18px 0 0;
}
@media screen and (min-width: 761px){
	.apps-page .activity-card{
		width: calc(100% - 324px);
	}
}
.integration-box h3 { font-size: 14px; }
.integration-box code { display: block; margin: 14px 0; padding: 10px; overflow-wrap: anywhere; background: var(--bll-gray-100); border-radius: 6px; font-size: 11px; }
.cancel-link { text-align: center; color: var(--bll-muted); text-decoration: none; }
/* Settings: two columns of draggable cards (assets/app.js). The columns stretch to the row
   height so a card can be dropped below the last card of the shorter one. */
.apps-page .settings-columns{
	align-items: stretch;
}
.apps-page .settings-column{
	align-content: start;
	min-height: 120px;
	border-radius: 16px;
}
.apps-page .settings-column > .bll-card{
	margin: 0;
}
.apps-page .settings-column > .bll-card-draggable > .bll-card-header{
	cursor: grab;
}
.apps-page .settings-column > .bll-card-draggable > .bll-card-header a{
	cursor: pointer;
}
.apps-page.is-arranging,
.apps-page.is-arranging .settings-column > .bll-card-draggable > .bll-card-header{
	cursor: grabbing;
	user-select: none;
}
.apps-page.is-arranging .settings-column{
	outline: 2px dashed var(--bll-border);
	outline-offset: 8px;
}
.apps-page.is-arranging .settings-column.is-drop-column{
	outline-color: var(--bll-accent);
}
/* Tables sit flush in their card; BLL UI's .bll-table-responsive scrolls them sideways. */
.apps-page .table-card { padding: 0; overflow: hidden; }
/* Apps: one table per category, titled like a card. */
.apps-page .listing-card > .bll-card-header { margin: 20px 24px 4px; }
.apps-page .listing-card + .listing-card { margin-top: 24px; }
/* Same column widths in both tables, so Plugins and Services line up. */
.apps-page .listing-card .bll-table { table-layout: fixed; min-width: 640px; }
.apps-page .listing-card .bll-table th:nth-child(2) { width: 17%; }
.apps-page .listing-card .bll-table th:nth-child(3) { width: 14%; }
.apps-page .listing-card .bll-table th:nth-child(4) { width: 104px; }
.apps-page .bll-section-heading h1 { margin-bottom: 6px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 20; background: white; padding: 12px; }
@media (max-width: 760px) { .editor-form { grid-template-columns: 1fr; } .editor-aside { position: static; } }
@media (max-width: 480px) { .header-actions { gap: 5px; } .header-actions .nav-link { padding: 8px 5px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .apps-page a { transition: none; } }
/* Sites & activity > per-site views */
.apps-page .sites-table,
.apps-page .activity-table{
	min-width: 720px;
}
.apps-page .site-url{
	font-weight: 600;
	overflow-wrap: anywhere;
}
.apps-page .site-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0;
}
.apps-page .site-plugins,
.apps-page .site-modules{
	margin: 0;
	padding: 0;
	list-style: none;
}
.apps-page .site-plugins li + li,
.apps-page .site-modules li + li{
	margin-top: 6px;
}
.apps-page .auto-updates{
	display: inline-flex;
	width: 18px;
	justify-content: center;
	vertical-align: middle;
}
.apps-page .auto-updates .bll-ui-icon{
	width: 16px;
	height: 16px;
}
.apps-page .auto-updates.is-on{
	color: var(--bll-success-strong);
}
.apps-page .auto-updates.is-off{
	color: var(--bll-danger-ink);
}
.apps-page .auto-updates.is-unknown{
	color: var(--bll-muted);
}
.site-detail-heading{
	margin: 18px 0 6px;
	font-size: 14px;
}
/* Settings > site tags. The rows share one grid (subgrid), so name, color, Save, count and
   delete line up from row to row; in a narrow card the name takes its own line. */
.apps-page .tag-card{
	container-type: inline-size;
}
.apps-page .tag-preview{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
}
.apps-page .tag-editor{
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, auto);
	column-gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.apps-page .tag-editor li{
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	row-gap: 8px;
	padding: 10px 0;
	border-top: 1px solid var(--bll-border);
}
.apps-page .tag-editor li > form,
.apps-page .tag-editor .tag-meta{
	display: contents;
}
.apps-page .tag-editor input[type="text"]{
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
}
.apps-page .tag-editor select{
	width: 100%;
}
.apps-page .tag-editor .tag-meta > a{
	justify-self: end;
	white-space: nowrap;
}
.apps-page .tag-editor .tag-meta > form{
	margin: 0;
}
@container (min-width: 460px){
	.apps-page .tag-editor{
		grid-template-columns: minmax(0, 1fr) repeat(4, auto);
	}
	.apps-page .tag-editor input[type="text"]{
		grid-column: auto;
	}
}
.apps-page .site-tags{
	align-items: center;
}
.apps-page .tag-create{
	align-items: end;
}
/* Sites & activity > bulk tags: a bar over the table; the checkboxes live in the rows. */
.apps-page .site-bulk{
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--bll-border);
}
.apps-page .site-bulk-count{
	color: var(--bll-muted);
	font-size: 13px;
}
.apps-page .site-bulk select{
	width: auto;
	min-width: 160px;
}
.apps-page .sites-table .site-select{
	width: 1%;
	padding-right: 0;
}
.apps-page .sites-table .site-select .bll-check{
	margin: 0;
}
/* Settings > users: name and email, badges, actions on one line; wraps in a narrow card. */
.apps-page .user-list{
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.apps-page .user-list > li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 12px 0;
	border-top: 1px solid var(--bll-border);
}
.apps-page .user-summary{
	flex: 1 1 180px;
	min-width: 0;
	overflow-wrap: anywhere;
}
.apps-page .user-badges,
.apps-page .user-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.apps-page .user-actions form{
	margin: 0;
}

/* Licenses: a key or public key on one line that may wrap anywhere on a phone; site addresses
   stay whole (the table scrolls sideways instead). */
.license-key { overflow-wrap: anywhere; }
.apps-page .license-sites .site-url { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
/* Licenses > Detected sites: the new keys, a table titled like a card (as the Apps tables). */
.apps-page .license-new-keys-header { margin: 20px 24px 4px; }
.apps-page .detected-action .bll-btn { white-space: nowrap; }
/* The popup of a row's Create: the standard width; a long product list scrolls inside it. */
.apps-page #detected-create .bll-popup-body { max-height: calc(100vh - 180px); overflow: auto; }