/**
 * Albert — Abilities (DataViews) admin screen styles.
 *
 * Authored plain CSS (no preprocessor), loaded after the DataViews vendor
 * stylesheet so these rules can override it. DataViews + wp-components supply
 * the table/grid/toolbar chrome, themed to the site's WordPress admin color
 * scheme via --wp-admin-theme-color (set by WordPress; we do not override it).
 * This file adds the page chrome (header, summary, card), the custom cell +
 * operation badge, the "last used" cell, and the detail fly-in drawer.
 */

/* Full width — the table takes whatever the viewport gives it. Five columns
   need the room, and the subtitle is capped on its own so the prose stays
   readable without constraining the table. This is the `full` tier; see the
   page-shell block in albert-primitives.css. */
.albert-abilities {
	max-inline-size: none;
}

/* Page header. */
.albert-abilities__header {
	margin: 4px 0 0;
}

/**
 * Counts on the left, the bulk actions that change them on the right, across
 * the full width of the list below.
 *
 * A sibling of `.albert-page__header`, not a child of `.albert-page__text`:
 * that block is capped at the description's measure, which right-aligned the
 * buttons to 822px while the card, toolbar and table all ended at 1380px. See
 * AbilitiesApp for why they are not in `.albert-page__actions` either.
 */
.albert-abilities__summary-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--albert-space-300);
	margin: 0 0 var(--albert-space-300);
}

.albert-abilities__summary {
	display: flex;
	gap: 18px;
	margin: 0;
	font-size: var(--albert-font-size-sm);
	color: var(--albert-color-text-muted);
}

.albert-abilities__summary strong {
	font-weight: var(--albert-font-weight-semibold);
	color: var(--albert-color-text);
}

.albert-abilities__bulk-all {
	display: flex;
	gap: 8px;
}

.albert-abilities__error {
	margin: 0 0 12px;
}

.albert-abilities__loading {
	display: flex;
	justify-content: center;
	padding: 64px 0;
}

/* White card framing the DataViews component. */
.albert-abilities__card {
	background: var(--albert-color-surface);
	border: 1px solid var(--albert-color-border);
	border-radius: 4px;
	overflow: hidden;
}

/* .albert-toolbar, .albert-toolbar__group[--end] moved to albert-primitives.css:
   Skills' DataViews toolbar is the same shape. */

/* The "Ability" cell: label, monospace id, wrapping description. */
.albert-ability-cell {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

/* Label is the clickable title — the cue that a row opens. Uses the site's
   admin color scheme accent (not a hardcoded brand colour). */
.albert-ability-cell__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--albert-color-accent);
}

.albert-ability-cell:hover .albert-ability-cell__label {
	text-decoration: underline;
}

.albert-ability-cell__id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	color: var(--albert-color-text-faint);
	background: none;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Description: wraps to at most two lines, then clips. Full text is in the fly-in.

   Wrapping is what keeps the column narrow. A nowrap line still asks the table
   for its full unbroken width before the ellipsis is ever applied, so the old
   single-line rule is what made this column 679px wide. */
.albert-ability-cell__desc {
	color: var(--albert-color-text-muted);
	overflow: hidden;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* The grid has more room per card, so it clamps at three. */
.dataviews-view-grid .albert-ability-cell__desc {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Operation badge — read (green) / write (amber) / delete (red). */
.albert-op-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px 2px 7px;
	border-radius: 11px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.albert-op-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentcolor;
}

.albert-op-badge--read {
	background: var(--albert-color-success-surface);
	color: var(--albert-color-success);
}

.albert-op-badge--write {
	background: var(--albert-color-warning-surface);
	color: var(--albert-color-warning);
}

.albert-op-badge--delete {
	background: var(--albert-color-danger-surface);
	color: var(--albert-color-danger);
}

/* Generic add-on badges — appended to rows via the
   `albert/abilities/payload_row` PHP filter. Shown in the overview cell and the
   fly-in header. Tones: info (blue) / warning (amber) / neutral (grey). */
.albert-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* The badge is a primitive. Its base, tones and sizing live in
   albert-primitives.css — this sheet depends on that one and therefore cascades
   after it, so redeclaring any of them here would silently take ownership back
   and give us the two definitions the design system exists to collapse. */

.albert-badge--neutral {
	background: var(--albert-color-neutral-surface);
	color: var(--albert-color-neutral);
}

/* ---------------------------------------------------------------------------
   Detail fly-in (right-docked drawer)

   The shell (backdrop, frame, header layout, close button, scrollable body,
   footer layout, category label/value, enabled toggle wrapper, section/
   section-title/section-head, motion) moved to albert-primitives.css. Skills
   opens the same dialog now, via the shared Section component in
   ../../assets/src/shared/FlyInShell.jsx. What's left here is
   Abilities-specific: the mono id, the confirm-on-close dialog, and
   everything inside the body that isn't a generic section.
   --------------------------------------------------------------------------- */

.albert-flyin__id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	color: var(--albert-color-accent);
	background: none;
	padding: 0;
}

/* Confirm-on-close dialog (styled @wordpress/components Modal). */
.albert-flyin__confirm-body {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--albert-color-neutral);
}

.albert-flyin__confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* Parameters accordion card (collapsible), placed under the description. */
.albert-flyin__accordion {
	/* flex:none — the body is a flex column; overflow:hidden would otherwise
	   strip the item's auto min-height and let it collapse. */
	flex: none;
	border: 1px solid var(--albert-color-border);
	border-radius: 6px;
	background: var(--albert-color-surface);
	overflow: hidden;
}

.albert-flyin__accordion-heading {
	margin: 0;
}

.albert-flyin__accordion-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	inline-size: 100%;
	margin: 0;
	padding: 9px 12px;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}

.albert-flyin__accordion-toggle:hover {
	background: var(--albert-color-surface-sunken);
}

.albert-flyin__accordion-toggle:focus-visible {
	outline: 2px solid var(--albert-color-accent);
	outline-offset: -2px;
}

.albert-flyin__accordion-chevron {
	flex: none;
	fill: var(--albert-color-neutral);
	transition: transform 0.15s ease;
}

.albert-flyin__accordion-toggle[ aria-expanded="true" ]
	.albert-flyin__accordion-chevron {
	transform: rotate( 90deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.albert-flyin__accordion-chevron {
		transition: none;
	}
}

.albert-flyin__accordion-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--albert-color-text);
}

.albert-flyin__accordion-summary {
	margin-inline-start: auto;
	font-size: 12px;
	color: var(--albert-color-text-faint);
}

.albert-flyin__accordion-panel {
	border-block-start: 1px solid var(--albert-color-border-subtle);
}

.albert-flyin__accordion-panel[ hidden ] {
	display: none;
}

/* Parameter rows. Required rows get a left accent bar + a tinted background. */
.albert-flyin__params {
	margin: 0;
	padding: 0;
	list-style: none;
}

.albert-flyin__param {
	margin: 0;
	padding: 8px 12px;
	border-block-end: 1px solid var(--albert-color-border-subtle);
}

.albert-flyin__param:last-child {
	border-block-end: 0;
}

.albert-flyin__param-head {
	display: flex;
	align-items: center;
	gap: 7px;
}

.albert-flyin__param-name {
	padding: 0;
	background: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--albert-color-text);
}

.albert-flyin__param-type {
	padding: 0 6px;
	border-radius: 3px;
	background: var(--albert-color-canvas);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	color: var(--albert-color-neutral);
}

.albert-flyin__param-flag {
	margin-inline-start: auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--albert-color-text-faint);
}

.albert-flyin__param.is-required .albert-flyin__param-flag {
	color: var(--albert-color-accent);
}

.albert-flyin__param-desc {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--albert-color-text-muted);
}

.albert-flyin__description,
.albert-flyin__returns {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--albert-color-neutral);
}

.albert-flyin__returns {
	padding: 11px 13px;
	background: var(--albert-color-surface-sunken);
	border: 1px solid var(--albert-color-border);
	border-radius: 5px;
}

.albert-flyin__cards {
	display: flex;
	gap: 10px;
}

.albert-flyin__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 11px 13px;
	border: 1px solid var(--albert-color-border);
	border-radius: 5px;
}

.albert-flyin__card-label {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--albert-color-text-faint);
}

.albert-flyin__card-value {
	font-size: 13.5px;
	color: var(--albert-color-text);
	background: none;
	padding: 0;
}

code.albert-flyin__card-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
}

.albert-flyin__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.albert-flyin__pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid var(--albert-color-border);
	border-radius: 12px;
	background: var(--albert-color-surface-sunken);
	font-size: 12px;
	color: var(--albert-color-neutral);
}

/* Panel-level save status (fed by an add-on via api.setSaveStatus). Empty until
   a save runs, so it takes no space when idle. */
.albert-flyin__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 20px;
	font-size: 12px;
	font-weight: 600;
	color: var(--albert-color-accent);
}

.albert-flyin__status:empty {
	display: none;
}

.albert-flyin__card-head {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* The info control moved into albert-primitives.css: both React screens use it. */

.albert-info__content p:last-child {
	margin: 0;
}

/* "Last used" cell: outcome on the first line, time on the second.

   Stacked rather than wrapped. Wrapping only breaks when the text happens not
   to fit, so the same column reads as one line on some rows and two on others,
   and the eye loses the timestamps when scanning down. */
.albert-lastused {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	font-size: 12.5px;
	color: var(--albert-color-neutral);
}

.albert-lastused__outcome {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.albert-lastused__time {
	color: var(--albert-color-text-faint);
}

.albert-lastused--never {
	color: var(--albert-color-text-faint);
}

.albert-lastused__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--albert-color-switch-off);
	flex: none;
}

.albert-lastused__dot--success {
	background: var(--albert-color-success-dot);
}

.albert-lastused__dot--error {
	background: var(--albert-color-danger);
}

/* Blocked by policy. Amber, because nothing broke and red would be a lie —
   but not the neutral base either, because the site did refuse the call. */
.albert-lastused__dot--warning {
	background: var(--albert-color-warning-dot);
}

/* A status value this build does not recognise. Keeps the neutral base colour:
   inventing amber for a value we cannot read would be a claim. */
.albert-lastused__dot--neutral {
	background: var(--albert-color-switch-off);
}

/* The status word beside the dot. Status is never carried by the dot's colour
   alone (WCAG 2.2 AA, 1.4.1), and with three outcomes rather than two the
   colours are no longer even self-evident. Muted, so the cell still reads as
   a timestamp first. */
.albert-lastused__status {
	color: var(--albert-color-text-faint);
}

.albert-lastused__status--warning {
	color: var(--albert-color-warning);
}

.albert-lastused__status--error {
	color: var(--albert-color-danger);
	font-weight: 600;
}

/* Bulk selection is exposed via the checkbox column + the selection toolbar.
   The per-row actions (Enable/Disable) would just duplicate the row toggle, so
   hide them in every layout: the actions column (table), the per-card actions
   (grid) and the per-row kebab (list). The checkbox column and the selection
   toolbar are separate and stay. */
.dataviews-view-table__actions-column {
	display: none;
}

.dataviews-view-table__col-actions {
	width: 0;
}

.dataviews-view-grid__media-actions {
	display: none;
}

/* DataViews sets this to `flex` from
   `.dataviews-view-list div[role="row"] .dataviews-view-list__item-actions`,
   so a bare class selector loses on specificity. Scoping to the screen's own
   card beats it without reaching for !important. */
.albert-abilities__card
	.dataviews-view-list
	div[role="row"]
	.dataviews-view-list__item-actions,
.albert-abilities__card
	.dataviews-view-list
	div[role="article"]
	.dataviews-view-list__item-actions {
	display: none;
}

/* Selection bulk bar, moved to the top (below the toolbar). Only styled when it
   actually has content, so there's no empty bar when nothing is selected. */
.albert-abilities__bulkbar {
	background: var(--albert-color-accent-surface);
	border-bottom: 1px solid var(--albert-color-border);
	padding: 6px 12px;
}

/**
 * One select-all control, not two.
 *
 * This screen composes DataViews by hand, and renders `BulkActionToolbar`
 * above `Layout`. Both ship a select-all checkbox: the toolbar's, and the
 * table header's. Once anything is selected they stack 47px apart, and both
 * carry the *identical* accessible name, "Deselect all" — so a screen reader
 * announces the same control twice in a row with nothing to tell them apart,
 * and on screen it reads as a stray extra checkbox.
 *
 * The table header's is the one that stays: it is the control the pointer is
 * already on (it is what created the selection), and it is the only one
 * present before there is a selection to clear. What is left in the bar is
 * what a bulk bar is for — the count, the actions, and its own labelled
 * Cancel, which clears the selection.
 */
.albert-abilities__bulkbar .dataviews-view-table-selection-checkbox {
	display: none;
}

/* Permissions section — Free default. Mirrors Premium's Capability/Custom
   toggle; the Custom tab is a locked preview + upsell (Premium replaces the
   whole section when active, so this is never shown alongside it). */

/* One bordered panel wrapping the description + toggle + active tab content, so
   the section reads as a single unit. Shared with Premium (same class, defined
   identically in both stylesheets). */
.albert-perms-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--albert-color-border);
	border-radius: 8px;
	background: var(--albert-color-surface);
}

.albert-perms-panel__intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--albert-color-neutral);
}

/* The shared "Required capability" card is unframed inside the panel (no
   box-in-box); scoped so the card keeps its border anywhere else. */
.albert-perms-panel .albert-flyin__card--capability {
	border: 0;
	padding: 0;
	border-radius: 0;
}

/* Custom toggle option: label + a small lock icon signalling it's gated. */
.albert-perms-upsell__custom-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.albert-perms-upsell__custom-label .dashicons-lock {
	font-size: 14px;
	inline-size: 14px;
	block-size: 14px;
	line-height: 1;
}

/* "Slide button" toggle: a light track with an inset white pill that slides
   between options. The component keeps the active option's box in --selected-*
   and transitions its ::before; we re-style that ::before as a soft pill,
   positioned from those vars but inset 4px (no control padding, which would
   double-offset it). The slide comes from transitioning the position. */
.albert-perms-panel .components-toggle-group-control {
	background: var(--albert-color-canvas);
	border: none;
	border-radius: 10px;
	box-shadow: none;
}

.albert-perms-panel .components-toggle-group-control::before {
	top: calc( var( --selected-top, 0 ) * 1px + 4px );
	left: 0;
	width: calc( var( --selected-width, 0 ) * 1px - 8px );
	height: calc( var( --selected-height, 0 ) * 1px - 8px );
	/* Move horizontally with transform — unlike `left`, a transform driven by a
	   changing custom property interpolates, so the pill slides instead of
	   jumping. The +4px is the inset. */
	transform: translateX( calc( var( --selected-left, 0 ) * 1px + 4px ) );
	background: var(--albert-color-surface);
	border: none;
	border-radius: 6px;
	box-shadow: 0 1px 3px oklch( 0 0 0 / 0.16 ),
		0 1px 1px oklch( 0 0 0 / 0.07 );
	transition: transform 0.18s ease, width 0.18s ease;
}

.albert-perms-panel .components-toggle-group-control-option-base {
	position: relative;
	z-index: 1;
	background: transparent;
	border: none;
	color: var(--albert-color-text-muted);
}

.albert-perms-upsell
	.components-toggle-group-control-option-base[ aria-checked="true" ] {
	color: var(--albert-color-text);
}

@media ( prefers-reduced-motion: reduce ) {
	.albert-perms-panel .components-toggle-group-control::before {
		transition: none;
	}
}

/* Tab content sits directly under the toggle; the panel's flex gap spaces it. */
.albert-perms-upsell__custom {
	display: flex;
	flex-direction: column;
}

.albert-perms-upsell__benefits {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.albert-perms-upsell__benefits li {
	position: relative;
	margin: 0;
	padding-inline-start: 22px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--albert-color-text);
}

.albert-perms-upsell__benefits li::before {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	inset-block-start: 0.5em;
	inline-size: 8px;
	block-size: 5px;
	border: 1.5px solid var(--albert-color-accent);
	border-block-start: 0;
	border-inline-end: 0;
	transform: rotate( -45deg );
}

.albert-perms-upsell__example-label {
	display: block;
	margin-block-end: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--albert-color-text-faint);
}

/* Decorative showcase of the rule builder. The example rules stay readable but
   the Upgrade button sits over the lower half (with a scrim) so the box reads as
   a locked preview, not an editable list. */
.albert-perms-upsell__preview {
	position: relative;
	overflow: hidden;
	min-block-size: 132px;
	padding: 12px;
	border: 1px dashed var(--albert-color-border-input);
	border-radius: 8px;
	background: var(--albert-color-surface-sunken);
}

/* Scrim that fades the example out toward the overlaid CTA. */
.albert-perms-upsell__preview::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 72%;
	background: linear-gradient(
		to bottom,
		transparent,
		color-mix( in oklch, var(--albert-color-surface-sunken) 70%, transparent ) 45%,
		var(--albert-color-surface-sunken) 82%
	);
	pointer-events: none;
}

.albert-perms-upsell__rules {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

.albert-perms-upsell__rule {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 10px;
	border: 1px dashed var(--albert-color-border);
	border-radius: 6px;
	font-size: 12.5px;
	color: var(--albert-color-neutral);
}

.albert-perms-upsell__token {
	font-weight: 600;
}

.albert-perms-upsell__word {
	color: var(--albert-color-text-faint);
}

.albert-perms-upsell__chip {
	margin-inline-start: auto;
	padding: 2px 10px;
	border-radius: 11px;
	background: var(--albert-color-canvas);
	font-weight: 500;
}

/* Overlaid CTA — floats over the lower part of the example. */
.albert-perms-upsell__cta {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 14px;
	z-index: 1;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   List layout, Abilities-only parts. The generic shape lives in
   albert-primitives.css, because Skills renders the same layout.
   --------------------------------------------------------------------------- */

/* Enabled is a control, not a value. It goes to the far end, away from the
   metadata, and loses the separator that would read it as one more data point.

   Scoped to this screen on purpose. Skills' last field is Source, an ordinary
   value that belongs beside the others, so this cannot sit in the primitives
   with the rest of the list styling. */
.albert-abilities__card
	.dataviews-view-list__fields
	.dataviews-view-list__field:last-child {
	margin-inline-start: auto;
}

.albert-abilities__card
	.dataviews-view-list__fields
	.dataviews-view-list__field:last-child::before {
	content: none;
}

/* "Last used" stacks in the table, where it has a column to itself. Here it is
   one item in a single horizontal line, and a two-line cell would set the
   height of every row. */
.dataviews-view-list .albert-lastused {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

/* The description has the full row width here, so it can afford a third line. */
.dataviews-view-list .albert-ability-cell__desc {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}