/**
 * YAY HRMS — front-end styles.
 *
 * Deliberately quiet: the HRMS borrows the theme's typography and only supplies
 * layout, spacing and the brand accents (as CSS custom properties set inline by
 * YAYHR_Brand::css_vars(), so an admin's palette choice reaches every surface).
 * Everything is class-scoped under .yayhr to avoid colliding with a theme.
 */

.yayhr {
	--yayhr-radius: 6px;
	--yayhr-border: #e0dfdb;
	--yayhr-muted: #6b6b6b;
	--yayhr-surface: #fff;
	color: inherit;
	font-size: 1rem;
	line-height: 1.55;
}

.yayhr *,
.yayhr *::before,
.yayhr *::after {
	box-sizing: border-box;
}

/* ── Notices ──────────────────────────────────────────────────────────── */

.yayhr-notice {
	border-left: 4px solid var(--yayhr-primary, #00633b);
	background: #f6f7f5;
	padding: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	border-radius: 0 var(--yayhr-radius) var(--yayhr-radius) 0;
}

.yayhr-notice--error {
	border-left-color: var(--yayhr-crimson, #aa0010);
	background: #fdf4f4;
}

.yayhr-empty {
	color: var(--yayhr-muted);
	font-style: italic;
}

.yayhr-help {
	display: block;
	color: var(--yayhr-muted);
	font-size: 0.85em;
}

.yayhr-overdue {
	color: var(--yayhr-crimson, #aa0010);
	font-weight: 600;
}

.yayhr-required {
	color: var(--yayhr-crimson, #aa0010);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.yayhr-button {
	display: inline-block;
	background: var(--yayhr-primary, #00633b);
	color: #fff;
	border: 1px solid var(--yayhr-primary, #00633b);
	padding: 0.6rem 1.1rem;
	border-radius: var(--yayhr-radius);
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	line-height: 1.2;
}

.yayhr-button:hover,
.yayhr-button:focus {
	filter: brightness(1.12);
	color: #fff;
}

.yayhr-button--small {
	padding: 0.35rem 0.7rem;
	font-size: 0.9em;
}

.yayhr-button--quiet {
	background: transparent;
	color: var(--yayhr-primary, #00633b);
}

.yayhr-button--quiet:hover {
	color: var(--yayhr-primary, #00633b);
	background: #f2f4f2;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.yayhr-field {
	margin: 0 0 1rem;
}

.yayhr-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.yayhr-field--check label {
	font-weight: 400;
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.yayhr-field input[type="text"],
.yayhr-field input[type="password"],
.yayhr-field input[type="email"],
.yayhr-field input[type="url"],
.yayhr-field input[type="tel"],
.yayhr-field input[type="date"],
.yayhr-field input[type="number"],
.yayhr-field input[type="search"],
.yayhr-field select,
.yayhr-field textarea {
	width: 100%;
	max-width: 32rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	font: inherit;
	background: var(--yayhr-surface);
}

.yayhr-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.yayhr-filters input,
.yayhr-filters select {
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	font: inherit;
}

.yayhr-inline {
	display: inline;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

.yayhr-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	display: block;
	overflow-x: auto;
}

.yayhr-table th,
.yayhr-table td {
	text-align: left;
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--yayhr-border);
	vertical-align: top;
}

.yayhr-table thead th {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--yayhr-muted);
	border-bottom: 2px solid var(--yayhr-gold, #d4aa25);
}

/* ── Lists ────────────────────────────────────────────────────────────── */

.yayhr-list,
.yayhr-job-list,
.yayhr-shift-list,
.yayhr-people,
.yayhr-tasks,
.yayhr-documents,
.yayhr-approvals,
.yayhr-goals,
.yayhr-out-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.yayhr-list > li,
.yayhr-out-list > li,
.yayhr-documents > li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--yayhr-border);
}

/* ── Job board ────────────────────────────────────────────────────────── */

.yayhr-job {
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	padding: 1rem 1.15rem;
	margin-bottom: 1rem;
	background: var(--yayhr-surface);
}

.yayhr-job--featured {
	border-left: 4px solid var(--yayhr-gold, #d4aa25);
}

.yayhr-job__title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
}

.yayhr-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-size: 0.9em;
	color: var(--yayhr-muted);
}

.yayhr-tag {
	display: inline-block;
	background: #f0f2ef;
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	font-size: 0.8em;
	color: var(--yayhr-primary, #00633b);
}

.yayhr-tag--volunteer {
	background: color-mix(in srgb, var(--yayhr-gold, #d4aa25) 22%, #fff);
	color: #6b5410;
}

.yayhr-job-facts table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.25rem 0;
}

.yayhr-job-facts th,
.yayhr-job-facts td {
	text-align: left;
	padding: 0.45rem 0.7rem;
	border-bottom: 1px solid var(--yayhr-border);
}

.yayhr-job-facts th {
	width: 12rem;
	color: var(--yayhr-muted);
	font-weight: 600;
}

.yayhr-job-section {
	margin: 1.5rem 0;
}

.yayhr-apply,
.yayhr-job-closed {
	margin: 1.5rem 0;
}

.yayhr-pagination {
	display: flex;
	gap: 0.35rem;
}

.yayhr-page {
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	text-decoration: none;
}

.yayhr-page--current {
	background: var(--yayhr-primary, #00633b);
	color: #fff;
	border-color: var(--yayhr-primary, #00633b);
}

/* ── Directory ────────────────────────────────────────────────────────── */

.yayhr-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.yayhr-person {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	padding: 0.85rem;
	background: var(--yayhr-surface);
}

/* Avatars are drawn by YAYHR_Charts::avatar() and appear in the directory, the
   nine-box, people lists and the org chart, so the base rules live in the shared
   stylesheet — the shortcodes render on theme pages where the app stylesheet is
   not loaded. */
.yayhr-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	background: #e8ebe9;
}

.yayhr-avatar--initials {
	background: hsl(var(--yayhr-av-h, 158) 34% 38%);
	color: #fff;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	overflow: hidden;
}

.yayhr-person__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.yayhr-person__name {
	font-weight: 700;
}

.yayhr-person__title,
.yayhr-person__dept,
.yayhr-person__pronouns {
	font-size: 0.9em;
	color: var(--yayhr-muted);
}

/* The address gets one line, clipped: wrapping it mid-word gives you
   "test.newcomer@exam / ple.test", which is unreadable and ragged, and the full
   address is in the title attribute and one click away in the mail client. The
   job title is worth reading, so it gets two lines before it clips. */
.yayhr-person__email {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.yayhr-person__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yayhr-person__email {
	font-size: 0.85em;
}

.yayhr-person .yayhr-tag {
	align-self: flex-start;
	margin-top: 0.3rem;
}

/* ── Org chart ────────────────────────────────────────────────────────── */

.yayhr-tree,
.yayhr-tree ul {
	list-style: none;
	margin: 0;
	padding-left: 1.4rem;
}

/* Indentation alone does not say "reports to" — it says "these cards are not
   quite aligned". Each level gets a rule down its left edge and each node an
   elbow out to it, so the shape of the organisation is visible rather than
   inferred. */
.yayhr-tree ul {
	border-left: 1px solid var(--yayhr-line-strong, #cfd3d8);
}

.yayhr-tree li {
	position: relative;
}

.yayhr-tree ul > li::before {
	content: "";
	position: absolute;
	left: -1.4rem;
	top: 1.15rem;
	width: 1.1rem;
	border-top: 1px solid var(--yayhr-line-strong, #cfd3d8);
}

.yayhr-org-chart > .yayhr-tree {
	border-left: none;
	padding-left: 0;
}

.yayhr-tree__node {
	display: inline-flex;
	flex-direction: column;
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	padding: 0.45rem 0.75rem;
	margin: 0.3rem 0;
	background: var(--yayhr-surface);
	min-width: 12rem;
}

.yayhr-tree__name {
	font-weight: 600;
}

.yayhr-tree__title {
	font-size: 0.85em;
	color: var(--yayhr-muted);
}

/* ── Portal ───────────────────────────────────────────────────────────── */

.yayhr-portal__header {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1.25rem;
}

.yayhr-portal__header h2 {
	margin: 0;
}

.yayhr-portal__meta {
	margin: 0.2rem 0 0;
	color: var(--yayhr-muted);
}

.yayhr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 2px solid var(--yayhr-border);
	margin-bottom: 1.5rem;
}

.yayhr-tab {
	padding: 0.5rem 0.85rem;
	text-decoration: none;
	border-radius: var(--yayhr-radius) var(--yayhr-radius) 0 0;
	color: inherit;
}

.yayhr-tab--active {
	/* The underline treatment, matching yayhr-app.css. The two sheets used to
	   disagree: this one filled the tab and set white text, the app sheet set green
	   text and a green underline. Loaded together the app sheet won the colour and
	   this one kept the background, so the active tab was green text on a green
	   block and its label was invisible. One design, in both files. */
	color: var(--yayhr-primary, #00633b);
	border-bottom: 2px solid var(--yayhr-primary, #00633b);
	font-weight: 600;
}

/* ── Statistics ───────────────────────────────────────────────────────── */

/* One statistic component, defined here rather than in the app stylesheet: this
   file is the only one guaranteed to be present wherever a statistic appears —
   the app route, the admin screens and a shortcode dropped on a theme page. */
.yayhr-strips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 0.75rem;
}

/* The portal's row of balances is the same grid with room beneath it. */
.yayhr-stats {
	margin-bottom: 1.5rem;
}

.yayhr-strip {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.8rem 1rem;
	background: var(--yayhr-surface);
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius-sm, 8px);
}

.yayhr-strip__icon {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(0, 99, 59, 0.08);
	color: var(--yayhr-primary, #00633b);
	font-size: 1rem;
	flex: 0 0 auto;
}

.yayhr-strip__body { display: flex; flex-direction: column; min-width: 0; }
.yayhr-strip__line { display: flex; align-items: baseline; gap: 0.4rem; }

.yayhr-strip__value {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.yayhr-strip__secondary { font-size: 0.85rem; color: var(--yayhr-muted); }

.yayhr-strip__caption {
	font-size: 0.78rem;
	color: var(--yayhr-muted);
}

.yayhr-strip--warn .yayhr-strip__icon { background: rgba(232, 135, 30, 0.12); color: var(--yayhr-amber, #e8871e); }
.yayhr-strip--bad .yayhr-strip__icon { background: rgba(170, 0, 16, 0.1); color: var(--yayhr-crimson, #aa0010); }

.yayhr-icon { display: block; flex: 0 0 auto; }

.yayhr-task,
.yayhr-shift,
.yayhr-approvals > li,
.yayhr-goals > li {
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	padding: 0.8rem 1rem;
	margin-bottom: 0.75rem;
	background: var(--yayhr-surface);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.yayhr-task__title,
.yayhr-shift__title,
.yayhr-goal__title {
	font-weight: 600;
}

.yayhr-progress {
	display: block;
	height: 8px;
	background: #eceeea;
	border-radius: 999px;
	overflow: hidden;
}

.yayhr-progress__bar {
	display: block;
	height: 100%;
	background: var(--yayhr-primary, #00633b);
}

/* ── Letters, payslips, certificates ─────────────────────────────────── */

.yayhr-letterhead {
	display: flex;
	gap: 1rem;
	align-items: center;
	border-bottom: 3px double var(--yayhr-gold, #d4aa25);
	padding-bottom: 0.85rem;
	margin-bottom: 1.5rem;
}

.yayhr-letterhead__logo {
	max-height: 64px;
	width: auto;
}

.yayhr-letterhead__text {
	display: flex;
	flex-direction: column;
}

.yayhr-letterhead__name {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--yayhr-primary, #00633b);
}

.yayhr-letterhead__sub {
	font-size: 0.9em;
	color: var(--yayhr-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.yayhr-slip__meta,
.yayhr-slip__lines {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
}

.yayhr-slip__meta th,
.yayhr-slip__meta td,
.yayhr-slip__lines td {
	text-align: left;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--yayhr-border);
}

.yayhr-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.yayhr-slip__net {
	font-size: 1.1rem;
	border-top: 2px solid var(--yayhr-primary, #00633b);
	padding-top: 0.6rem;
}

.yayhr-slip__note {
	font-size: 0.85em;
	color: var(--yayhr-muted);
}

.yayhr-certificate {
	border: 2px solid var(--yayhr-gold, #d4aa25);
	padding: 2.5rem;
	text-align: center;
	background: var(--yayhr-surface);
}

.yayhr-certificate__name {
	font-size: 2rem;
	margin: 1rem 0 0.5rem;
	color: var(--yayhr-primary, #00633b);
}

.yayhr-certificate__body {
	font-size: 1.1rem;
}

.yayhr-certificate__awards {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0;
	color: var(--yayhr-muted);
}

.yayhr-letter {
	background: var(--yayhr-surface);
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	padding: 2rem;
	margin-bottom: 1.5rem;
}

/* ── Announcements ────────────────────────────────────────────────────── */

.yayhr-announcement {
	border-left: 3px solid var(--yayhr-border);
	padding: 0.25rem 0 0.25rem 1rem;
	margin-bottom: 1.25rem;
}

.yayhr-announcement--pinned {
	border-left-color: var(--yayhr-gold, #d4aa25);
}

.yayhr-announcement h4 {
	margin: 0 0 0.35rem;
}

.yayhr-announcement__date {
	font-size: 0.85em;
	color: var(--yayhr-muted);
	margin: 0.35rem 0 0;
}

/* ── Dark mode: follow the theme's own preference ────────────────────── */

@media (prefers-color-scheme: dark) {
	.yayhr {
		--yayhr-border: #3a3a38;
		--yayhr-muted: #a3a3a0;
		--yayhr-surface: rgba(255, 255, 255, 0.03);
	}

	.yayhr-notice {
		background: rgba(255, 255, 255, 0.04);
	}

	.yayhr-progress {
		background: rgba(255, 255, 255, 0.12);
	}
}

/* ── Forms rendered by the plugin ─────────────────────────────────────── */

/* Every front-end form the plugin renders carries this class. It was doing
   nothing until the class sweep caught it: the fields inside were styled, the
   form itself was not, so a form dropped straight after a table had no space
   above it. */
.yayhr-form {
	margin: 1.25rem 0;
}

.yayhr-form--inline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 1rem;
	align-items: start;
}

.yayhr-form--inline p {
	grid-column: 1 / -1;
	margin: 0;
}

/* ── Surveys and 360 forms ────────────────────────────────────────────── */

/* A thirty-item survey is answered on a phone as often as a desk, so the scale is
   a wrapping row of real labels rather than a row of bare radio buttons: "Strongly
   disagree" is answerable, an unlabelled dot at the left-hand end is a guess. */
.yayhr-survey__section {
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--yayhr-border);
	font-size: 1.05rem;
}

.yayhr-survey__q {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--yayhr-border);
}

.yayhr-survey__q:last-of-type {
	border-bottom: 0;
}

.yayhr .yayhr-survey__q > label,
.yayhr-survey__q > label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

/* Scoped under .yayhr on purpose. A theme's own `label { display: block }` beats a
   bare class selector, and a flex row that has quietly become a block row loses its
   gap — which is how "◯Strongly disagree" ends up with no space in it. */
.yayhr .yayhr-scale {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.yayhr .yayhr-scale__option,
.yayhr-scale__option {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	background: var(--yayhr-surface);
	cursor: pointer;
	font-size: 0.92em;
	line-height: 1.2;
}

.yayhr .yayhr-scale__option:hover,
.yayhr-scale__option:hover {
	border-color: var(--yayhr-primary, #00633b);
}

/* The checked state has to be visible at a glance: on a long form, "have I
   answered this one?" is the question people ask most. */
.yayhr .yayhr-scale__option:has(input:checked),
.yayhr-scale__option:has(input:checked) {
	border-color: var(--yayhr-primary, #00633b);
	box-shadow: inset 0 0 0 1px var(--yayhr-primary, #00633b);
	font-weight: 600;
}

.yayhr .yayhr-scale__option input,
.yayhr-scale__option input {
	margin: 0;
	flex: 0 0 auto;
}

.yayhr .yayhr-scale--ten .yayhr-scale__option--num,
.yayhr-scale--ten .yayhr-scale__option--num {
	min-width: 2.75rem;
	justify-content: center;
	padding: 0.4rem 0.5rem;
}

.yayhr-scale--ten .yayhr-scale__option--num input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.yayhr-scale--ten .yayhr-scale__option--num {
	position: relative;
}

/* ── Recognition wall ─────────────────────────────────────────────────── */

.yayhr-kudos {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.yayhr-kudos__item {
	border: 1px solid var(--yayhr-border);
	border-radius: var(--yayhr-radius);
	padding: 0.9rem 1rem;
	background: var(--yayhr-surface);
}

.yayhr-kudos__head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
}

.yayhr-kudos__head .yayhr-tag {
	margin-left: auto;
}

.yayhr-kudos__name {
	display: block;
	font-weight: 700;
}

.yayhr-kudos__meta {
	display: block;
	font-size: 0.82em;
	color: var(--yayhr-muted);
}

.yayhr-kudos__message {
	margin: 0;
}

.yayhr-kudos__points {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.8em;
	color: var(--yayhr-muted);
}

.yayhr-award {
	border: 1px solid var(--yayhr-border);
	border-left: 4px solid var(--yayhr-gold, #d4aa25);
	border-radius: var(--yayhr-radius);
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
	background: var(--yayhr-surface);
}

.yayhr-award h3 {
	margin-top: 0;
}

/* ── Verbatims ────────────────────────────────────────────────────────── */

/* Survey comments and 360 remarks. Quoted, one to a line, deliberately plain:
   these are somebody's words and dressing them up misrepresents them. */
.yayhr-verbatims {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.yayhr-verbatims li {
	padding: 0.6rem 0.8rem;
	border-left: 3px solid var(--yayhr-border);
	background: rgba(0, 0, 0, 0.015);
	font-size: 0.95em;
}

/* ── Movement ─────────────────────────────────────────────────────────── */

.yayhr-up {
	color: #1d6b3f;
	font-weight: 600;
}

.yayhr-down {
	color: var(--yayhr-crimson, #aa0010);
	font-weight: 600;
}


/* ── The job board, 1.6.3 ─────────────────────────────────────────────────
 *
 * The results live in their own element because filtering replaces just that
 * part. It is given a min-height so that swapping a long list for a short one
 * does not yank the page out from under whoever is reading it.
 */

.yayhr-job-results {
	min-height: 12rem;
	transition: opacity 120ms ease-in-out;
}

.yayhr-job-results[aria-busy="true"] {
	cursor: progress;
}

/* Nothing moves for somebody who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.yayhr-job-results {
		transition: none;
	}
}

.yayhr-job__body {
	margin: 1rem 0;
}

.yayhr-link-quiet {
	color: var(--yayhr-muted, #555550);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.yayhr-link-quiet:hover,
.yayhr-link-quiet:focus {
	color: var(--yayhr-primary, #00633b);
}

.yayhr-muted {
	color: var(--yayhr-muted, #555550);
	font-size: 0.9em;
}

/* Sign up to hear about new positions. */
.yayhr-job-alert {
	margin-top: 2rem;
	border: 1px solid var(--yayhr-border, #c9c5c0);
	border-radius: var(--yayhr-radius, 6px);
	padding: 1.25rem;
	background: var(--yayhr-surface, #fff);
}

.yayhr-job-alert h3 {
	margin-top: 0;
}

/* Grouped fields on the submission form. */
.yayhr-fieldset {
	border: 1px solid var(--yayhr-border, #c9c5c0);
	border-radius: var(--yayhr-radius, 6px);
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
}

.yayhr-fieldset legend {
	font-weight: 600;
	padding: 0 0.4rem;
}

.yayhr-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 1.25rem;
}

/* The dashboard's controls. Each is its own form, so they are laid out as a
   row rather than stacking the way block-level forms would. */
.yayhr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.yayhr-inline-form {
	display: inline-block;
	margin: 0;
}

/* A draft, as it will look. */
.yayhr-job-preview__body {
	border: 1px solid var(--yayhr-border, #c9c5c0);
	border-radius: var(--yayhr-radius, 6px);
	padding: 1.5rem;
	background: var(--yayhr-surface, #fff);
}

.yayhr-preview-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 1.25rem;
}

/* Labels inside a generated chart. They inherit the interface stack rather than
   the SVG default, so a mind map reads like the rest of the screen. */
.yayhr-chart__label {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	dominant-baseline: middle;
}

/* The mind map is wide; let it scroll on its own rather than the page. */
.yayhr-mindmap {
	overflow-x: auto;
}

.yayhr-mindmap .yayhr-chart--mindmap {
	max-width: 100%;
	height: auto;
}

/* ── Print: letters and certificates only ─────────────────────────────── */

@media print {
	.yayhr-tabs,
	.yayhr-filters,
	.yayhr-button,
	form {
		display: none !important;
	}

	.yayhr-certificate,
	.yayhr-letter {
		border: none;
	}
}