/**
 * Albert → Skills screen.
 *
 * DataViews + wp-components supply the table/grid/toolbar chrome (see
 * assets/src/skills/), themed to the site's WordPress admin color scheme.
 * The fly-in dialog shell (backdrop, frame, header, close, body scroll,
 * footer, the section/section-head/section-title pattern) lives in
 * albert-primitives.css, shared with Abilities. This file holds only what's
 * particular to Skills: page chrome (header, summary), the table's Skill
 * cell, and the fly-in's own content (the raw guide-text block; the locked
 * notice reuses the shared .albert-hint primitive).
 *
 * Consumes tokens only. No raw colour, no raw size.
 *
 * @package Albert
 * @since 1.4.0
 */

/* Full width, like Abilities and for the same reason: the table takes what the
   viewport gives it. The `full` tier; see albert-primitives.css. */
.albert-skills {
	max-inline-size: none;
}

.albert-skills__header {
	margin: 4px 0 0;
}

.albert-skills__summary-row {
	margin: var(--albert-space-400) 0 18px;
}

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

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

.albert-skills__loading {
	display: flex;
	justify-content: center;
	padding: var(--albert-space-600) 0;
}

.albert-skills__error {
	margin: 0 0 var(--albert-space-300);
}

/* White card framing the DataViews component, same shape as Abilities'. */
.albert-skills__card {
	background: var(--albert-color-surface);
	border: 1px solid var(--albert-color-border);
	border-radius: var(--albert-radius-md);
	overflow: hidden;
}

/* The "Skill" cell: name, one-line description underneath. Same font as
   .albert-ability-cell__label; a skill's slug is its only name, so it is not
   also repeated in mono the way Abilities repeats an ability's id. */
.albert-skill-cell {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.albert-skill-cell__slug {
	font-size: var(--albert-font-size-card-title);
	font-weight: var(--albert-font-weight-semibold);
	color: var(--albert-color-accent);
}

.albert-skill-cell:hover .albert-skill-cell__slug {
	text-decoration: underline;
}

/* Wraps to two lines rather than running on one.

   A nowrap line asks the table for its full unbroken width before the ellipsis
   is ever applied, which is what made the equivalent column on Abilities 679px
   wide and pushed that table into a horizontal scroll. Same shape here, same
   fix, before it has the content to show it. */
.albert-skill-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 card and the list row both have the full width, so both afford a
   third line. */
.dataviews-view-grid .albert-skill-cell__desc,
.dataviews-view-list .albert-skill-cell__desc {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* ==========================================================================
   Fly-in content (the shell itself is in albert-primitives.css)
   ========================================================================== */

.albert-skill-flyin__summary {
	margin: 0;
	font-size: var(--albert-font-size-sm);
	line-height: var(--albert-line-height-snug);
	color: var(--albert-color-text-muted);
}

.albert-skill-flyin__body {
	margin: 0;
	padding: var(--albert-space-300);
	max-height: 420px;
	overflow: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: var(--albert-font-family-mono);
	font-size: var(--albert-font-size-sm);
	line-height: var(--albert-line-height-snug);
	color: var(--albert-color-text);
	background: var(--albert-color-surface-sunken);
	border: 1px solid var(--albert-color-border-subtle);
	border-radius: var(--albert-radius-sm);
}

.albert-skill-flyin__hint {
	font-size: var(--albert-font-size-sm);
	color: var(--albert-color-text-faint);
}