/**
 * Front-end styles for EVOQ: FNG Score System.
 *
 * Minimal by design in v1. The [fng_birdie_count] shortcode outputs a
 * .fng-birdie-count element that themes can style. This file is intentionally
 * NOT auto-enqueued yet — styling is left to the host theme until the profile
 * and selector UI milestones land.
 */

.fng-birdie-count {
	font-weight: 600;
}

.fng-birdie-count--guest,
.fng-birdie-count--denied {
	font-weight: 400;
	opacity: 0.8;
}

/* Recipient autocomplete selector (scoped to the Birdie form). */
.fng-recipient-results {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	position: absolute;
	z-index: 9999;
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
}

.fng-recipient-option {
	padding: 8px 12px;
	cursor: pointer;
	line-height: 1.3;
}

.fng-recipient-option:hover,
.fng-recipient-option.is-active {
	background: #2271b1;
	color: #fff;
}

.fng-recipient-empty {
	padding: 8px 12px;
	color: #646970;
	font-style: italic;
}

.fng-recipient-status {
	display: block;
	margin-top: 4px;
	font-size: 0.85em;
	color: #646970;
}

/* Dashboard cards (theme-neutral; relies on inherited fonts/colors). */
.fng-dashboard__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 1rem;
}

.fng-dashboard__card {
	margin: 0;
}

.fng-dashboard__link {
	display: block;
	height: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid currentColor;
	border-radius: 8px;
	text-decoration: none;
}

.fng-dashboard__title {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.fng-dashboard__desc {
	display: block;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Profile table. */
.fng-profile__table {
	width: 100%;
	max-width: 520px;
	border-collapse: collapse;
}

.fng-profile__table th,
.fng-profile__table td {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.25 );
	vertical-align: top;
}

.fng-profile__note {
	margin-top: 0.75rem;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Friendly workflow status pills. */
.fng-status {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.6;
}

.fng-status--approved {
	background: #edf7ed;
	color: #1a7f37;
}

.fng-status--rejected {
	background: #fcebea;
	color: #d63638;
}

.fng-status--pending {
	background: #fef8e7;
	color: #8a6d00;
}

/* Invitation waiting states — a distinct, calmer blue so they read as
   "in progress, no action needed" rather than a stalled approval. */
.fng-status--waiting_recipient,
.fng-status--waiting_setup {
	background: #eaf2fb;
	color: #1e5a94;
}

/* ==========================================================================
   S.C.O.R.E. front-end application shell (Milestone 6).
   Scoped to .fng-app / .fng-* plugin markup so the theme is never overridden.
   Uses the TeamFGI navy/blue language via a small token set with fallbacks.
   ========================================================================== */
/* Design tokens — scoped to S.C.O.R.E. pages only (private-club + modern SaaS).
   Defined on :root AND body.fng-score-page: custom properties paint nothing on
   their own (every consumer is a .fng-* selector, so blast radius is nil), and
   the :root copy closes a real gap — sheets can load on pages that never carry
   the body class (e.g. Gravity Forms pages via RecipientSelector::enqueue()). */
:root,
body.fng-score-page {
	--fng-navy: #16324f;
	--fng-navy-2: #1e3a5f;
	--fng-blue: #2271b1;
	--fng-blue-soft: #eaf2fb;
	--fng-green: #2f8f4e;
	--fng-green-strong: #237a40;
	--fng-green-soft: #eef7f0;
	--fng-gold-soft: #fdf6e3;
	--fng-gold-ink: #7a5c00;
	--fng-red-soft: #fcecec;
	--fng-red-ink: #a12622;
	--fng-ink: #1d2733;
	--fng-muted: #5b6b7b;
	--fng-line: #e5eaf0;
	--fng-surface: #ffffff;
	--fng-bg: #f5f8fa;
	--fng-radius: 12px;
	--fng-radius-sm: 8px;
	--fng-radius-pill: 999px;
	--fng-shadow: 0 1px 2px rgba(16,40,64,0.06), 0 2px 8px rgba(16,40,64,0.05);
	--fng-shadow-hover: 0 6px 20px rgba(16,40,64,0.12);
	--fng-maxw: 1180px;

	/* Spacing scale (M6.18) — each step is the mode of a cluster of pre-existing
	   literals across the file, so migrating a rule to a token is a lookup, not
	   a judgement call. Introduced here; the Organization surface and shared
	   components (M6.18) consume it, existing untouched screens keep literals
	   until a future milestone touches them. */
	--fng-space-3xs: 0.25rem;
	--fng-space-2xs: 0.375rem;
	--fng-space-xs: 0.5rem;
	--fng-space-sm: 0.75rem;
	--fng-space-md: 1rem;
	--fng-space-lg: 1.5rem;
	--fng-space-xl: 2rem;
	--fng-space-2xl: 3rem;

	/* Type scale (M6.18). -sm is the single "secondary meta" size (collapses
	   five near-duplicate sizes across the Organization surface); -2xl is the
	   single stat-number size (collapses .fng-ovcard__num vs .fng-stat__num). */
	--fng-text-2xs: 0.72rem;
	--fng-text-xs: 0.78rem;
	--fng-text-sm: 0.85rem;
	--fng-text-base: 0.95rem;
	--fng-text-md: 1.05rem;
	--fng-text-lg: 1.2rem;
	--fng-text-xl: 1.5rem;
	--fng-text-2xl: 1.85rem;
	--fng-text-3xl: 3.2rem;

	--fng-lh-tight: 1.15;
	--fng-lh-snug: 1.35;
	--fng-lh-base: 1.55;

	--fng-fw-med: 600;
	--fng-fw-bold: 700;
	--fng-fw-black: 800;

	--fng-avatar-size: 56px;
	--fng-avatar-size-sm: 38px;

	/* Interactive control height (M6.20). One number for every top-level control
	   — nav search, Menu toggle, buttons — so they cannot drift apart again.
	   44px is the existing .fng-btn min-height and the accessible touch target,
	   so adopting it costs nothing and settles the 38 / 42.8 / 44 three-way
	   disagreement that misaligned the header actions. */
	--fng-control-h: 44px;
}
.fng-app {
	color: var(--fng-ink);
	max-width: var(--fng-maxw);
	margin-inline: auto;
	font-size: 16px;
	line-height: 1.55;
}
.fng-app *,
.fng-app *::before,
.fng-app *::after { box-sizing: border-box; }
.fng-app__body { margin-top: 1.25rem; }

/* Breadcrumb */
.fng-breadcrumb { margin: 0 0 0.75rem; font-size: 0.9rem; }
.fng-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.fng-crumb { color: var(--fng-muted); }
.fng-crumb:not(:last-child)::after { content: "›"; margin-left: 0.35rem; color: var(--fng-line); }
.fng-crumb a { color: var(--fng-blue); text-decoration: none; }
.fng-crumb a:hover { text-decoration: underline; }
.fng-crumb--current { color: var(--fng-ink); font-weight: 600; }
.fng-crumb__sep { color: var(--fng-line); }

/* Sub-navigation */
.fng-subnav { border-bottom: 2px solid var(--fng-line); margin-bottom: 1.25rem; }
.fng-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.fng-subnav__item a { display: inline-block; padding: 0.55rem 0.9rem; color: var(--fng-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; }
.fng-subnav__item a:hover { color: var(--fng-navy); }
.fng-subnav__item--active a { color: var(--fng-navy); border-bottom-color: var(--fng-blue); font-weight: 700; }

/* Dashboard */
.fng-dashboard__intro h1 { color: var(--fng-navy); margin: 0 0 0.25rem; }
.fng-dashboard__intro p { color: var(--fng-muted); margin: 0 0 1.5rem; }
.fng-dashboard__group { margin-bottom: 1.75rem; }
.fng-dashboard__group h2 { color: var(--fng-navy); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.75rem; }

/* Cards — 3 per row desktop, 2 tablet, 1 mobile; content ~66% / visual ~33%. */
.fng-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
@media (max-width: 1024px) { .fng-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .fng-cards { grid-template-columns: 1fr; } }

.fng-card {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: stretch;
	min-height: 132px;
	background: var(--fng-surface);
	border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius);
	box-shadow: var(--fng-shadow);
	text-decoration: none;
	color: var(--fng-ink);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.fng-card:hover { box-shadow: var(--fng-shadow-hover); transform: translateY(-3px); border-color: #cfe0d6; }
.fng-card:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem 1.25rem; }
.fng-card__title { font-weight: 700; font-size: 1.05rem; color: var(--fng-navy); }
.fng-card__desc { font-size: 0.92rem; color: var(--fng-muted); flex: 1 1 auto; }
.fng-card__cue { margin-top: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--fng-green-strong); }
.fng-card__cue::after { content: " \2192"; }
.fng-card__icon {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, var(--fng-green-soft), #ffffff 85%);
	border-left: 1px solid var(--fng-line);
	color: var(--fng-green-strong);
	position: relative;
}
.fng-card__icon::after {
	/* faint putting-green curve accent */
	content: ""; position: absolute; right: -30%; bottom: -40%;
	width: 120%; height: 120%; border-radius: 50%;
	border: 2px solid rgba(47,143,78,0.12);
}
.fng-card__icon .fng-icon { width: 40px; height: 40px; position: relative; z-index: 1; }

/* Buttons — see the scoped .fng-app .fng-btn rules in the M6.2 section below. */

/* Toolbar / filters */
.fng-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
.fng-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.fng-filters input, .fng-filters select { padding: 0.45rem 0.6rem; border: 1px solid var(--fng-line); border-radius: 6px; }

/* Tables */
.fng-table-wrap { overflow-x: auto; }
.fng-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); overflow: hidden; }
.fng-table th, .fng-table td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--fng-line); font-size: 0.92rem; vertical-align: top; }
.fng-table thead th { background: var(--fng-bg); color: var(--fng-navy); font-weight: 700; }
.fng-table tbody tr:hover { background: #fafcff; }

/* Badges / status */

/* Forms */
.fng-form-wrap { background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.25rem 1.5rem; max-width: 640px; }
.fng-form-wrap h2 { color: var(--fng-navy); margin-top: 0; }
.fng-field { margin-bottom: 1rem; }
.fng-field label { display: block; font-weight: 600; margin-bottom: 0.3rem; color: var(--fng-navy); }
.fng-field input, .fng-field select { width: 100%; max-width: 420px; padding: 0.5rem 0.6rem; border: 1px solid var(--fng-line); border-radius: 6px; }
.fng-req { color: #d63638; }
.fng-help { font-size: 0.85rem; color: var(--fng-muted); margin: 0.25rem 0 0; }
.fng-form-actions { display: flex; gap: 0.6rem; margin-top: 1.25rem; }

/* Notices — one consistent treatment (radius/padding/spacing) across every
   save/action message; only the tone (colour) varies by severity. No top margin
   so the notice sits a consistent distance below the subnav and the page title
   spacing is unchanged whether or not a notice is present. */
.fng-notice { border-radius: var(--fng-radius-sm); padding: 0.75rem 1rem; margin: 0 0 1.25rem; font-size: 0.95rem; }
.fng-notice p { margin: 0; }
.fng-notice p + p { margin-top: 0.35rem; }
.fng-notice--error { background: #fcebea; border: 1px solid #f0c4c2; color: #8a1f1a; }
.fng-notice--success { background: #edf7ed; border: 1px solid #bfe3bf; color: #12611f; }
.fng-notice--warning { background: var(--fng-gold-soft); border: 1px solid #ecd9a1; color: var(--fng-gold-ink); }
.fng-notice--info { background: #f4f7fb; border: 1px solid #d6e0ec; border-left: 3px solid var(--fng-blue); color: var(--fng-muted); }
.fng-notice ul { margin: 0.4rem 0 0 1.1rem; }

/* Empty states */
.fng-empty { background: #fff; border: 1px dashed var(--fng-line); border-radius: var(--fng-radius); padding: 1.75rem; text-align: center; color: var(--fng-muted); }
.fng-empty a { color: var(--fng-blue); font-weight: 600; }

/* Profile card */
.fng-profile-card { background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.5rem; max-width: 640px; }
.fng-profile-card__header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--fng-line); }
.fng-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: var(--fng-avatar-size); height: var(--fng-avatar-size); border-radius: 50%;
	background: var(--fng-navy); color: #fff; font-weight: var(--fng-fw-bold); font-size: 1.2rem;
}
/* Compact variant (M6.18) — same component, smaller size, e.g. entity identity
   rows. Replaces the formerly-separate .fng-org2__avatar (identical rule,
   hardcoded diameter written twice — here and in a sibling margin calc). */
.fng-avatar--sm { width: var(--fng-avatar-size-sm); height: var(--fng-avatar-size-sm); font-size: var(--fng-text-sm); }
/* Glyph variant — a square-ish tile for non-person entities (location,
   department, attention, …), tinted by tone instead of carrying initials. */
.fng-avatar--glyph { border-radius: var(--fng-radius-sm); background: var(--fng-bg); color: var(--fng-navy); }
.fng-avatar--glyph.fng-avatar--navy { background: var(--fng-navy); color: #fff; }
.fng-avatar--glyph.fng-avatar--blue { background: var(--fng-blue-soft); color: #1e5a94; }
.fng-avatar--glyph.fng-avatar--green { background: var(--fng-green-soft); color: var(--fng-green-strong); }
.fng-avatar--glyph.fng-avatar--gold { background: var(--fng-gold-soft); color: var(--fng-gold-ink); }
.fng-avatar--glyph.fng-avatar--neutral { background: var(--fng-bg); color: var(--fng-muted); }
.fng-profile-card__id h2 { margin: 0; color: var(--fng-navy); }
.fng-profile-card__role { margin: 0.1rem 0 0; color: var(--fng-muted); font-weight: 600; }
.fng-profile-card__score { margin-left: auto; text-align: center; }
.fng-profile-card__score-num { display: block; font-size: 2rem; font-weight: 800; color: var(--fng-blue); line-height: 1; }
.fng-profile-card__score-num .fng-birdie-count { font-weight: 800; }
.fng-profile-card__score-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fng-muted); }
.fng-profile-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; margin: 1.1rem 0 0; }
.fng-profile-card__item dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fng-muted); margin: 0; }
.fng-profile-card__item dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--fng-ink); }

/* System Check */
.fng-check-list, .fng-status-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.fng-check { padding: 0.55rem 0.75rem; border-radius: 6px; margin-bottom: 0.35rem; background: #fff; border: 1px solid var(--fng-line); }
.fng-check__icon { display: inline-block; width: 1.4em; font-weight: 800; }
.fng-check--ok .fng-check__icon { color: #1a7f37; }
.fng-check--warn .fng-check__icon { color: #8a6d00; }
.fng-check--error .fng-check__icon { color: #d63638; }
.fng-status-list li { padding: 0.4rem 0; font-weight: 600; color: var(--fng-navy); }
.fng-advanced summary { cursor: pointer; font-weight: 600; color: var(--fng-blue); }
.fng-summary { font-weight: 600; color: var(--fng-navy); }

/* Responsive */
@media (max-width: 600px) {
	.fng-cards { grid-template-columns: 1fr; }
	.fng-subnav ul { gap: 0; }
	.fng-subnav__item a { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
	.fng-profile-card__header { flex-wrap: wrap; }
	.fng-profile-card__score { margin-left: 0; width: 100%; text-align: left; }
	.fng-filters input, .fng-filters select { flex: 1 1 100%; }
}

/* ==========================================================================
   Milestone 6.1 — scoped theme spacing tweak + settings/profile-account bits.
   Applies ONLY on S.C.O.R.E. pages via the body.fng-score-page class added by
   Frontend\Navigation; the global TeamFGI theme is never modified.
   ========================================================================== */
body.fng-score-page .ct-container-full {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Settings form two-up fields */
.fng-settings-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 760px; }
.fng-settings-group { background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1rem 1.25rem; }
.fng-settings-group h3 { color: var(--fng-navy); margin: 0 0 0.75rem; font-size: 1rem; }
.fng-settings-row { margin-bottom: 0.85rem; }
.fng-settings-row label { display: block; font-weight: 600; color: var(--fng-navy); margin-bottom: 0.2rem; font-size: 0.9rem; }
.fng-settings-row input[type="text"],
.fng-settings-row textarea { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--fng-line); border-radius: 6px; }

/* Account (profile self-service) */
.fng-account { background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.25rem 1.5rem; max-width: 640px; margin-top: 1.5rem; }
.fng-account h2 { color: var(--fng-navy); margin-top: 0; }
.fng-account__note { background: #f6f8fb; border-left: 3px solid var(--fng-blue); padding: 0.6rem 0.85rem; border-radius: 0 6px 6px 0; color: var(--fng-muted); font-size: 0.9rem; }

/* Autocomplete (supervisor picker) reuses .fng-recipient-results styling. */
.fng-autocomplete { position: relative; max-width: 420px; }

/* Import instructions */
.fng-instructions { background: #f6f8fb; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.fng-instructions h3 { margin: 0 0 0.5rem; color: var(--fng-navy); font-size: 1rem; }
.fng-instructions ol { margin: 0 0 0.5rem 1.1rem; }
.fng-instructions .fng-roles-help { margin-top: 0.75rem; font-size: 0.9rem; }
.fng-instructions .fng-roles-help dt { font-weight: 700; color: var(--fng-navy); margin-top: 0.4rem; }
.fng-instructions .fng-roles-help dd { margin: 0 0 0.2rem; color: var(--fng-muted); }
.fng-downloads { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }

/* ==========================================================================
   Milestone 6.2 — premium S.C.O.R.E. UI system (scoped to .fng-app).
   ========================================================================== */

/* Page header component */
.fng-page-header { margin: 0 0 1.5rem; }
.fng-page-header__title { color: var(--fng-navy); font-size: 1.75rem; line-height: 1.15; margin: 0 0 0.3rem; font-weight: 800; }
.fng-page-header__desc { color: var(--fng-muted); margin: 0; max-width: 60ch; }
.fng-page-header--bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Section label with green dot */
.fng-section-label { display: flex; align-items: center; gap: 0.5rem; color: var(--fng-navy); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.85rem; }
.fng-section-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fng-green); box-shadow: 0 0 0 3px var(--fng-green-soft); }
.fng-dashboard__group { margin-bottom: 2rem; }

/* Subtle dashboard hero */
.fng-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--fng-green-soft), var(--fng-blue-soft)); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.4rem 1.6rem; margin-bottom: 1.75rem; }
.fng-hero h1 { color: var(--fng-navy); margin: 0 0 0.25rem; font-size: 1.7rem; font-weight: 800; }
.fng-hero p { color: var(--fng-muted); margin: 0; max-width: 60ch; }
.fng-hero__art { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--fng-green); opacity: 0.5; }
.fng-hero__art svg { width: 76px; height: 76px; }
@media (max-width: 680px) { .fng-hero__art { display: none; } }

/* ---- Shared table system: our tables + GravityView tables ---- */
.fng-table-wrap, .fng-app .gv-table-container, .fng-app .gv-container { overflow-x: auto; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); background: var(--fng-surface); box-shadow: var(--fng-shadow); }
.fng-table, .fng-app .gv-table-view { width: 100%; border-collapse: collapse; background: transparent; border: 0; margin: 0; }
.fng-table th, .fng-table td,
.fng-app .gv-table-view th, .fng-app .gv-table-view td { text-align: left; padding: 0.8rem 1rem; border: 0; border-bottom: 1px solid var(--fng-line); font-size: 0.93rem; vertical-align: middle; }
.fng-table thead th, .fng-app .gv-table-view thead th { background: #f2f6f4; color: var(--fng-navy); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; border-bottom: 2px solid #dbe5df; white-space: nowrap; }
.fng-table tbody tr:last-child td, .fng-app .gv-table-view tbody tr:last-child td { border-bottom: 0; }
.fng-table tbody tr:hover, .fng-app .gv-table-view tbody tr:hover { background: #f7fbf8; }
.fng-app .gv-table-view a { color: var(--fng-blue); }

/* Filter bar (our filters + GravityView search widget) */
.fng-filterbar, .fng-app .gv-widget-search { background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 1rem 1.15rem; margin-bottom: 1.25rem; }
.fng-app .gv-widget-search .gv-search-box { margin: 0 0.75rem 0.5rem 0; }
.fng-app .gv-widget-search label { color: var(--fng-navy); font-weight: 600; font-size: 0.85rem; }
.fng-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0; }

/* ---- Form controls (scoped) ---- */
.fng-app input[type="text"], .fng-app input[type="email"], .fng-app input[type="search"],
.fng-app input[type="password"], .fng-app input[type="number"], .fng-app input[type="date"],
.fng-app select, .fng-app textarea,
.fng-app .gform_wrapper input[type="text"], .fng-app .gform_wrapper input[type="email"],
.fng-app .gform_wrapper textarea, .fng-app .gform_wrapper select,
.fng-app .gv-widget-search input[type="text"], .fng-app .gv-widget-search select {
	width: 100%; max-width: 460px; min-height: 46px; padding: 0.55rem 0.75rem;
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm);
	background: #fff; color: var(--fng-ink); font-size: 0.95rem; line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fng-app textarea, .fng-app .gform_wrapper textarea { min-height: 120px; }
.fng-app input:focus, .fng-app select:focus, .fng-app textarea:focus,
.fng-app .gform_wrapper input:focus, .fng-app .gform_wrapper textarea:focus, .fng-app .gform_wrapper select:focus {
	outline: none; border-color: var(--fng-green); box-shadow: 0 0 0 3px var(--fng-green-soft);
}
.fng-app label, .fng-app .gform_wrapper .gfield_label { color: var(--fng-navy); font-weight: 600; }
.fng-req, .fng-app .gform_required { color: var(--fng-red-ink); }

/* ---- Buttons ---- */
.fng-app .fng-btn, .fng-app .gform_wrapper .gform_footer input[type="submit"] {
	display: inline-flex; align-items: center; gap: 0.4rem; justify-content: center;
	min-height: 44px; padding: 0.55rem 1.15rem; border-radius: var(--fng-radius-sm);
	border: 1px solid var(--fng-line); background: #fff; color: var(--fng-navy);
	text-decoration: none; font-weight: 600; font-size: 0.92rem; line-height: 1.2;
	text-transform: none; letter-spacing: normal; cursor: pointer; width: auto;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fng-app .fng-btn:hover { border-color: var(--fng-green); color: var(--fng-green-strong); background: #fff; }
.fng-app .fng-btn--primary, .fng-app .gform_wrapper .gform_footer input[type="submit"] { background: var(--fng-green); border-color: var(--fng-green); color: #fff; }
.fng-app .fng-btn--primary:hover, .fng-app .gform_wrapper .gform_footer input[type="submit"]:hover { background: var(--fng-green-strong); border-color: var(--fng-green-strong); color: #fff; box-shadow: var(--fng-shadow-hover); transform: translateY(-1px); }
.fng-app .fng-btn--secondary { background: #fff; border-color: var(--fng-line); color: var(--fng-navy); }
.fng-app .fng-btn--danger { background: #fff; border-color: #e6b3b1; color: var(--fng-red-ink); }
.fng-app .fng-btn--danger:hover { background: var(--fng-red-soft); border-color: var(--fng-red-ink); color: var(--fng-red-ink); }
.fng-app .fng-btn--link { border: 0; background: none; color: var(--fng-blue); min-height: auto; padding: 0.25rem 0.35rem; }
.fng-app .fng-btn--small { min-height: 34px; padding: 0.3rem 0.7rem; font-size: 0.83rem; }
.fng-app .fng-btn:focus-visible, .fng-app .gform_wrapper .gform_footer input[type="submit"]:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* GravityView search submit button — match the primary S.C.O.R.E. button. High
   specificity (body.fng-score-page) so the theme's submit-button style never wins. */
body.fng-score-page .gv-widget-search input[type="submit"],
body.fng-score-page .gv-widget-search button[type="submit"],
body.fng-score-page .gv-widget-search .gv-search-button,
body.fng-score-page .gv-search-box-submit input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0.55rem 1.25rem; width: auto;
	background: var(--fng-green); border: 1px solid var(--fng-green); color: #fff;
	border-radius: var(--fng-radius-sm); font-weight: 600; font-size: 0.92rem;
	text-transform: none; letter-spacing: normal; cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.fng-score-page .gv-widget-search input[type="submit"]:hover,
body.fng-score-page .gv-widget-search button[type="submit"]:hover,
body.fng-score-page .gv-widget-search .gv-search-button:hover,
body.fng-score-page .gv-search-box-submit input[type="submit"]:hover {
	background: var(--fng-green-strong); border-color: var(--fng-green-strong);
	box-shadow: var(--fng-shadow-hover); transform: translateY(-1px);
}

/* Gravity Forms submit button. GF's "orbital" theme colors this button with a
   rule we can't outrank on specificity alone, so we recolor just the submit
   button here. The !important is deliberately narrow — scoped to S.C.O.R.E.
   pages (body.fng-score-page) and to the footer submit control only — so GF is
   never restyled globally; it only adopts the S.C.O.R.E. green on our pages.
   Covers both element types (this theme renders the control as a <button>). */
body.fng-score-page .gform_wrapper .gform_footer input[type="submit"],
body.fng-score-page .gform_wrapper .gform_footer button,
body.fng-score-page .gform_wrapper .gform-footer input[type="submit"],
body.fng-score-page .gform_wrapper .gform-footer button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 0.6rem 1.4rem; width: auto;
	background-color: var(--fng-green) !important;
	border: 1px solid var(--fng-green) !important;
	color: #fff !important;
	border-radius: var(--fng-radius-sm); font-weight: 600; font-size: 0.95rem;
	text-transform: none; letter-spacing: normal; cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.fng-score-page .gform_wrapper .gform_footer input[type="submit"]:hover,
body.fng-score-page .gform_wrapper .gform_footer button:hover,
body.fng-score-page .gform_wrapper .gform-footer input[type="submit"]:hover,
body.fng-score-page .gform_wrapper .gform-footer button:hover {
	background-color: var(--fng-green-strong) !important;
	border-color: var(--fng-green-strong) !important;
	box-shadow: var(--fng-shadow-hover); transform: translateY(-1px);
}

/* ---- Status + role badges ---- */
.fng-badge { display: inline-block; padding: 0.18em 0.7em; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; }
.fng-badge--active, .fng-status--approved { background: var(--fng-green-soft); color: var(--fng-green-strong); }
.fng-badge--inactive { background: #eef1f4; color: #5b6b7b; }
.fng-badge--warn, .fng-status--pending { background: var(--fng-gold-soft); color: var(--fng-gold-ink); }
.fng-status--rejected { background: var(--fng-red-soft); color: var(--fng-red-ink); }
.fng-status { display: inline-block; padding: 0.18em 0.7em; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }

/* ---- Leaderboard ----
   M6.26 removed the three top-place podium cards: they restated the first three
   rows of a table sitting immediately below them, and the S.C.O.R.E. track is
   now what makes the board readable. The rank bands below still mark the top
   ranks, so placement is not lost — it is just no longer duplicated. */
.fng-lb-row--top td { background: var(--fng-green-soft); }
.fng-lb-row--top .fng-leaderboard__rank { font-weight: 800; color: var(--fng-navy); }
.fng-leaderboard__count { font-weight: 700; color: var(--fng-green-strong); }
.fng-lb-count b { display: block; font-size: 1.4rem; color: var(--fng-green-strong); line-height: 1; }
.fng-lb-count span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fng-muted); }

/* ---- Settings tabs + accordions ---- */
.fng-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--fng-line); margin-bottom: 1.25rem; }
.fng-tab { border: 0; background: none; padding: 0.6rem 0.95rem; font-weight: 600; color: var(--fng-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.fng-tab:hover { color: var(--fng-navy); }
.fng-tab[aria-selected="true"] { color: var(--fng-navy); border-bottom-color: var(--fng-green); }
.fng-tabpanel[hidden] { display: none; }
.fng-accordion { border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); background: var(--fng-surface); margin-bottom: 0.6rem; overflow: hidden; }
.fng-accordion__head { width: 100%; text-align: left; background: #f7faf8; border: 0; padding: 0.75rem 1rem; font-weight: 700; color: var(--fng-navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.fng-accordion__head::after { content: "\25be"; color: var(--fng-muted); transition: transform .15s ease; }
.fng-accordion__head[aria-expanded="false"]::after { transform: rotate(-90deg); }
.fng-accordion__panel { padding: 0.85rem 1rem; }
.fng-accordion__panel[hidden] { display: none; }
.fng-settings-actions { position: sticky; bottom: 0; background: rgba(255,255,255,0.96); border-top: 1px solid var(--fng-line); padding: 0.85rem 0; margin-top: 1rem; display: flex; gap: 0.6rem; }

/* ---- Polished empty states ---- */
.fng-empty { background: var(--fng-surface); border: 1px dashed #cfd8e0; border-radius: var(--fng-radius); padding: 2.5rem 1.5rem; text-align: center; color: var(--fng-muted); }
.fng-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fng-green-soft); color: var(--fng-green-strong); margin-bottom: 0.85rem; }
.fng-empty h3 { color: var(--fng-navy); margin: 0 0 0.35rem; }
.fng-empty p { margin: 0 0 1rem; }
.fng-app .gv-no-results, .fng-app .gv-table-view td.gv-no-results { color: var(--fng-muted); font-style: italic; }

/* ---- Breadcrumb / subnav polish ---- */
.fng-breadcrumb { margin-bottom: 0.6rem; }
.fng-subnav { border-bottom: 1px solid var(--fng-line); margin-bottom: 1.5rem; overflow-x: auto; }
.fng-subnav ul { flex-wrap: nowrap; }
.fng-subnav__item a { white-space: nowrap; border-radius: 6px 6px 0 0; }
.fng-subnav__item--active a { color: var(--fng-green-strong); border-bottom-color: var(--fng-green); }

/* Toolbar (Add Employee etc.) */
.fng-toolbar { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.fng-app *, .fng-card, .fng-btn { transition: none !important; }
	.fng-card:hover { transform: none; }
}

/* ==========================================================================
   Milestone 6.3 — role-aware application shell & simplified home.
   Fewer boxes, larger data points, one primary action per surface.
   ========================================================================== */

/* Minimal application navigation (replaces the long subnav). */
.fng-appnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--fng-line); margin-bottom: 1.5rem; }
.fng-appnav__primary { list-style: none; display: flex; gap: 0.25rem; margin: 0; padding: 0; }
.fng-appnav__item a { display: inline-block; padding: 0.6rem 0.9rem; color: var(--fng-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.fng-appnav__item a:hover { color: var(--fng-navy); }
.fng-appnav__item--active a { color: var(--fng-navy); border-bottom-color: var(--fng-green); }
/* .fng-appnav__actions groups the search trigger + Menu so .fng-appnav's
   space-between still sees exactly two children (M6.19). */
.fng-appnav__actions { display: flex; align-items: center; gap: var(--fng-space-xs); }
.fng-appnav__search { display: inline-flex; align-items: center; justify-content: center; width: var(--fng-control-h); height: var(--fng-control-h); border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); color: var(--fng-navy); background: #fff; }
.fng-appnav__search:hover { border-color: var(--fng-green); }
.fng-appnav__search:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* Header search overlay (M6.19) — built by fng-org-search.js; the ?focus=search
   link it enhances is styled via .fng-org2__search on the page itself. */
.fng-orgsearch-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: var(--fng-space-2xl) var(--fng-space-md); }
.fng-orgsearch-overlay[hidden] { display: none; }
.fng-orgsearch-panel { width: 100%; max-width: 32rem; background: #fff; border-radius: var(--fng-radius); box-shadow: var(--fng-shadow-hover); padding: var(--fng-space-md); }
.fng-orgsearch-head { display: flex; align-items: center; gap: var(--fng-space-xs); }
.fng-orgsearch-input { flex: 1 1 auto; padding: var(--fng-space-xs) var(--fng-space-sm); border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); font-size: var(--fng-text-base); }
.fng-orgsearch-close { flex: 0 0 auto; width: 34px; height: 34px; border: none; background: transparent; font-size: var(--fng-text-xl); line-height: 1; color: var(--fng-muted); cursor: pointer; }
.fng-orgsearch-close:hover { color: var(--fng-navy); }
.fng-orgsearch-results { margin-top: var(--fng-space-sm); max-height: 60vh; overflow-y: auto; }
.fng-orgsearch-heading { margin: var(--fng-space-sm) 0 var(--fng-space-2xs); font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-black); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fng-muted); }
.fng-orgsearch-heading:first-child { margin-top: 0; }
.fng-orgsearch-row { display: block; padding: var(--fng-space-2xs) var(--fng-space-2xs); border-radius: var(--fng-radius-sm); color: var(--fng-ink); text-decoration: none; font-size: var(--fng-text-sm); }
a.fng-orgsearch-row:hover, a.fng-orgsearch-row:focus-visible { background: var(--fng-green-soft); color: var(--fng-green-strong); outline: none; }

/* Menu drawer / popover. */
/* display:flex (not block) so .fng-menu hugs its toggle exactly — as a block it
   inherited stray descendant margins and reported a taller box than the button
   it contains, pushing the toggle off the actions row's centre line (M6.20). */
.fng-menu { position: relative; display: flex; align-items: center; }
.fng-menu__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: var(--fng-control-h); line-height: 1; background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); padding: 0 0.85rem; font-weight: 600; color: var(--fng-navy); cursor: pointer; }
.fng-menu__toggle:hover { border-color: var(--fng-green); }
.fng-menu__toggle:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-menu__toggle-bars { position: relative; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.fng-menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; min-width: 260px; background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow-hover); padding: 0.5rem; }
.fng-menu__panel[hidden] { display: none; }
.fng-menu__heading { margin: 0.5rem 0.75rem 0.25rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fng-muted); }
.fng-menu__item { display: block; padding: 0.55rem 0.75rem; border-radius: var(--fng-radius-sm); color: var(--fng-ink); text-decoration: none; font-weight: 500; }
.fng-menu__item:hover, .fng-menu__item:focus-visible { background: var(--fng-green-soft); color: var(--fng-green-strong); outline: none; }

/* Home layout. */
.fng-home { display: flex; flex-direction: column; gap: 1.25rem; }
/* Side-by-side home panels stretch to a shared baseline (equal height). */
.fng-home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; align-items: stretch; }
/* Only Activity exists (an employee with no leaderboard access): one track, so
   the card fills the row instead of sitting half-width beside dead space. The
   modifier is set from the state that decides it, never inferred from the DOM. */
.fng-home-grid--single { grid-template-columns: 1fr; }
.fng-home-grid > .fng-panel { display: flex; flex-direction: column; }
.fng-home-grid > .fng-panel .fng-feed,
.fng-home-grid > .fng-panel .fng-lbmini { flex: 1 1 auto; }
@media (max-width: 900px) { .fng-home-grid { grid-template-columns: 1fr; } }

/* Hero panel — the visual center. Three deliberate columns on desktop
   (greeting + actions | score | decorative mark) instead of the old two-child
   flex, which left .fng-hero-panel__main unstyled and produced a tall panel
   with a large dead area beside it. Proportions ~1fr .7fr .7fr per M6.20. */
.fng-hero-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fng-space-md); background: linear-gradient(135deg, var(--fng-green-soft), var(--fng-blue-soft)); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: var(--fng-space-lg) var(--fng-space-xl); }
.fng-hero-panel__main { display: flex; flex-direction: column; gap: var(--fng-space-md); min-width: 0; }
.fng-hero-panel__welcome { margin: 0; color: var(--fng-navy); font-size: 1.6rem; line-height: var(--fng-lh-tight); font-weight: var(--fng-fw-black); }
/* Score is its own column: stacked so the number carries the visual weight. */
.fng-hero-panel__score { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fng-space-3xs); margin: 0; }
.fng-hero-panel__num { font-size: 3.2rem; line-height: 1; font-weight: var(--fng-fw-black); color: var(--fng-green-strong); }
.fng-hero-panel__unit { font-size: var(--fng-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fng-muted); font-weight: var(--fng-fw-bold); }
.fng-hero-panel__actions { display: flex; flex-wrap: wrap; gap: var(--fng-space-xs); margin: 0; }
/* A small badge anchoring the row, in the same recognition language used for
   badges elsewhere — not a large decorative illustration competing with the
   score at the other end. */
.fng-hero-panel__art {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; flex: 0 0 auto;
	border-radius: var(--fng-radius-pill);
	background: rgba(255, 255, 255, 0.75);
	color: var(--fng-green-strong);
}
.fng-hero-panel__art svg { width: 28px; height: 28px; }
/* The KPI closes the row: right-aligned, its own column, visually isolated. */
.fng-hero-panel__score { text-align: right; align-items: flex-end; justify-self: end; }
/* One breakpoint set, not three. The previous 680/768/later trio overlapped so
   that the 2.6rem rule was dead code — a later, wider media query always won. */
@media (max-width: 900px) {
	/* Badge + greeting share the first row, the score keeps its own column. */
	.fng-hero-panel { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 680px) {
	/* Phones: badge and greeting on one line, then the count, then the buttons.
	   The badge stays with the name it introduces rather than orphaning above it. */
	.fng-hero-panel {
		grid-template-columns: auto minmax(0, 1fr);
		padding: var(--fng-space-md); gap: var(--fng-space-sm);
	}
	.fng-hero-panel__main { grid-column: 2; }
	.fng-hero-panel__score { grid-column: 1 / -1; text-align: left; align-items: flex-start; justify-self: start; }
	.fng-hero-panel__art { width: 44px; height: 44px; }
	.fng-hero-panel__art svg { width: 22px; height: 22px; }
	.fng-hero-panel__welcome { font-size: 1.3rem; }
	.fng-hero-panel__num { font-size: 2.4rem; }
}

/* Panels — light containers used sparingly for real content. */
.fng-panel { background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 1.25rem 1.4rem; }
.fng-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.fng-panel__head .fng-section-label { margin: 0; }
.fng-panel__lead { margin: 0; color: var(--fng-navy); font-size: 1.2rem; font-weight: 800; }
.fng-panel__sub { margin: 0.25rem 0 0; color: var(--fng-muted); }
.fng-panel__actions { margin-top: 0.9rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.fng-panel--pending.is-actionable { border-left: 4px solid var(--fng-green); background: linear-gradient(90deg, var(--fng-green-soft), #fff 40%); }

/* Stat tiles (KPIs / team). */
.fng-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 780px) { .fng-stats { grid-template-columns: repeat(2, 1fr); } }
/* .fng-ovcard is an alias of .fng-stat (M6.18 consolidation) — kept as a second
   class name on Organization/System-Overview cards rather than removed, since
   assets/css/override.css (client-owned, never edited by us) may target it. */
.fng-stat, .fng-ovcard { background: #f7faf8; border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); padding: var(--fng-space-md) var(--fng-space-sm); }
.fng-stat__num, .fng-ovcard__num { display: block; font-size: var(--fng-text-2xl); font-weight: var(--fng-fw-black); color: var(--fng-navy); line-height: var(--fng-lh-tight); }
.fng-stat__label, .fng-ovcard__label { display: block; font-size: var(--fng-text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--fng-muted); margin-top: 0.15rem; }
.fng-stat--warn, .fng-ovcard--warn { background: var(--fng-gold-soft); border-color: #ecd9a1; }
.fng-stat--warn .fng-stat__num, .fng-ovcard--warn .fng-ovcard__num { color: var(--fng-gold-ink); }
.fng-stat--ok .fng-stat__num, .fng-ovcard--ok .fng-ovcard__num { color: var(--fng-green-strong); }

/* "View all …" text links. */
.fng-morelink { color: var(--fng-blue); text-decoration: none; font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.fng-morelink::after { content: " \2192"; }
.fng-morelink:hover { text-decoration: underline; }

/* Activity feed. */
.fng-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fng-feed__item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--fng-line); }
.fng-feed__item:last-child { border-bottom: 0; }
.fng-feed__body { flex: 1 1 auto; min-width: 0; }
.fng-feed__headline { margin: 0; font-weight: 700; color: var(--fng-navy); }
.fng-feed__reason { margin: 0.15rem 0 0; color: var(--fng-muted); font-style: italic; }
.fng-feed__date { flex: 0 0 auto; color: var(--fng-muted); font-size: 0.82rem; white-space: nowrap; padding-top: 0.15rem; }
.fng-feed .fng-status { flex: 0 0 auto; margin-top: 0.1rem; }
.fng-activity .fng-tabpanel { padding-top: 0.5rem; }

/* Compact leaderboard preview. */
.fng-lbmini { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.fng-lbmini__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.4rem; border-radius: var(--fng-radius-sm); }
.fng-lbmini__row.is-me { background: var(--fng-green-soft); }
.fng-lbmini__rank { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef1f4; color: var(--fng-navy); font-weight: 800; font-size: 0.85rem; }
.fng-lbmini__row:nth-child(1) .fng-lbmini__rank { background: #faf3d6; color: #7a5c00; }
.fng-lbmini__name { flex: 1 1 auto; font-weight: 600; color: var(--fng-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fng-lbmini__count { flex: 0 0 auto; font-weight: 800; color: var(--fng-green-strong); }
.fng-lbmini__you { margin: 0.75rem 0 0; padding-top: 0.6rem; border-top: 1px dashed var(--fng-line); font-weight: 700; color: var(--fng-navy); }

/* Management hub — grouped link lists, not promotional cards. */
.fng-manage-hub { display: flex; flex-direction: column; gap: 1.5rem; }
.fng-linklist { background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); overflow: hidden; }
.fng-linkrow { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.15rem; border-bottom: 1px solid var(--fng-line); text-decoration: none; color: var(--fng-ink); }
.fng-linkrow:last-child { border-bottom: 0; }
.fng-linkrow:hover { background: #f7fbf8; }
.fng-linkrow__text { flex: 1 1 auto; min-width: 0; }
.fng-linkrow__title { display: block; font-weight: 700; color: var(--fng-navy); }
.fng-linkrow__desc { display: block; font-size: 0.88rem; color: var(--fng-muted); }
.fng-linkrow__arrow { flex: 0 0 auto; color: var(--fng-muted); font-size: 1.4rem; line-height: 1; }
.fng-linkrow:hover .fng-linkrow__arrow { color: var(--fng-green-strong); }

/* Award confirmation. */
.fng-confirm { max-width: 520px; margin: 1rem auto; text-align: center; background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 2.25rem 1.75rem; }
.fng-confirm__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--fng-green-soft); color: var(--fng-green-strong); margin-bottom: 1rem; }
.fng-confirm__icon svg { width: 34px; height: 34px; }
.fng-confirm__title { margin: 0 0 0.35rem; color: var(--fng-navy); font-size: 1.5rem; }
.fng-confirm__msg { margin: 0 0 1.25rem; color: var(--fng-muted); }
.fng-confirm__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

/* Gravity Forms elsewhere stay a comfortable reading width; the Award form uses
   the full application panel width (overridden in the M6.5 award rules below). */
body.fng-score-page .fng-app .gform_wrapper { max-width: 620px; }

/* ==========================================================================
   Milestone 6.4 — product interaction polish.
   ========================================================================== */

/* Breadcrumb removed in M6.4 — neutralize any legacy markup if present. */
.fng-app .fng-breadcrumb { display: none; }

/* --- Segmented control (secondary filter; visually distinct from primary nav) --- */
.fng-segmented { display: inline-flex; gap: 2px; padding: 3px; background: #eef2f4; border: 1px solid var(--fng-line); border-radius: 999px; margin: 0 0 1.25rem; }
.fng-segmented__option { appearance: none; border: 0; background: transparent; color: var(--fng-muted); font-weight: 600; font-size: 0.88rem; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; line-height: 1.3; }
.fng-segmented__option:hover { color: var(--fng-navy); }
.fng-segmented__option[aria-selected="true"] { background: #fff; color: var(--fng-green-strong); box-shadow: 0 1px 2px rgba(16,40,64,0.12); }
.fng-segmented__option:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* --- Recipient search: present people, not database rows --- */
.fng-recipient-results {
	list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 9999;
	left: 0; right: 0; max-height: 320px; overflow-y: auto; background: #fff;
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius);
	box-shadow: var(--fng-shadow-hover); max-width: 520px;
}
.fng-recipient-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; cursor: pointer; border-radius: var(--fng-radius-sm); line-height: 1.3; }
.fng-recipient-option:hover, .fng-recipient-option.is-active { background: var(--fng-green-soft); color: inherit; }
.fng-recipient-option__body { display: flex; flex-direction: column; min-width: 0; }
.fng-recipient-option__name { font-weight: 700; color: var(--fng-navy); }
.fng-recipient-option__meta { font-size: 0.82rem; color: var(--fng-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fng-recipient-empty { padding: 0.75rem 0.7rem; color: var(--fng-muted); font-style: italic; }

/* Friendly avatar in selector contexts (smaller + soft-green vs the navy profile avatar). */
.fng-recipient-option .fng-avatar,
.fng-recipient-selected .fng-avatar { width: 40px; height: 40px; font-size: 0.9rem; background: var(--fng-green-soft); color: var(--fng-green-strong); flex: 0 0 auto; }

/* Selected recipient card — "I am giving Sadie a Birdie." */
.fng-recipient-selected { display: flex; align-items: center; gap: 0.85rem; max-width: 520px; padding: 0.7rem 0.85rem; background: var(--fng-green-soft); border: 1px solid #cfe6d6; border-radius: var(--fng-radius); }
.fng-recipient-selected__id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
/* The name is the point of this card, so it is the largest thing in it. */
.fng-recipient-selected__name { font-weight: var(--fng-fw-black); color: var(--fng-navy); font-size: var(--fng-text-lg); line-height: var(--fng-lh-tight); }
.fng-recipient-selected__meta { font-size: var(--fng-text-sm); color: var(--fng-muted); }
/* A small recognition badge in the same flag language as the aside panel and
   the allowance line — a supporting cue, not an avatar chip. */
.fng-recipient-selected__badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: 0 0 auto;
	border-radius: var(--fng-radius-pill);
	background: #fff; color: var(--fng-green-strong);
	border: 1px solid #cfe6d6;
}
.fng-recipient-change { flex: 0 0 auto; appearance: none; border: 0; background: none; color: var(--fng-blue); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: 6px; }
.fng-recipient-change:hover { text-decoration: underline; }
.fng-recipient-change:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* --- Award: one focused recognition surface --- */
.fng-award { max-width: none; margin: 0; }
.fng-award__panel { position: relative; background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 2rem 2.25rem 2.25rem; overflow: hidden; }
.fng-award__panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--fng-green), var(--fng-blue)); opacity: 0.8; }
.fng-award__mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fng-green-soft); color: var(--fng-green-strong); margin: 0 0 1.25rem; }
.fng-award__mark svg { width: 30px; height: 30px; }
.fng-award__submit { gap: 0.5rem; }
.fng-award__submit-icon { display: inline-flex; }
.fng-award__submit-icon svg { width: 18px; height: 18px; }
.fng-award__submit-arrow { font-weight: 700; }
/* Award form controls breathe within the panel — but the gap between field
   groups is kept tight (~28px). Gravity Forms' orbital theme spaces rows with a
   grid row-gap, so we set that (not just .gfield margins) to actually tighten it. */
.fng-award .gform_wrapper { max-width: 100%; }
.fng-award .gform_wrapper .gform_fields { grid-row-gap: 1.75rem; row-gap: 1.75rem; }
.fng-award .gform_wrapper .gfield { margin-bottom: 0; }
.fng-award .gform_wrapper .gfield_description { color: var(--fng-muted); font-size: 0.88rem; margin-top: 0.15rem; }

/* Screen-reader-only helper (scoped; WP core also defines .screen-reader-text). */
.fng-app .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Reduce WordPress fingerprints: custom select chevron --- */
.fng-app select,
.fng-app .gform_wrapper select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316324f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.1rem;
}

/* Success confirmation: gentle entrance (respects reduced motion). */
.fng-confirm { animation: fng-confirm-in .28s ease-out; }
@keyframes fng-confirm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fng-confirm { animation: none; } }

/* Keep report tables scannable: long recognition text is detail, not scan
   information, so clamp the Reason cell to a couple of lines rather than letting
   it force every row wide/tall. Purely visual (no markup change); the full text
   remains available via the entry / export. Field 8 = Reason on the Birdie form. */
body.fng-score-page .gv-table-view td.gv-field-5-8 {
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
}

/* ==========================================================================
   Milestone 6.5 — client-facing Gravity Flow review-entry presentation.
   Scoped over the native .gravityflow_workflow_detail markup (never modifies GF).
   ========================================================================== */
.fng-hidden { display: none !important; }

/* Stack the native WP two-column admin layout into one clean column. */
body.fng-score-page .fng-review-wrap #poststuff,
body.fng-score-page .fng-review-wrap #post-body,
body.fng-score-page .fng-review-wrap #post-body-content,
body.fng-score-page .fng-review-wrap [id^="postbox-container"] {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* The review area uses the full application content width; the 2-column review
   grid (~65/35) inside it does the breathing, not an artificial narrow cap. */
body.fng-score-page .fng-review-wrap { max-width: none; width: 100%; }
body.fng-score-page .fng-review-wrap h2.hndle,
body.fng-score-page .fng-review-wrap .handlediv,
body.fng-score-page .fng-review-wrap .postbox-header { display: none; }

/* Summary card. */
.fng-review { background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 1.6rem 1.75rem; margin-bottom: 1.25rem; }
.fng-review__title { margin: 0 0 0.5rem; color: var(--fng-navy); font-size: 1.6rem; font-weight: 800; }
.fng-review__headline { margin: 0 0 0.9rem; color: var(--fng-ink); font-size: 1.1rem; font-weight: 600; }
.fng-review__reason { margin: 0 0 1.1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--fng-green); background: var(--fng-green-soft); border-radius: 0 var(--fng-radius-sm) var(--fng-radius-sm) 0; color: var(--fng-ink); font-style: italic; font-size: 1.05rem; line-height: 1.55; }
.fng-review__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--fng-muted); font-size: 0.9rem; }
.fng-review__meta-label { font-weight: 700; color: var(--fng-navy); }

/* Native postboxes → clean S.C.O.R.E. panels. */
body.fng-score-page .fng-review-wrap .postbox { background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); margin: 0 0 1.25rem; padding: 1.25rem 1.5rem; }
body.fng-score-page .fng-review-wrap .postbox .inside { margin: 0; padding: 0; }
body.fng-score-page .fng-review__status,
body.fng-score-page .fng-review__timeline { position: relative; }
body.fng-score-page .fng-review-wrap .postbox h3,
body.fng-score-page .fng-review-wrap .postbox .hndle span { color: var(--fng-navy); font-weight: 800; }

/* Approval controls. */
body.fng-score-page .fng-review__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
body.fng-score-page .fng-review-wrap label[for="gravityflow-note"] { display: block; color: var(--fng-navy); font-weight: 600; margin-bottom: 0.35rem; }
body.fng-score-page .fng-review-wrap textarea#gravityflow-note {
	width: 100%; min-height: 96px; padding: 0.6rem 0.75rem;
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm);
	font-size: 0.95rem; line-height: 1.5; background: #fff; color: var(--fng-ink);
}
body.fng-score-page .fng-review-wrap textarea#gravityflow-note:focus { outline: none; border-color: var(--fng-green); box-shadow: 0 0 0 3px var(--fng-green-soft); }
/* The native buttons carry our fng-btn classes (added by JS); ensure they win. */
body.fng-score-page .fng-review-wrap button.fng-btn { min-height: 46px; padding: 0.55rem 1.4rem; border-radius: var(--fng-radius-sm); font-weight: 700; cursor: pointer; }
body.fng-score-page .fng-review-wrap button.fng-review__approve { background: var(--fng-green) !important; border: 1px solid var(--fng-green) !important; color: #fff !important; }
body.fng-score-page .fng-review-wrap button.fng-review__approve:hover { background: var(--fng-green-strong) !important; border-color: var(--fng-green-strong) !important; }
body.fng-score-page .fng-review-wrap button.fng-review__reject { background: #fff !important; border: 1px solid #e6b3b1 !important; color: var(--fng-red-ink) !important; }
body.fng-score-page .fng-review-wrap button.fng-review__reject:hover { background: var(--fng-red-soft) !important; }

/* Workflow timeline → vertical activity timeline. */
body.fng-score-page .fng-review__timeline ul,
body.fng-score-page .fng-review__timeline ol { list-style: none; margin: 0; padding: 0; }
body.fng-score-page .fng-review__timeline li { position: relative; padding: 0 0 1rem 1.4rem; color: var(--fng-ink); }
body.fng-score-page .fng-review__timeline li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--fng-green); }
body.fng-score-page .fng-review__timeline li::after { content: ""; position: absolute; left: 4px; top: 0.35rem; bottom: -0.35rem; width: 2px; background: var(--fng-line); z-index: 0; }
body.fng-score-page .fng-review__timeline li:last-child::after { display: none; }
body.fng-score-page .fng-review__timeline .gravityflow-timeline-date,
body.fng-score-page .fng-review__timeline time { color: var(--fng-muted); font-size: 0.85rem; }

/* Gravity Flow renders timeline entries as .gravityflow-note items, not <li>.
   Present them as a calm vertical timeline: a small status dot + connector line,
   a human action title, a secondary timestamp, and the note body below — with the
   large native Gravatar suppressed. Presentation only; records are untouched. */
body.fng-score-page .fng-review__timeline .gravityflow-note-avatar { display: none; }
body.fng-score-page .fng-review__timeline .gravityflow-note {
	position: relative; display: block; margin: 0; padding: 0 0 1.1rem 1.4rem;
	border: 0; background: none;
}
body.fng-score-page .fng-review__timeline .gravityflow-note::before {
	content: ""; position: absolute; left: 0; top: 0.3rem; width: 11px; height: 11px;
	border-radius: 50%; background: var(--fng-green); box-shadow: 0 0 0 3px var(--fng-green-soft);
}
body.fng-score-page .fng-review__timeline .gravityflow-note::after {
	content: ""; position: absolute; left: 5px; top: 0.9rem; bottom: -0.2rem; width: 2px; background: var(--fng-line);
}
body.fng-score-page .fng-review__timeline .gravityflow-note:last-child::after { display: none; }
body.fng-score-page .fng-review__timeline .gravityflow-note-body-wrap { border: 0; background: none; padding: 0; margin: 0; }
body.fng-score-page .fng-review__timeline .gravityflow-note-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; margin: 0; }
body.fng-score-page .fng-review__timeline .gravityflow-note-title,
body.fng-score-page .fng-review__timeline .gravityflow-note-header strong { color: var(--fng-navy); font-weight: 700; font-size: 0.95rem; }
body.fng-score-page .fng-review__timeline .gravityflow-note-meta { color: var(--fng-muted); font-size: 0.82rem; font-weight: 400; }
body.fng-score-page .fng-review__timeline .gravityflow-note-body { color: var(--fng-ink); font-size: 0.9rem; margin-top: 0.15rem; }

/* ==========================================================================
   Milestone 6.5 — layout polish (award width, filter rows, editors, profile).
   ========================================================================== */

/* Award: the panel is a full-width application surface, but the typing content
   is held to a readable max-width (not stretched comically wide). */
body.fng-score-page .fng-award .gform_wrapper { max-width: 660px; }
body.fng-score-page .fng-award .gform_wrapper input[type="text"],
body.fng-score-page .fng-award .gform_wrapper textarea,
body.fng-score-page .fng-award .fng-recipient-results,
body.fng-score-page .fng-award .fng-recipient-selected { max-width: none; width: 100%; }

/* One-row filter toolbar (employee directory) on desktop; 2-up tablet; 1 phone. */
.fng-filters.fng-filterbar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; align-items: center; gap: 0.75rem; }
.fng-filters.fng-filterbar > * { min-width: 0; margin: 0; }
.fng-filters.fng-filterbar input[type="search"],
.fng-filters.fng-filterbar select { width: 100%; max-width: none; min-height: 44px; }
.fng-filters.fng-filterbar .fng-btn { justify-self: start; }
@media (max-width: 900px) { .fng-filters.fng-filterbar { grid-template-columns: 1fr 1fr; } .fng-filters.fng-filterbar input[type="search"] { grid-column: 1 / -1; } }
@media (max-width: 520px) { .fng-filters.fng-filterbar { grid-template-columns: 1fr; } .fng-filters.fng-filterbar input[type="search"] { grid-column: auto; } }

/* GravityView search widget → one clean desktop row + normalized Search/Reset. */
body.fng-score-page .gv-widget-search .gv-search-box { display: inline-flex; flex-direction: column; gap: 0.25rem; margin: 0 0.75rem 0.5rem 0; vertical-align: bottom; }
body.fng-score-page .gv-widget-search .gv-search-box input[type="text"],
body.fng-score-page .gv-widget-search .gv-search-box input[type="date"],
body.fng-score-page .gv-widget-search .gv-search-box select { min-height: 44px; }
body.fng-score-page .gv-widget-search .gv-search-box-links,
body.fng-score-page .gv-widget-search .gv-search-box.gv-search-box-submit { display: inline-flex; align-items: flex-end; gap: 0.5rem; }
/* Normalize the Reset link so it matches a secondary S.C.O.R.E. button. */
body.fng-score-page .gv-widget-search a.gv-search-clear,
body.fng-score-page .gv-widget-search .gv-search-clear {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0.55rem 1.15rem; border-radius: var(--fng-radius-sm);
	border: 1px solid var(--fng-line); background: #fff; color: var(--fng-navy);
	font-weight: 600; font-size: 0.92rem; text-decoration: none; line-height: 1.2;
}
body.fng-score-page .gv-widget-search a.gv-search-clear:hover { border-color: var(--fng-green); color: var(--fng-green-strong); }

/* Profile: full width, two columns on desktop. */
/* Profile: full-width work/score summary on top, then Personal Information +
   Change Password as two equal-height cards (50/50 desktop, stacked mobile). */
.fng-profile-card--full { max-width: none; margin-bottom: 1.5rem; }
.fng-account-split { margin: 0; }
.fng-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
@media (max-width: 860px) { .fng-account-grid { grid-template-columns: 1fr; } }
.fng-account-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.5rem; }
.fng-account-card h2 { margin: 0 0 0.9rem; color: var(--fng-navy); font-size: 1.4rem; }
.fng-account-card .fng-form-actions { margin-top: auto; padding-top: 0.5rem; }

/* Employee editor: two-column groups + summary header. */
.fng-emp-summary { display: flex; align-items: center; gap: 1rem; background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.fng-emp-summary .fng-avatar { width: 48px; height: 48px; font-size: 1rem; background: var(--fng-green-soft); color: var(--fng-green-strong); flex: 0 0 auto; }
.fng-emp-summary__name { font-weight: 800; color: var(--fng-navy); font-size: 1.15rem; }
.fng-emp-summary__meta { color: var(--fng-muted); font-size: 0.9rem; }
/* Employee editor: one explicit two-column grid. Fields auto-place into balanced
   rows (First/Last, Email/ID, Location/Department, then Role/Status). Section
   headers and the wide Supervisor control span the full row via __full, which
   also forces a fresh row — so Role + Employment Status always land together as
   the final 50/50 pair regardless of source order. */
.fng-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; align-items: start; }
.fng-form-grid__full { grid-column: 1 / -1; }
.fng-form-grid > .fng-section-label { margin: 0.5rem 0 0.1rem; }
.fng-form-grid > .fng-section-label:first-child { margin-top: 0; }
@media (max-width: 780px) { .fng-form-grid { grid-template-columns: 1fr; } }
.fng-form-wrap--wide { max-width: none; }
.fng-form-grid .fng-field { margin-bottom: 0; }
.fng-form-grid .fng-field input[type="text"],
.fng-form-grid .fng-field input[type="email"],
.fng-form-grid .fng-field select { max-width: none; width: 100%; }
.fng-form-actions--bar { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--fng-line); display: flex; gap: 0.6rem; }

/* Guided import workflow. */
.fng-steps { display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.fng-step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 1.15rem 1.35rem; }
.fng-step__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fng-green-soft); color: var(--fng-green-strong); font-weight: 800; }
.fng-step__title { font-weight: 700; color: var(--fng-navy); margin: 0 0 0.15rem; }
.fng-step__desc { color: var(--fng-muted); margin: 0 0 0.75rem; font-size: 0.92rem; }
.fng-step__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fng-help-panel { border: 1px solid var(--fng-line); border-radius: var(--fng-radius); background: var(--fng-surface); box-shadow: var(--fng-shadow); overflow: hidden; margin-bottom: 1.5rem; }
.fng-help-panel > summary { cursor: pointer; padding: 0.85rem 1.15rem; font-weight: 700; color: var(--fng-navy); list-style: none; }
.fng-help-panel > summary::-webkit-details-marker { display: none; }
.fng-help-panel > summary::before { content: "\25b8"; display: inline-block; margin-right: 0.5rem; color: var(--fng-muted); transition: transform .15s ease; }
.fng-help-panel[open] > summary::before { transform: rotate(90deg); }
/* Keyboard focus: the native <summary> is focusable/toggleable via Enter/Space;
   custom styling strips the default ring, so restore a clear, on-brand one. */
.fng-help-panel > summary:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: -3px; border-radius: var(--fng-radius); }
.fng-help-panel > summary:hover { color: var(--fng-green-strong); }
.fng-help-panel__body { padding: 0 1.15rem 1.15rem; }
.fng-callout { display: flex; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--fng-radius-sm); background: var(--fng-gold-soft); border: 1px solid #ecd9a1; color: var(--fng-gold-ink); margin-bottom: 1.25rem; font-size: 0.92rem; }

/* Organization taxonomy management. */
.fng-org-group { margin-bottom: 2rem; }
.fng-taxo-list { list-style: none; margin: 0 0 0.75rem; padding: 0; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); background: var(--fng-surface); box-shadow: var(--fng-shadow); overflow: hidden; }
.fng-taxo-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--fng-line); }
.fng-taxo-list li:last-child { border-bottom: 0; }
.fng-taxo-name { flex: 1 1 auto; font-weight: 600; color: var(--fng-navy); }
.fng-taxo-usage { color: var(--fng-muted); font-size: 0.85rem; }
.fng-taxo-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.fng-taxo-add input[type="text"] { flex: 1 1 240px; }

/* Organization taxonomy: inline rename/remove form. */
.fng-taxo-inline { display: flex; gap: 0.4rem; align-items: center; margin: 0; flex: 0 0 auto; }
.fng-taxo-inline input[type="text"] { width: 180px; max-width: 46vw; min-height: 34px; }
@media (max-width: 560px) { .fng-taxo-list li { flex-wrap: wrap; } .fng-taxo-inline { width: 100%; } .fng-taxo-inline input[type="text"] { flex: 1 1 auto; max-width: none; } }

/* ==========================================================================
   Milestone 6.6 — Birdie Review decision screen (2-column) + detail popover.
   ========================================================================== */
.fng-review-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 1.75rem; align-items: start; }
@media (max-width: 900px) { .fng-review-grid { grid-template-columns: 1fr; } }
.fng-review-main { min-width: 0; }
.fng-review-aside { min-width: 0; }
@media (min-width: 901px) { .fng-review-aside { position: sticky; top: 1.25rem; } }

/* Recognition = the emotional centre. Clean surface, generous type. */
.fng-review { background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 1.75rem 2rem; margin: 0 0 1.5rem; }
.fng-review__eyebrow { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fng-muted); }
.fng-review__people { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.fng-review__people .fng-avatar { width: 46px; height: 46px; font-size: 1rem; background: var(--fng-green-soft); color: var(--fng-green-strong); flex: 0 0 auto; }
.fng-review__names { margin: 0; font-size: 1.2rem; }
.fng-review__from, .fng-review__to { font-weight: 800; color: var(--fng-navy); }
.fng-review__arrow { color: var(--fng-green-strong); font-weight: 700; }
.fng-review__reason { position: relative; margin: 0 0 1.25rem; padding: 0 0 0 2.25rem; border: 0; background: none; color: var(--fng-ink); font-size: 1.35rem; line-height: 1.6; font-style: normal; }
.fng-review__quote { position: absolute; left: 0; top: -0.35rem; font-family: Georgia, "Times New Roman", serif; font-size: 3.2rem; line-height: 1; color: var(--fng-green); opacity: 0.5; }
.fng-review__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; color: var(--fng-muted); font-size: 0.9rem; }
.fng-review__meta-place { font-weight: 600; color: var(--fng-navy); }

/* Decision panel (right). Approve dominates; Reject is a subtle destructive text action. */
.fng-review__decision-title { margin: 0 0 0.85rem; color: var(--fng-navy); font-size: 1.1rem; font-weight: 800; }
body.fng-score-page .fng-review-aside .postbox { margin: 0; }
body.fng-score-page .fng-review-aside .fng-review__actions { display: block; margin-top: 1rem; }
body.fng-score-page .fng-review-aside button.fng-review__approve { display: block; width: 100%; min-height: 48px; font-size: 1rem; margin: 0 0 0.5rem; }
body.fng-score-page .fng-review-aside button.fng-review__reject {
	display: block; width: 100%; appearance: none; border: 0; background: none;
	color: var(--fng-red-ink); font-weight: 600; font-size: 0.9rem; cursor: pointer; padding: 0.5rem;
	text-align: center; border-radius: var(--fng-radius-sm);
}
body.fng-score-page .fng-review-aside button.fng-review__reject:hover { background: var(--fng-red-soft); text-decoration: underline; }
body.fng-score-page .fng-review-aside button.fng-review__reject:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* ---- Reusable detail popover (reports / audit) ---- */
.fng-detail__toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--fng-line); background: #fff; color: var(--fng-blue); border-radius: 50%; cursor: pointer; padding: 0; font: inherit; line-height: 1; }
.fng-detail__toggle:hover { border-color: var(--fng-green); color: var(--fng-green-strong); }
.fng-detail__toggle:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-detail__toggle .fng-detail__dot { font-style: italic; font-family: Georgia, serif; font-weight: 700; font-size: 0.85rem; }
.fng-detail__panel { position: fixed; z-index: 100000; width: 380px; max-width: 92vw; max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow-hover); padding: 0.9rem 1.05rem; }
.fng-detail__panel[hidden] { display: none; }
.fng-detail__panel-label { margin: 0 0 0.3rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fng-muted); }
.fng-detail__panel-body { margin: 0; color: var(--fng-ink); font-size: 0.92rem; line-height: 1.5; }
.fng-detail__panel-body p { margin: 0 0 0.4rem; }
.fng-detail__panel-body .k { color: var(--fng-muted); }

/* Combined primary/secondary text cell (reports). */
.fng-cell-primary { display: block; font-weight: 600; color: var(--fng-navy); }
.fng-cell-secondary { display: block; font-size: 0.85rem; color: var(--fng-muted); }

/* Employee directory: combined identity + role badge + toolbar search width. */
.fng-ident__name { display: block; font-weight: 700; color: var(--fng-navy); }
.fng-ident__sub { display: block; font-size: 0.82rem; color: var(--fng-muted); line-height: 1.35; }
.fng-badge--role { background: #eef1f4; color: var(--fng-navy); }
.fng-directory .fng-col-action { text-align: right; white-space: nowrap; }
.fng-filters.fng-filterbar input[type="search"] { flex: 2 1 240px; }
.fng-filters.fng-filterbar select { flex: 1 1 130px; }

/* Organization taxonomy: calm read-only rows; Edit reveals rename controls. */
.fng-taxo-list li.fng-taxo-row { display: block; padding: 0; }
.fng-taxo-read { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; }
.fng-taxo-id { flex: 1 1 auto; min-width: 0; }
.fng-taxo-read .fng-taxo-name { display: block; }
.fng-taxo-read .fng-taxo-usage { display: block; font-size: 0.82rem; color: var(--fng-muted); }
.fng-taxo-edit { display: none; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: #f7faf8; flex-wrap: wrap; }
.fng-taxo-row.is-editing .fng-taxo-read { display: none; }
.fng-taxo-row.is-editing .fng-taxo-edit { display: flex; }
.fng-taxo-edit input[type="text"] { flex: 1 1 220px; min-height: 40px; }
body.fng-score-page .fng-taxo-remove { appearance: none; border: 0 !important; background: none !important; color: var(--fng-red-ink) !important; font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0.35rem 0.5rem; margin-left: auto; border-radius: 6px; min-height: 0; text-transform: none; }
body.fng-score-page .fng-taxo-remove:hover { background: var(--fng-red-soft) !important; text-decoration: underline; }
body.fng-score-page .fng-taxo-remove:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-taxo-addwrap { margin-bottom: 0.5rem; }
.fng-taxo-add { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fng-taxo-add[hidden] { display: none; }
.fng-taxo-add input[type="text"] { flex: 1 1 240px; }

/* ==========================================================================
   Milestone 6.7 — final interaction refinement (Award, review, detail icon).
   Reuses existing tokens; no new visual systems.
   ========================================================================== */

/* Award: two-column composition — recognition flow + quiet contextual panel. */
/* align-items: stretch so the right recognition panel matches the full height of
   the form column on desktop (no fragile fixed height). Mobile stacks/hides it. */
.fng-award__grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 860px) { .fng-award__grid { grid-template-columns: 1fr; } .fng-award__aside { display: none; } }
.fng-award__form { min-width: 0; }
.fng-award__aside { background: linear-gradient(160deg, var(--fng-green-soft), #fff 85%); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.75rem 1.5rem; text-align: left; }
.fng-award__aside .fng-award__mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--fng-green-strong); margin-bottom: 1rem; box-shadow: var(--fng-shadow); }
.fng-award__aside .fng-award__mark svg { width: 28px; height: 28px; }
.fng-award__aside-title { margin: 0 0 0.4rem; color: var(--fng-navy); font-weight: 800; font-size: 1.15rem; line-height: 1.3; }
.fng-award__aside-copy { margin: 0; color: var(--fng-muted); font-size: 0.95rem; line-height: 1.55; }

/* Award prompts read conversational, not like form labels. */
body.fng-score-page .fng-award .gform_wrapper { max-width: none; }
/* Field-group rhythm is governed solely by the grid row-gap (~28px) — this must
   stay 0 so it does not stack on top of that gap and double the space. */
body.fng-score-page .fng-award .gfield { margin-bottom: 0; }
body.fng-score-page .fng-award .gfield_label { font-size: 1.1rem; font-weight: 700; color: var(--fng-navy); margin-bottom: 0.6rem; }
/* Reduce the loud red "(Required)" text to a single quiet asterisk. The markup
   nests .gfield_required > .gfield_required_text, so only the inner text span is
   collapsed and given one muted asterisk (required semantics are unchanged). */
body.fng-score-page .fng-award .gfield_required_text { font-size: 0; margin-left: 0.15rem; }
body.fng-score-page .fng-award .gfield_required_text::after { content: "*"; font-size: 1rem; color: var(--fng-muted); font-weight: 400; }

/* Recognition textarea = the visual focus. */
body.fng-score-page .fng-award .gform_wrapper textarea {
	width: 100%; max-width: none; min-height: 150px; padding: 1rem 1.1rem;
	font-size: 1.05rem; line-height: 1.6; border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius); background: #fff; color: var(--fng-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.fng-score-page .fng-award .gform_wrapper textarea:focus { outline: none; border-color: var(--fng-green); box-shadow: 0 0 0 3px var(--fng-green-soft); }
/* Character counter: subtle, right-aligned, attached under the textarea. */
body.fng-score-page .fng-award .ginput_counter,
body.fng-score-page .fng-award .charleft { text-align: right; font-size: 0.8rem; color: var(--fng-muted); margin-top: 0.3rem; }

/* Award CTA: unmistakable final action, bottom-right on desktop. */
body.fng-score-page .fng-award .gform_footer { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
body.fng-score-page .fng-award .fng-award__submit { min-height: 50px; padding: 0.6rem 1.75rem; font-size: 1rem; gap: 0.55rem; }
body.fng-score-page .fng-award .fng-award__submit:disabled,
body.fng-score-page .fng-award .fng-award__submit[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 860px) { body.fng-score-page .fng-award .gform_footer { justify-content: stretch; } body.fng-score-page .fng-award .fng-award__submit { width: 100%; } }

/* Selected recipient reads as a recognition target, not a field state. */
.fng-recipient-selected__eyebrow { display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fng-green-strong); margin-bottom: 0.5rem; }
.fng-recipient-selected__row { display: flex; align-items: center; gap: 0.85rem; }
.fng-recipient-change { color: var(--fng-muted); font-weight: 600; margin-left: auto; }
.fng-recipient-change:hover { color: var(--fng-navy); }

/* Detail info-icon: intentional compact control, centred in its cell. */
body.fng-score-page td.fng-col-detail,
body.fng-score-page .gv-table-view td.fng-col-detail { text-align: center; vertical-align: middle; }
.fng-detail { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.fng-detail__toggle { width: 34px; height: 34px; border-radius: 50%; background: var(--fng-green-soft); border: 1px solid transparent; color: var(--fng-green-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fng-detail__toggle:hover { background: #dcefe1; }
.fng-detail__toggle:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-detail__svg { width: 18px; height: 18px; }
.fng-detail__panel-body .k { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fng-muted); margin: 0.6rem 0 0.1rem; }
.fng-detail__panel-body .k:first-child { margin-top: 0; }
@media (max-width: 520px) { .fng-detail__panel { width: 92vw; max-width: 92vw; } }

/* Organization add form: one intentional inline editor. */
.fng-taxo-add { flex-direction: column; align-items: stretch; gap: 0.4rem; padding: 0.85rem 1rem; background: #f7faf8; border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); }
.fng-taxo-add__label { font-weight: 600; color: var(--fng-navy); font-size: 0.85rem; }
.fng-taxo-add__row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fng-taxo-add__row input[type="text"] { flex: 1 1 240px; }

/* Fine spacing (scoped): consistent title→content + panel header→body rhythm. */
body.fng-score-page .fng-page-header { margin-bottom: 1.5rem; }
body.fng-score-page .fng-app .gform_wrapper .gfield_description { margin-top: 0.2rem; }

/* ==========================================================================
   Filter-toolbar corrections (M6.7 follow-up): one-row report + directory bars.
   ========================================================================== */

/* Merged Status column (workflow badge + recognition detail icon): centre the
   header and the cell, and lay the badge + icon out as one centred inline group.
   (The legacy fng-col-detail selector is retained harmlessly for older views.) */
body.fng-score-page .gv-table-view th.fng-col-detail,
body.fng-score-page .gv-table-view td.fng-col-detail,
body.fng-score-page .gv-table-view th.fng-col-status,
body.fng-score-page .gv-table-view td.fng-col-status { text-align: center; vertical-align: middle; }
.fng-status-cell { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.fng-status-cell .fng-detail { display: inline-flex; }

/* --- Organization / Location report: one horizontal toolbar on desktop. ---
   GravityView's own CSS sets the widget area to flex-direction:column at this
   view's width (verified in DevTools), so we override with the plugin class +
   !important on the layout axis only — the minimum needed to beat GravityView's
   more specific responsive rule. Everything below the breakpoint stacks. */
@media ( min-width: 1024px ) {
	body.fng-score-page .gv-search-widget-area.fng-gv-toolbar {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-end;
		gap: 0.75rem;
		width: 100%;
	}
	body.fng-score-page .gv-search-widget-area.fng-gv-toolbar .gv-search-box { flex: 1 1 0; min-width: 0; margin: 0; }
	/* The date box is the tallest field; its picker sits above the box's bottom.
	   Push its label+picker to the bottom so the date control shares one baseline
	   with the text/select controls and the Search/Reset buttons. */
	body.fng-score-page .gv-search-widget-area.fng-gv-toolbar .gv-search-date { justify-content: flex-end; }
	body.fng-score-page .gv-search-widget-area.fng-gv-toolbar .gv-search-field-search_all { flex: 1.1 1 0; }
	/* The date range holds two GravityKit calendar controls side by side. Each
	   needs ~185px so its segmented mm/dd/yyyy input + calendar icon stay on one
	   line (the widget's inner wrapper otherwise wraps the icon to a 2nd row). */
	body.fng-score-page .gv-search-widget-area.fng-gv-toolbar .gv-search-date { flex: 0 1 auto; min-width: 420px; }
	body.fng-score-page .gv-search-widget-area.fng-gv-toolbar .fng-gv-actions { flex: 0 0 auto; }
}

/* GravityView wraps each search control in a <p>, and the theme gives paragraphs
   a bottom margin — that left a ~12px gap beneath every input/select, so their
   baselines sat above the (marginless) date field and the Search/Reset buttons.
   Zero it inside the toolbar so all controls share one bottom edge. */
body.fng-score-page .fng-gv-toolbar .gv-search-box p { margin: 0; }
/* Field labels sit tight above their control; consistent control height. */
body.fng-score-page .fng-gv-toolbar .gv-search-box > label,
body.fng-score-page .fng-gv-toolbar .gv-search-date label { display: block; margin: 0 0 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--fng-navy); line-height: 1.2; }
body.fng-score-page .fng-gv-toolbar input[type="text"],
body.fng-score-page .fng-gv-toolbar input[type="search"],
body.fng-score-page .fng-gv-toolbar input[type="date"],
body.fng-score-page .fng-gv-toolbar select { width: 100%; min-height: 44px; }

/* Flatten the date range: the two GravityKit calendar pickers sit side by side,
   each wide enough to show the full mm/dd/yyyy segments + calendar icon on one
   compact row (matching the other controls' height, not a tall stacked column). */
body.fng-score-page .fng-gv-toolbar .gv-search-date > label:first-child { font-size: 0.8rem; }
body.fng-score-page .fng-gv-toolbar .gv-search-date .gv-date-range-picker { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: nowrap; margin: 0; }
body.fng-score-page .fng-gv-toolbar .gv-search-date .gv-date-picker { flex: 1 1 185px; min-width: 185px; }
body.fng-score-page .fng-gv-toolbar .gv-search-date .gk-calendar-root { width: 100%; }
/* The GravityKit date widget renders a nested calendar (root → controls →
   input-wrapper → segmented input + trigger button), NOT a bare <input type=date>.
   Style that real wrapper so each date field reads as the same control as the
   search box and the Location/Department selects: identical height, border,
   radius, background and type size. */
body.fng-score-page .fng-gv-toolbar .gv-search-date .gk-calendar-controls { min-height: 44px; align-items: stretch; }
body.fng-score-page .fng-gv-toolbar .gv-search-date .gk-calendar-input-wrapper {
	display: flex; flex-wrap: nowrap; align-items: center; width: 100%;
	min-height: 44px; padding: 0.25rem 0.6rem;
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm);
	background: #fff; box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.fng-score-page .fng-gv-toolbar .gv-search-date .gk-calendar-input-wrapper:focus-within {
	border-color: var(--fng-green); box-shadow: 0 0 0 3px var(--fng-green-soft);
}
/* The inner segmented input carries its own border by default — drop it so only
   the wrapper frames the field, and align type size/colour with sibling controls. */
body.fng-score-page .fng-gv-toolbar .gv-search-date .gk-calendar-input-wrapper input {
	min-height: 0; border: 0; outline: none; box-shadow: none; padding: 0;
	background: transparent; font-size: 0.95rem; line-height: 1.4; color: var(--fng-ink);
}
body.fng-score-page .fng-gv-toolbar .gv-search-date .gk-calendar-input-wrapper input:focus {
	box-shadow: none; border: 0;
}
/* Below the desktop breakpoint the toolbar stacks; let the two date pickers wrap
   so they never force horizontal overflow on tablet/phone. */
@media ( max-width: 1023px ) {
	body.fng-score-page .fng-gv-toolbar .gv-search-date .gv-date-range-picker { flex-wrap: wrap; }
	body.fng-score-page .fng-gv-toolbar .gv-search-date .gv-date-picker { flex: 1 1 160px; min-width: 160px; }
}

/* Folded-in Search / Reset actions: inline, same height, compact. */
body.fng-score-page .fng-gv-actions { display: flex; align-items: flex-end; gap: 0.5rem; }
body.fng-score-page .fng-gv-actions input.gv-search-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0.55rem 1.4rem; width: auto;
	background: var(--fng-green) !important; border: 1px solid var(--fng-green) !important;
	color: #fff !important; border-radius: var(--fng-radius-sm); font-weight: 600; cursor: pointer;
}
body.fng-score-page .fng-gv-actions input.gv-search-button:hover { background: var(--fng-green-strong) !important; border-color: var(--fng-green-strong) !important; }
body.fng-score-page .fng-gv-actions a.gv-search-clear {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0.55rem 1.1rem; width: auto;
	background: #fff; border: 1px solid var(--fng-line); color: var(--fng-navy);
	border-radius: var(--fng-radius-sm); font-weight: 600; text-decoration: none;
	text-transform: none; letter-spacing: normal;
}
/* The action labels read as sentence case ("Search" / "Reset"), never all-caps —
   the theme uppercases button-like links, so we opt out on both actions. */
body.fng-score-page .fng-gv-actions input.gv-search-button { text-transform: none; letter-spacing: normal; }
body.fng-score-page .fng-gv-actions a.gv-search-clear:hover { border-color: var(--fng-green); color: var(--fng-green-strong); }

/* ==========================================================================
   Final UAT visual corrections — dashboard KPI links, table footers, footer gap.
   ========================================================================== */

/* Actionable KPI tiles: the same tile, now a hoverable/focusable navigation card
   for administrators. Non-link tiles are unaffected. */
.fng-stat--link, .fng-ovcard--link { position: relative; display: block; text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.fng-stat--link:hover, .fng-ovcard--link:hover { border-color: var(--fng-green); box-shadow: var(--fng-shadow-hover); transform: translateY(-1px); }
.fng-stat--link:focus-visible, .fng-ovcard--link:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-stat--link .fng-stat__go { position: absolute; top: 0.6rem; right: 0.8rem; color: var(--fng-muted); font-size: 1.1rem; line-height: 1; }
.fng-stat--link:hover .fng-stat__go { color: var(--fng-green-strong); }

/* Repeated table heading at the bottom (GravityView tfoot) must match the top
   heading exactly — same tinted background, colour, weight, and treatment. */
.fng-table tfoot th, .fng-app .gv-table-view tfoot th,
.fng-table tfoot td, .fng-app .gv-table-view tfoot td {
	background: #f2f6f4; color: var(--fng-navy); font-weight: 700; font-size: 0.82rem;
	letter-spacing: 0.03em; text-transform: uppercase; border-top: 2px solid #dbe5df; border-bottom: 0;
	text-align: left; padding: 0.8rem 1rem;
}

/* Consistent breathing room between the S.C.O.R.E. application and the site
   footer — the last card/table/form should never feel glued to the footer. */
body.fng-score-page .fng-app { padding-bottom: 75px; }

/* ==========================================================================
   Milestone 6.8 — pagination, export, employee detail, leaderboard, overview.
   ========================================================================== */

/* --- Reusable table footer toolbar (summary + per-page + export) --- */
.fng-tabletools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0 0.5rem; }
.fng-tabletools__summary { color: var(--fng-muted); font-size: 0.9rem; }
.fng-tabletools__right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fng-perpage { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.fng-perpage__label { color: var(--fng-muted); font-size: 10px; line-height: 120%; font-weight: 600; text-transform: capitalize; }
.fng-perpage select { min-height: 40px; }
.fng-export { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.fng-export__icon { flex: 0 0 auto; }

/* --- Pagination controls --- */
.fng-pagination { margin: 0.25rem 0 0; }
.fng-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; }
.fng-pagination a, .fng-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 0.6rem; border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); color: var(--fng-navy); text-decoration: none; font-weight: 600; font-size: 0.9rem; background: #fff; }
.fng-pagination a:hover { border-color: var(--fng-green); color: var(--fng-green-strong); }
.fng-pagination a:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-pagination .is-current { background: var(--fng-green-soft); border-color: #cfe6d6; color: var(--fng-green-strong); }
.fng-pagination .is-disabled { color: var(--fng-muted); background: #f6f8fa; cursor: default; }
.fng-pagination .fng-pagination__gap { border: 0; background: none; min-width: 1.5rem; color: var(--fng-muted); }

/* --- Report/audit export bar (above a GravityView) --- */
.fng-report-export { display: flex; justify-content: flex-end; margin: 0 0 0.75rem; }

/* --- Employee link: one intentional treatment (leaderboard / review / reports) ---
   Navy text, underline on hover, a small external/new-tab icon, strong focus. */
.fng-employee-link, .fng-person-link {
	display: inline-flex; align-items: center; gap: 0.25rem;
	color: var(--fng-navy); font-weight: 600; text-decoration: none;
	border-radius: 3px;
}
.fng-employee-link .fng-employee-link__name { text-decoration: none; border-bottom: 1px solid transparent; }
.fng-employee-link:hover { color: var(--fng-green-strong); }
.fng-employee-link:hover .fng-employee-link__name { border-bottom-color: currentColor; }
.fng-person-link:hover { color: var(--fng-green-strong); text-decoration: underline; }
.fng-employee-link:focus-visible, .fng-person-link:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-employee-link__icon { flex: 0 0 auto; color: var(--fng-muted); vertical-align: -1px; }
.fng-employee-link:hover .fng-employee-link__icon { color: var(--fng-green-strong); }
.fng-extlink__icon { margin-left: 0.25rem; vertical-align: -1px; color: var(--fng-muted); }

/* --- Leaderboard: header/count centring + rank column + subtle rank bands --- */
body.fng-score-page .fng-leaderboard__table th.fng-leaderboard__count-h,
body.fng-score-page .fng-leaderboard__table td.fng-leaderboard__count { text-align: center; }
/* Rank column width is set with the rest of the column model further down. */
/* M6.26.1 removed the full-row rank bands. Their tinted backgrounds and inset
   left bars were what segmented the board into compartments — the bar repeated
   on every cell, drawing a vertical rule between each column. Placement is now
   a small dot on the rank; see .fng-lb-medal below. */

/* --- Employee detail: identity + recognition summary --- */
.fng-empdetail { margin: 0; }
/* .fng-empdetail__actions is gone (M6.31): the edit pencil moved onto the
   employee's name inside the identity card, where the action has an object. */

/* SECTION RHYTHM for the employee surface (M6.32). Every block below the
   identity card is a new section — Birdie Balance, Redemption History,
   Recognition Summary, the role-context panels — and each one opens with a
   .fng-section-label whose top margin is reset to 0 because it is its section's
   first child. That reset is right, but it left the first heading sitting 24px
   under the identity card's metadata grid, close enough to read as text touching
   rather than a new section starting.

   The gap belongs to the SECTIONS, not to any one heading: one rule here spaces
   every block on this surface, so a section added later inherits it instead of
   needing its own selector. Margins collapse with the card's own 1.5rem bottom,
   so the effective gap is this value, not the sum. */
body.fng-score-page .fng-empdetail > .fng-balance,
body.fng-score-page .fng-empdetail > .fng-empstats,
body.fng-score-page .fng-empdetail > .fng-redeem-history,
body.fng-score-page .fng-empdetail > .fng-panel { margin-top: var(--fng-space-xl); }

@media (max-width: 768px) {
	body.fng-score-page .fng-empdetail > .fng-balance,
	body.fng-score-page .fng-empdetail > .fng-empstats,
	body.fng-score-page .fng-empdetail > .fng-redeem-history,
	body.fng-score-page .fng-empdetail > .fng-panel { margin-top: var(--fng-space-lg); }
}
.fng-empstats { margin-top: 2.25rem; background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.25rem 1.5rem; }
.fng-empstats__note { color: var(--fng-muted); font-size: 0.9rem; margin: 0.25rem 0 1rem; }
.fng-empstats__group { margin-bottom: 1.25rem; }
.fng-empstats__group:last-child { margin-bottom: 0; }
.fng-empstats__group h4 { margin: 0 0 0.6rem; color: var(--fng-navy); font-size: 0.95rem; }
.fng-empstats__rate { margin: 0.6rem 0 0; color: var(--fng-ink); font-weight: 600; }
/* Role-aware context blocks (M6.19) — reuse .fng-empstats, use the token scale. */
.fng-empstats--team, .fng-empstats--leadership { margin-top: var(--fng-space-lg); }
.fng-empstats__toplist { list-style: none; margin: var(--fng-space-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--fng-space-2xs); font-size: var(--fng-text-sm); color: var(--fng-ink); }

/* --- System Overview: stat cards, team list, diagnostics cards --- */
.fng-overview__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 0.75rem; }
@media (max-width: 780px) { .fng-overview__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .fng-overview__cards { grid-template-columns: 1fr; } }
/* .fng-ovcard item styling now lives with .fng-stat (M6.18 consolidation, ~L664). */
.fng-overview__teams { margin: 1.5rem 0; }
.fng-teamlist { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.fng-teamlist__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.85rem; border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm); background: #fff; margin-bottom: 0.4rem; }
.fng-teamlist__name { font-weight: 700; color: var(--fng-navy); }
.fng-teamlist__count { color: var(--fng-muted); font-size: 0.9rem; white-space: nowrap; }
.fng-diagcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0.5rem 0 1rem; }
@media (max-width: 780px) { .fng-diagcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .fng-diagcards { grid-template-columns: 1fr; } }
.fng-diagcard { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 1px solid var(--fng-line); border-left-width: 4px; border-radius: var(--fng-radius-sm); padding: 0.85rem 1rem; }
.fng-diagcard--good { border-left-color: var(--fng-green); }
.fng-diagcard--warn { border-left-color: #d9a441; }
.fng-diagcard--bad { border-left-color: var(--fng-red-ink); }
.fng-diagcard__state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.fng-diagcard--good .fng-diagcard__state { color: var(--fng-green-strong); }
.fng-diagcard--warn .fng-diagcard__state { color: var(--fng-gold-ink); }
.fng-diagcard--bad .fng-diagcard__state { color: var(--fng-red-ink); }
.fng-diagcard__icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: currentColor; color: #fff; font-size: 0.7rem; }
.fng-diagcard--good .fng-diagcard__icon { background: var(--fng-green); }
.fng-diagcard--warn .fng-diagcard__icon { background: #d9a441; }
.fng-diagcard--bad .fng-diagcard__icon { background: var(--fng-red-ink); }
.fng-diagcard__label { font-weight: 700; color: var(--fng-navy); font-size: 0.92rem; }
.fng-diagcard__detail { color: var(--fng-muted); font-size: 0.85rem; line-height: 1.4; }

/* --- Menu drawer: current-page (aria-current) highlight --- */
.fng-menu__item.is-active { background: var(--fng-green-soft); color: var(--fng-green-strong); font-weight: 700; box-shadow: inset 3px 0 0 var(--fng-green); }

/* --- Detail popover: labelled rows (audit) --- */
.fng-detail__row-label { margin: 0.5rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fng-muted); font-weight: 700; }
.fng-detail__row-value { margin: 0.1rem 0 0; color: var(--fng-ink); }
.fng-detail__row-label:first-child { margin-top: 0; }

/* ==========================================================================
   Milestone 6.9 — icon buttons (org management), employee-link polish.
   ========================================================================== */
.fng-taxo-actions { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.fng-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0; border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius-sm); background: #fff; color: var(--fng-navy);
	cursor: pointer; text-decoration: none;
}
.fng-iconbtn:hover { border-color: var(--fng-green); color: var(--fng-green-strong); background: #fff; }
.fng-iconbtn:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* --- GravityView report pagination (footer widgets) → app styling --- */
body.fng-score-page .gv-widgets-footer { margin-top: 1rem; display: block; }
body.fng-score-page .gv-widget-pagination { color: var(--fng-muted); font-size: 0.9rem; margin: 0 0 0.6rem; }
body.fng-score-page .gv-widget-page-links { margin: 0; }
body.fng-score-page .gv-widget-page-links a,
body.fng-score-page .gv-widget-page-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 40px; padding: 0 0.6rem; margin: 0 0.15rem 0.3rem 0;
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm);
	color: var(--fng-navy); text-decoration: none; font-weight: 600; font-size: 0.9rem; background: #fff;
}
body.fng-score-page .gv-widget-page-links a:hover { border-color: var(--fng-green); color: var(--fng-green-strong); }
body.fng-score-page .gv-widget-page-links .page-numbers.current {
	background: var(--fng-green-soft); border-color: #cfe6d6; color: var(--fng-green-strong);
}
body.fng-score-page .gv-widget-page-links .page-numbers.dots { border: 0; background: none; min-width: 1.5rem; color: var(--fng-muted); }

/* ==========================================================================
   Milestone 6.10 — final UI consistency (pagination, filters, spacing).
   ========================================================================== */

/* --- Consistent spacing: filter/search toolbar → its data table (all pages) --- */
body.fng-score-page .fng-filters.fng-filterbar { margin-bottom: 1.75rem; }
body.fng-score-page .fng-app .gv-widgets-header { margin-bottom: 1.75rem; }

/* --- Reports render the SAME footer component as the directory (.fng-report-footer
   holds .fng-tabletools + .fng-pagination). GravityView's native footer widgets
   (page info / page links / page size) are suppressed in favour of it. --- */
body.fng-score-page .gv-widgets-footer { display: none; }
body.fng-score-page .fng-report-footer { margin-top: 1.25rem; }

/* Report date-range: drop the redundant "Filter by date:" group label (the
   individual Start/End labels remain), so the bar reads as one flat row. */
body.fng-score-page .fng-gv-toolbar .gv-search-date > label:first-child { display: none; }

/* --- Reset control: disabled when the report is in its default/unfiltered state --- */
body.fng-score-page .fng-gv-actions a.gv-search-clear.is-disabled,
body.fng-score-page .fng-gv-actions a.gv-search-clear[aria-disabled="true"] {
	opacity: 0.5; pointer-events: none; cursor: default; background: #f6f8fa; color: var(--fng-muted); border-color: var(--fng-line);
}

/* --- Employee editor: the Supervisor autocomplete matches the other full-width
   column controls (the 420px cap is only for the Award recipient search). --- */
body.fng-score-page .fng-form-grid .fng-autocomplete { max-width: none; width: 100%; }
body.fng-score-page .fng-form-grid .fng-autocomplete input[type="text"] { width: 100%; }
body.fng-score-page .fng-form-grid .fng-field input[type="password"],
body.fng-score-page .fng-form-grid .fng-field textarea { width: 100%; max-width: none; }
/* Consistent helper-text rhythm within each grid cell. */
body.fng-score-page .fng-form-grid .fng-field .fng-help { margin-top: 0.35rem; }

/* --- Settings: a calm, readable preferences screen (not a dev form). Controls
   fill their column; the whole form is held to a comfortable reading width. --- */
body.fng-score-page .fng-settings { max-width: 860px; }
body.fng-score-page .fng-settings .fng-field { margin-bottom: 1rem; }
body.fng-score-page .fng-settings .fng-field > label { display: block; font-weight: 600; color: var(--fng-navy); margin-bottom: 0.3rem; }
body.fng-score-page .fng-settings .fng-field input[type="text"],
body.fng-score-page .fng-settings .fng-field textarea,
body.fng-score-page .fng-settings .fng-field select { width: 100%; max-width: none; }
body.fng-score-page .fng-settings .fng-accordion__panel { padding: 1rem 1.15rem 1.15rem; }
body.fng-score-page .fng-settings textarea { min-height: 88px; }

/* ==========================================================================
   Milestone 6.12 — front-end account pages (sign in / register / reset).
   A calm two-panel card: the form on the left, a subtle S.C.O.R.E. panel on
   the right. Reuses the app's field/button/notice system for consistency.
   ========================================================================== */
body.fng-auth-page .fng-auth { padding: 3rem 1rem 4rem; }
.fng-auth__wrap {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: 0; max-width: 940px; margin: 0 auto;
	background: var(--fng-surface); border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); overflow: hidden;
}
.fng-auth__card { padding: 2.5rem 2.5rem 2.75rem; min-width: 0; }
.fng-auth__head { margin-bottom: 1.5rem; }
.fng-auth__title { margin: 0 0 0.25rem; color: var(--fng-navy); font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.fng-auth__subtitle { margin: 0; color: var(--fng-muted); font-size: 1rem; }
.fng-auth__form { margin: 0; }
.fng-auth__lead, .fng-auth__hint { color: var(--fng-muted); font-size: 0.9rem; }
.fng-auth__lead { margin: 0 0 1rem; }
.fng-auth__hint { margin: -0.35rem 0 1rem; }
.fng-auth .fng-field { margin-bottom: 1rem; }
.fng-auth .fng-field input { max-width: none; width: 100%; min-height: 46px; }
.fng-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .fng-auth__grid { grid-template-columns: 1fr; } }
.fng-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; flex-wrap: wrap; }
.fng-auth__check { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--fng-ink); font-weight: 500; font-size: 0.92rem; }
.fng-auth__check input { width: auto; min-height: 0; }
.fng-auth__link, .fng-auth__alt a { color: var(--fng-blue); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.fng-auth__link:hover, .fng-auth__alt a:hover { text-decoration: underline; }
body.fng-score-page .fng-auth__submit { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
.fng-auth__alt { margin: 1.25rem 0 0; text-align: center; color: var(--fng-muted); font-size: 0.92rem; }
.fng-auth .fng-notice { margin: 0 0 1.25rem; }
.fng-auth .fng-notice--error ul { margin: 0; padding-left: 1.1rem; }
.fng-auth .fng-notice--error li { margin: 0.15rem 0; }

/* Right-hand recognition panel — deep navy → green, quietly branded. */
.fng-auth__aside {
	display: flex; flex-direction: column; justify-content: center; gap: 0.9rem;
	padding: 2.75rem 2.25rem; color: #fff;
	background: linear-gradient(150deg, var(--fng-navy) 0%, var(--fng-navy-2) 55%, var(--fng-green-strong) 130%);
}
.fng-auth__mark { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.06em; }
.fng-auth__tag { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.fng-auth__aside-sub { margin: 0; font-size: 0.98rem; line-height: 1.55; color: rgba(255,255,255,0.82); }
@media (max-width: 760px) {
	.fng-auth__wrap { grid-template-columns: 1fr; }
	.fng-auth__aside { display: none; }
	.fng-auth__card { padding: 2rem 1.5rem 2.25rem; }
}

/* Settings — account sign-up toggle card (sits above the wording tabs). */
body.fng-score-page .fng-settings-card { background: #fff; border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1.25rem 1.5rem; margin: 0 0 1.5rem; }
body.fng-score-page .fng-settings-card .fng-section-label { margin: 0 0 0.75rem; }
body.fng-score-page .fng-settings-card .fng-help { margin: 0.5rem 0 0; }
.fng-toggle { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--fng-navy); cursor: pointer; }
.fng-toggle input { width: auto; min-height: 0; }

/* Employee directory — inline edit pencil in the Status cell (replaced the old
   standalone Edit column so the table reads tighter). */
.fng-status-edit { display: inline-flex; align-items: center; gap: 0.5rem; }
.fng-edit-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: var(--fng-radius-sm);
	color: var(--fng-muted); border: 1px solid transparent; text-decoration: none;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.fng-edit-icon:hover { color: var(--fng-green-strong); background: var(--fng-green-soft); border-color: var(--fng-line); }
.fng-edit-icon:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 1px; color: var(--fng-navy); }

/* Import "Need help?" panel — tame the browser-default list spacing so the
   ordered steps and any bullet lists read as tidy body copy (scoped to the
   shared help component only; global ol/ul are untouched). */
.fng-help-panel__body ol,
.fng-help-panel__body ul { margin: 0.5rem 0 1.25rem; padding-left: 1.4rem; }
.fng-help-panel__body li { margin: 0 0 0.35rem; line-height: 1.5; font-size: 0.95rem; }
.fng-help-panel__body li:last-child { margin-bottom: 0; }
.fng-help-panel__body .fng-instructions ol,
.fng-help-panel__body .fng-instructions ul { margin-bottom: 0.75rem; }

/* Audit "Last Activity" — timestamp on its own line, note text stacked beneath
   (keeps "Aug 11, 2026 · 6:23 PM" whole instead of wrapping mid-time). */
.fng-workflow-activity { display: block; }
.fng-workflow-activity__when { display: block; color: var(--fng-ink); font-weight: 600; white-space: nowrap; }
.fng-workflow-activity__text { display: block; color: var(--fng-muted); font-size: 0.9rem; margin-top: 0.1rem; }

/* Audit — Status pill + detail (ⓘ) popover share the final cell. */
.fng-status-detail { display: inline-flex; align-items: center; gap: 0.4rem; }
body.fng-score-page .gv-table-view td.fng-col-status .fng-status-detail { justify-content: center; }

/* ==========================================================================
   Milestone 6.13 — Mobile / responsive UAT pass.
   Phone-first behavior for the S.C.O.R.E. app: a single Menu navigation,
   comfortable gutters, and wide data tables re-presented as stacked cards so
   nothing scrolls sideways. Desktop (≥769px) is untouched — every rule here is
   inside a max-width query or paired with a ≥769px reset.
   ========================================================================== */

/* The per-section and per-item "mobile only" rules that used to live here are
   gone. They existed because one drawer served both breakpoints and had to hide
   the parts that duplicated the desktop bar. M6.28 made the whole drawer
   mobile-only instead, so there is nothing left to hide inside it — see the
   .fng-menu rule in the M6.28 block. */

@media (max-width: 768px) {
	/* 1. Navigation → single Menu affordance. Hide the inline primary row so the
	   Menu button never gets pushed off-screen; the drawer carries everything. */
	body.fng-score-page .fng-appnav__primary { display: none; }
	body.fng-score-page .fng-appnav { justify-content: flex-end; gap: 0.5rem; border-bottom: none; margin-bottom: 1rem; padding-top: 0.25rem; }
	/* The old mobile-only `min-height: 44px` on the toggle is gone — it was the
	   reason search (38px) and Menu (44px) diverged further on phones. Both now
	   take --fng-control-h at every breakpoint (M6.20). */
	/* Drawer panel stays anchored under the toggle, inside the viewport, and
	   scrolls if it is taller than the screen. (Keep .fng-menu positioned so the
	   absolute panel anchors to the button, not the page.) */
	body.fng-score-page .fng-menu__panel {
		right: 0; left: auto; min-width: 0; width: min(320px, calc(100vw - 32px));
		max-height: calc(100vh - 140px); overflow-y: auto;
	}
	body.fng-score-page .fng-menu__item { padding: 0.7rem 0.75rem; }

	/* 2. Comfortable gutters + trimmed vertical rhythm. The theme owns the page
	   frame; we keep the app from adding excess and let cards use the width. */
	body.fng-score-page .fng-app { padding-bottom: 40px; }
	body.fng-score-page .fng-app__body { }
	body.fng-score-page .fng-page-header { margin-bottom: 1rem; }
	body.fng-score-page .fng-home { gap: 1rem; }

	/* 3. Type scale — strong but not huge. The hero's own sizes now live with
	   the hero (one breakpoint set, ~L700); duplicating them here is what made
	   the earlier 680px rule dead code, since this wider block came later in
	   the file and always won. */
	body.fng-score-page .fng-page-header__title { font-size: 1.85rem; }
	body.fng-score-page .fng-section-label { font-size: 0.95rem; }

	/* 4. Touch targets — no tiny-only tap regions. */
	body.fng-score-page .fng-btn,
	body.fng-score-page .fng-pagination a,
	body.fng-score-page .fng-pagination span,
	body.fng-score-page .fng-detail__toggle,
	body.fng-score-page .fng-edit-icon,
	body.fng-score-page .fng-employee-link { min-height: 44px; }
	body.fng-score-page .fng-pagination a,
	body.fng-score-page .fng-pagination span { display: inline-flex; align-items: center; }
	body.fng-score-page .fng-detail__toggle { min-width: 44px; }
	body.fng-score-page .fng-edit-icon { width: 44px; height: 44px; }

	/* 5. Wide data tables → stacked cards. thead hidden; each row a card; each
	   cell a label/value line via the data-label the enhancer copied in. Applies
	   to the employee directory, the GravityView reports/audit, and the Gravity
	   Flow review inbox. No horizontal scroll. */
	body.fng-score-page .fng-table-wrap,
	body.fng-score-page .gv-table-container,
	body.fng-score-page .gv-container { overflow: visible; }
	body.fng-score-page .fng-table,
	body.fng-score-page .gv-table-view,
	body.fng-score-page .gravityflow-inbox { display: block; width: 100%; }
	body.fng-score-page .fng-table thead,
	body.fng-score-page .gv-table-view thead,
	body.fng-score-page .gravityflow-inbox thead { display: none; }
	body.fng-score-page .fng-table tbody,
	body.fng-score-page .gv-table-view tbody,
	body.fng-score-page .gravityflow-inbox tbody { display: block; }
	body.fng-score-page .fng-table tbody tr,
	body.fng-score-page .gv-table-view tbody tr,
	body.fng-score-page .gravityflow-inbox tbody tr {
		display: block; background: #fff; border: 1px solid var(--fng-line);
		border-radius: var(--fng-radius); box-shadow: var(--fng-shadow);
		padding: 0.9rem 1rem; margin: 0 0 0.85rem;
	}
	body.fng-score-page .fng-table tbody td,
	body.fng-score-page .gv-table-view tbody td,
	body.fng-score-page .gravityflow-inbox tbody td {
		display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
		width: auto; border: 0; padding: 0.3rem 0; text-align: right;
	}
	body.fng-score-page .fng-table tbody td::before,
	body.fng-score-page .gv-table-view tbody td::before,
	body.fng-score-page .gravityflow-inbox tbody td::before {
		content: attr(data-label); flex: 0 0 auto; text-align: left;
		font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
		text-transform: uppercase; color: var(--fng-muted);
	}
	/* A cell with no label spans full width (e.g. the directory identity block). */
	body.fng-score-page .fng-table tbody td:not([data-label])::before,
	body.fng-score-page .gv-table-view tbody td:not([data-label])::before { content: none; }
	/* tfoot repeats the header on desktop; useless as a card. */
	body.fng-score-page .fng-table tfoot,
	body.fng-score-page .gv-table-view tfoot { display: none; }

	/* Directory identity + status read as a left-aligned stack, not label/value. */
	body.fng-score-page .fng-directory tbody td.fng-ident { flex-direction: column; align-items: flex-start; text-align: left; gap: 0.1rem; }
	body.fng-score-page .fng-directory tbody td.fng-ident::before { content: none; }
	body.fng-score-page .fng-directory .fng-ident__name { font-size: 1.05rem; font-weight: 800; }
	body.fng-score-page .fng-status-edit { margin-left: auto; }

	/* 6. Report/directory footer pager stacks and stays reachable. */
	body.fng-score-page .fng-tabletools { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	body.fng-score-page .fng-tabletools__right { justify-content: space-between; }
	body.fng-score-page .fng-pagination ul { flex-wrap: wrap; justify-content: center; }

	/* 7. Filters stack full-width, labels above controls. */
	body.fng-score-page .gv-search-widget-area,
	body.fng-score-page .fng-filters.fng-filterbar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.75rem; }
	body.fng-score-page .gv-search-widget-area .gv-search-box,
	body.fng-score-page .fng-filters.fng-filterbar > * { width: 100%; max-width: none; margin: 0; }
	body.fng-score-page .fng-filters.fng-filterbar select,
	body.fng-score-page .fng-filters.fng-filterbar input[type="search"] { max-width: none; }
	body.fng-score-page .fng-gv-actions { flex-direction: row; gap: 0.6rem; }
	body.fng-score-page .fng-gv-actions input.gv-search-button,
	body.fng-score-page .fng-gv-actions a.gv-search-clear { flex: 1 1 0; }
	body.fng-score-page .fng-gv-toolbar .gv-search-date .gv-date-range-picker { flex-wrap: wrap; }

	/* 8. Review inbox card: hide the noisy technical columns (row id, form name,
	   submitter IP); keep the useful ones as a clean tap card. */
	body.fng-score-page .gravityflow-inbox tbody td.column-id,
	body.fng-score-page .gravityflow-inbox tbody td.column-created_by,
	body.fng-score-page .gravityflow-inbox tbody td.column-form_id { display: none; }

	/* 9. Two-column layouts collapse to one; nothing sticky on phones. */
	body.fng-score-page .fng-review-grid { grid-template-columns: 1fr; }
	body.fng-score-page .fng-review-aside { position: static !important; top: auto !important; }
	body.fng-score-page .fng-account-grid { grid-template-columns: 1fr; }
	body.fng-score-page .fng-form-grid { grid-template-columns: 1fr; }
	body.fng-score-page .fng-form-grid__full { grid-column: auto; }

	/* Review decision buttons: full width, well separated to avoid mis-taps. */
	body.fng-score-page .fng-review-actions,
	body.fng-score-page .fng-decision-actions { display: flex; flex-direction: column; gap: 0.85rem; }
	body.fng-score-page .fng-review-actions .fng-btn,
	body.fng-score-page .fng-decision-actions .fng-btn { width: 100%; }

	/* 10. Employee detail: metadata 2-up, recognition tiles 2-up. */
	body.fng-score-page .fng-profile-card__grid { grid-template-columns: 1fr 1fr; }
	body.fng-score-page .fng-profile-card__header { flex-wrap: wrap; }

	/* 11. Org taxonomy rows: name + usage on top, actions beneath (no crowding). */
	body.fng-score-page .fng-taxo-row { flex-wrap: wrap; gap: 0.5rem; }
	body.fng-score-page .fng-taxo-actions { margin-left: auto; }

	/* 12. Settings tabs: contained horizontal scroll instead of a wrapped mess. */
	body.fng-score-page .fng-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	body.fng-score-page .fng-tab { flex: 0 0 auto; }
	body.fng-score-page .fng-settings-actions { flex-direction: column; }
	body.fng-score-page .fng-settings-actions .fng-btn { width: 100%; }

	/* 13. Imports: upload + actions stack, filenames wrap. */
	body.fng-score-page .fng-step__actions { flex-direction: column; align-items: stretch; gap: 0.6rem; }
	body.fng-score-page .fng-step__actions .fng-btn { width: 100%; }
	body.fng-score-page .fng-import input[type="file"] { max-width: 100%; }
}

/* Extra-narrow phones: single-column stat grids + stacked hero actions. */
@media (max-width: 430px) {
	/* The hero is a grid now, so flex-direction here would be inert — it stacks
	   via its own single-column rule at 680px. Only the action buttons need a
	   phone-specific treatment. */
	body.fng-score-page .fng-hero-panel { align-items: flex-start; }
	body.fng-score-page .fng-hero-panel__actions { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
	body.fng-score-page .fng-hero-panel__actions .fng-btn { width: 100%; }
}

/* ==========================================================================
   Milestone 6.14 (Phase 1) — manager review inbox.
   A premium on-brand pending-Birdie table with row + bulk approve/reject,
   replacing the raw Gravity Flow inbox. (Mobile cards come from the shared
   .fng-table transform + the data-label attributes on each cell.)
   ========================================================================== */
.fng-review-lead { color: var(--fng-muted); margin: 0 0 1.25rem; }
.fng-review-form { margin: 0; }

/* Bulk toolbar: select-all on the left, bulk actions on the right. */
.fng-review-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--fng-surface); border: 1px solid var(--fng-line); border-radius: var(--fng-radius); box-shadow: var(--fng-shadow); padding: 0.75rem 1rem; margin-bottom: 0.9rem; }
.fng-review-selectall { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--fng-navy); }
.fng-review-selectall input { width: auto; min-height: 0; }
.fng-review-bulk { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Optional reviewer note. */
.fng-review-note { margin-bottom: 1rem; }
.fng-review-note label { display: block; font-weight: 600; color: var(--fng-navy); margin-bottom: 0.3rem; font-size: 0.9rem; }
.fng-review-note input[type="text"] { width: 100%; max-width: none; min-height: 44px; }

/* The table. */
.fng-review-table { width: 100%; }
.fng-review-table th, .fng-review-table td { vertical-align: top; }
.fng-review-check { width: 40px; text-align: center; }
.fng-review-check input { width: auto; min-height: 0; }
.fng-review-reason { max-width: 320px; }
.fng-review-reason-text { color: var(--fng-ink); }
.fng-review-override { display: inline-block; margin-top: 0.25rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fng-gold-ink, #7a5c00); background: var(--fng-gold-soft, #faf3d6); border: 1px solid #ecd9a1; border-radius: 999px; padding: 0.1rem 0.5rem; }

/* Row decision controls: strong green approve, restrained red reject, quiet Details. */
.fng-review-actions-col { white-space: nowrap; }
.fng-review-rowactions { display: inline-flex; align-items: center; gap: 0.4rem; }
/* body.fng-score-page prefix so the theme's generic button styling never wins.
   The theme's own `[type=submit]` reset (Blocksy: min-height/padding via CSS
   custom properties) otherwise inflates these into full-size pill buttons and
   collapses the icon to zero width — !important on sizing/padding forces our
   compact icon-button treatment regardless of theme cascade specifics. */
body.fng-score-page .fng-review-approve, body.fng-score-page .fng-review-reject {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 40px !important; height: 40px !important; min-height: 40px !important; min-width: 40px !important;
	padding: 0 !important; margin: 0;
	border-radius: var(--fng-radius-sm); border: 1px solid transparent; cursor: pointer; box-shadow: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.fng-score-page .fng-review-approve { background: var(--fng-green); border-color: var(--fng-green); color: #fff; }
body.fng-score-page .fng-review-approve:hover { background: var(--fng-green-strong); border-color: var(--fng-green-strong); color: #fff; }
body.fng-score-page .fng-review-reject { background: #fff; border-color: #e6b3b1; color: var(--fng-red-ink); }
body.fng-score-page .fng-review-reject:hover { background: var(--fng-red-soft); border-color: var(--fng-red-ink); color: var(--fng-red-ink); }
.fng-review-approve:focus-visible, .fng-review-reject:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
.fng-review-view:hover { text-decoration: underline; }

@media (max-width: 768px) {
	body.fng-score-page .fng-review-toolbar { flex-direction: column; align-items: stretch; }
	body.fng-score-page .fng-review-bulk .fng-btn { flex: 1 1 0; }
	/* In card mode the checkbox + decision rows read left-aligned. */
	body.fng-score-page .fng-review-table tbody td.fng-review-check { justify-content: flex-start; }
	body.fng-score-page .fng-review-table tbody td.fng-review-actions-col { justify-content: flex-start; }
	body.fng-score-page .fng-review-rowactions { width: 100%; }
	body.fng-score-page .fng-review-approve, body.fng-score-page .fng-review-reject { width: 44px; height: 44px; }
}

/* ==========================================================================
   M6.14 Phase 2 — Invitation onboarding
   Invite-a-teammate fallback on the Award page + invited-registration badge.
   ========================================================================== */
body.fng-score-page .fng-invite-panel {
	margin-top: 1.25rem;
	border-top: 1px solid var(--fng-line);
	padding-top: 1rem;
}
body.fng-score-page .fng-invite-toggle {
	cursor: pointer;
	font-weight: 600;
	color: var(--fng-blue);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0;
}
body.fng-score-page .fng-invite-toggle::-webkit-details-marker { display: none; }
body.fng-score-page .fng-invite-toggle::before {
	content: "+";
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1;
}
body.fng-score-page .fng-invite-panel[open] .fng-invite-toggle::before { content: "\2212"; } /* minus */
body.fng-score-page .fng-invite-body {
	margin-top: 0.85rem;
	background: var(--fng-bg);
	border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius);
	padding: 1.1rem 1.15rem;
}
body.fng-score-page .fng-invite-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
body.fng-score-page .fng-invite-form .fng-btn { margin-top: 0.4rem; }

/* Invited-registration callout on /register/ */
body.fng-score-page .fng-auth__invited {
	background: var(--fng-green-soft);
	border: 1px solid rgba(47, 143, 78, 0.25);
	border-radius: var(--fng-radius-sm);
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
}
body.fng-score-page .fng-auth__invited-badge {
	display: inline-block;
	font-weight: 700;
	color: var(--fng-green-strong);
	margin-bottom: 0.25rem;
}
body.fng-score-page .fng-auth__invited p { margin: 0; color: var(--fng-ink); font-size: 0.92rem; }
body.fng-score-page .fng-field input[readonly] {
	background: var(--fng-bg);
	color: var(--fng-muted);
	cursor: not-allowed;
}

@media (max-width: 768px) {
	body.fng-score-page .fng-invite-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   M6.14 Phase 3 — Blocksy header integration
   On S.C.O.R.E. pages the role-aware in-app "Menu" drawer is the single
   navigation. The theme's mobile hamburger opens the marketing-site menu,
   which duplicates a menu affordance and confuses S.C.O.R.E. users on phones —
   hide it here only. The logo (→ site home) and the account element (now
   routed into S.C.O.R.E.) stay, so nothing becomes unreachable. Scoped to
   fng-score-page, so the rest of the site keeps its normal header.
   ========================================================================== */
body.fng-score-page .ct-header-trigger {
	display: none !important;
}

/* ==========================================================================
   M6.14 Phase 4 — Onboarding & routing (System Overview)
   Unresolved invitation-lifecycle states + the administrator setup queue.
   ========================================================================== */
body.fng-score-page .fng-overview__onboarding { margin-top: 1.75rem; }
body.fng-score-page .fng-onboard-chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin: 0.75rem 0 1rem;
}
body.fng-score-page .fng-onboard-chip {
	border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius);
	background: var(--fng-surface);
	padding: 0.9rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
body.fng-score-page .fng-onboard-chip--active {
	border-color: rgba(34, 113, 177, 0.35);
	background: #f4f9fe;
}
body.fng-score-page .fng-onboard-chip__num { font-size: 1.6rem; font-weight: 700; color: var(--fng-navy); line-height: 1.1; }
body.fng-score-page .fng-onboard-chip__label { font-weight: 600; color: var(--fng-ink); }
body.fng-score-page .fng-onboard-chip__hint { font-size: 0.82rem; color: var(--fng-muted); }

body.fng-score-page .fng-onboard-queue { margin-top: 0.5rem; }
body.fng-score-page .fng-onboard-queue__title { font-size: 1rem; margin: 0 0 0.25rem; color: var(--fng-navy); }
body.fng-score-page .fng-onboard-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
body.fng-score-page .fng-onboard-list__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--fng-line);
}
body.fng-score-page .fng-onboard-list__who { display: flex; flex-direction: column; }
body.fng-score-page .fng-onboard-list__email { font-size: 0.82rem; color: var(--fng-muted); }
body.fng-score-page .fng-btn--sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; }

@media (max-width: 768px) {
	body.fng-score-page .fng-onboard-chips { grid-template-columns: 1fr; }
	body.fng-score-page .fng-onboard-list__row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   M6.15 Part 1 — Award one-flow recipient (search → not-found → inline invite)
   ========================================================================== */
/* Polished not-found empty state inside the recipient results dropdown. */
body.fng-score-page .fng-recipient-empty {
	padding: 1rem 1.1rem;
	cursor: default;
}
body.fng-score-page .fng-recipient-empty__title {
	margin: 0 0 0.3rem;
	font-weight: 700;
	color: var(--fng-ink);
}
body.fng-score-page .fng-recipient-empty__help {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: var(--fng-muted);
	line-height: 1.5;
}
body.fng-score-page .fng-recipient-invite-btn { width: 100%; justify-content: center; }

/* The invite identity block, relocated into the recipient area in invite mode.
   Gravity Forms lays its fields out on a 12-column grid, so a relocated block
   must explicitly span the full row (harmless when it is not inside a grid). */
body.fng-score-page .fng-invite-identity,
body.fng-score-page .fng-invite-cta {
	grid-column: 1 / -1;
}
body.fng-score-page .fng-invite-identity {
	border: 1px solid rgba(34, 113, 177, 0.28);
	background: #f4f9fe;
	border-radius: var(--fng-radius);
	padding: 1rem 1.1rem;
	margin-bottom: 1.1rem;
}
body.fng-score-page .fng-invite-identity__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.65rem;
}
body.fng-score-page .fng-invite-identity__title {
	font-weight: 700;
	color: var(--fng-navy);
}
body.fng-score-page .fng-invite-identity .fng-invite-cancel {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--fng-blue) !important;
	font-weight: 600;
	cursor: pointer;
	padding: 0.2rem 0.1rem !important;
	font-size: 0.9rem;
	width: auto !important;
	min-height: 0 !important;
}
body.fng-score-page .fng-invite-cancel:hover { text-decoration: underline; }
body.fng-score-page .fng-invite-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
body.fng-score-page .fng-invite-identity .fng-field { margin-bottom: 0.75rem; }
body.fng-score-page .fng-invite-identity .fng-field:last-child { margin-bottom: 0; }
body.fng-score-page .fng-invite-cta { margin-top: 0.25rem; }
body.fng-score-page .fng-invite-submit { display: inline-flex; align-items: center; gap: 0.5rem; }

@media (max-width: 768px) {
	body.fng-score-page .fng-invite-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   M6.15 Part 2 — Organization Management surface
   ========================================================================== */
body.fng-score-page .fng-org2__cards {
	display: grid;
	/* minmax(0, 1fr), never a bare 1fr: a bare fr track carries an implicit
	   min-content minimum, so one card that refuses to shrink widens its track and
	   overflows the grid. See the 640px note below for what that actually cost. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

/* Search */
body.fng-score-page .fng-org2__search { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
body.fng-score-page .fng-org2__search input[type="search"] { flex: 1; min-width: 0; }

/* Section nav */
body.fng-score-page .fng-org2__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--fng-line);
	margin-bottom: 1.25rem;
}
body.fng-score-page .fng-org2__navitem {
	padding: 0.55rem 0.9rem;
	text-decoration: none;
	color: var(--fng-muted);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
body.fng-score-page .fng-org2__navitem:hover { color: var(--fng-navy); }
body.fng-score-page .fng-org2__navitem.is-active { color: var(--fng-navy); border-bottom-color: var(--fng-blue); }

body.fng-score-page .fng-org2__block { margin-bottom: 1.75rem; }
body.fng-score-page .fng-org2__back { margin: 0 0 0.75rem; }
body.fng-score-page .fng-org2__back a { text-decoration: none; font-weight: 600; color: var(--fng-blue); }

/* Rows: a vertical stack wrapper — used by OrgEntity::card()/row() output. */
body.fng-score-page .fng-org2__rows { display: flex; flex-direction: column; gap: 0.5rem; }

/* People cards (directors) */
body.fng-score-page .fng-org2__cards--people { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Chips + tables + buckets */
body.fng-score-page .fng-org2__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; padding: 0; }
body.fng-score-page .fng-chip { background: var(--fng-bg); border: 1px solid var(--fng-line); border-radius: 999px; padding: 0.2em 0.8em; font-size: 0.85rem; }
body.fng-score-page .fng-orgrow__name { font-weight: 600; display: block; }
body.fng-score-page .fng-orgrow__sub { color: var(--fng-muted); font-size: 0.82rem; }
body.fng-score-page .fng-orgrow__edit { text-align: right; white-space: nowrap; }
body.fng-score-page .fng-badge--setup { background: #eaf2fb; color: #1e5a94; }
body.fng-score-page .fng-org2__bucket { border: 1px solid var(--fng-line); border-radius: var(--fng-radius); padding: 1rem 1.1rem; margin-bottom: 0.75rem; background: var(--fng-surface); }
body.fng-score-page .fng-org2__buckettitle { margin: 0 0 0.2rem; font-size: 1rem; color: var(--fng-navy); display: flex; align-items: center; gap: 0.5rem; }
body.fng-score-page .fng-org2__bucketcount { background: var(--fng-gold-soft); color: var(--fng-gold-ink); border-radius: 999px; padding: 0.05em 0.6em; font-size: 0.82rem; font-weight: 700; }
body.fng-score-page .fng-org2__resh { font-size: 0.95rem; color: var(--fng-navy); margin: 1rem 0 0.4rem; }
body.fng-score-page .fng-org2__taxo { margin-top: 1.5rem; }
body.fng-score-page .fng-taxo-manage > summary { cursor: pointer; font-weight: 600; color: var(--fng-blue); padding: 0.4rem 0; }

@media (max-width: 900px) {
	body.fng-score-page .fng-org2__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.fng-score-page .fng-org2__cards--people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The Override badge sits after a name in the review row's mobile card layout and
   spilled 7–12px past the viewport at phone widths, where body{overflow-x:hidden}
   clipped its trailing letters. It is a label, not a control, so letting the line
   wrap is the whole fix. (M6.32) */
@media (max-width: 640px) {
	body.fng-score-page .fng-review-override { display: inline-block; max-width: 100%; word-break: break-word; }
	body.fng-score-page .fng-review-table td[data-label] { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
	/* ONE column at phone widths (M6.32). Two columns survived down here, and a
	   `1fr` track has an implicit `auto` minimum — min-content — so an org entity
	   card whose identity row will not shrink below ~279px expanded each track to
	   279px. Two of those in a 440px container overflowed it by ~120px, and
	   `body { overflow-x: hidden }` then CLIPPED the second column: its cards were
	   unreadable and its edit action sat 86px off-screen, unreachable. Measured on
	   Organization → Directors; the same shape affected Overview and Review.

	   The companion half of the fix is minmax(0, 1fr) on the wider breakpoints
	   above, so no future wide child can widen a track again. */
	body.fng-score-page .fng-org2__cards,
	body.fng-score-page .fng-org2__cards--people { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   M6.16 — Review row-action icons + Director identity cards
   ========================================================================== */
/* Details becomes a compact neutral icon button matching approve/reject. */
body.fng-score-page .fng-review-view {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 40px !important; height: 40px !important; min-height: 40px !important; min-width: 40px !important; padding: 0 !important;
	border-radius: var(--fng-radius-sm); border: 1px solid var(--fng-line);
	background: var(--fng-surface); color: var(--fng-blue); text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
body.fng-score-page .fng-review-view:hover { background: var(--fng-blue-soft); border-color: var(--fng-blue); text-decoration: none; }
body.fng-score-page .fng-review-view:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* Director identity cards now use OrgEntity (see the M6.18 section below) —
   .fng-org2__person/__personhead/__personid/__personedit/__dirchip/__avatar
   are gone; verified zero references remain in src/ or tests/. */

/* Embedded directory toolbar (Organization → Employees). */
body.fng-score-page .fng-toolbar--right { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }

/* ==========================================================================
   M6.17 — Review row-action icon visibility hardening
   Defends against a theme-level `svg{fill:...}` rule silently blanking the
   glyph inside the approve/reject/details controls.
   ========================================================================== */
body.fng-score-page .fng-review-rowactions svg.fng-review-icon {
	fill: none !important;
	stroke: currentColor !important;
	display: block;
}

/* ==========================================================================
   M6.17 — Sent / Received direction indicator on personal Birdie feeds
   Compact, secondary to the status badge; readable without color (arrow +
   word). Reused everywhere Activity::render_item() is called — dashboard
   Recent Activity and the Activity All/Sent/Received feed.
   ========================================================================== */
.fng-feed__badges { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; flex: 0 0 auto; }
.fng-feed__badges .fng-status { margin-top: 0; }
.fng-direction {
	display: inline-flex; align-items: center; gap: 0.25rem;
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
	padding: 0.05em 0.5em 0.05em 0.4em; border-radius: 999px;
	white-space: nowrap;
}
.fng-direction svg { flex: 0 0 auto; }
.fng-direction--sent { background: var(--fng-green-soft); color: var(--fng-green-strong); }
.fng-direction--received { background: var(--fng-blue-soft); color: #1e5a94; }

/* ==========================================================================
   M6.18 — OrgEntity component system (Location/Director/Supervisor/Employee/
   Department/Attention). New markup only; consumed incrementally as each
   Organization section is ported (see render_org_directors() first, others
   follow in later 6.18 commits). Uses the M6.18 token scale — see the design
   tokens block near the top of this file.
   ========================================================================== */

/* .fng-pill — the base for every badge/flag/stat pill going forward. Existing
   PHP-emitted classes (.fng-badge, .fng-status, .fng-chip, .fng-direction,
   .fng-onboard-chip) are left as their own declarations (renaming them would
   touch several files + tests for no visual gain); .fng-pill is additive and
   used only by new OrgEntity markup. */
.fng-pill {
	display: inline-flex; align-items: center; gap: var(--fng-space-3xs);
	font-size: var(--fng-text-xs); font-weight: var(--fng-fw-bold);
	padding: var(--fng-space-3xs) var(--fng-space-sm);
	border-radius: var(--fng-radius-pill);
	white-space: nowrap;
}
.fng-pill--neutral { background: var(--fng-bg); color: var(--fng-muted); }
.fng-pill--ok { background: var(--fng-green-soft); color: var(--fng-green-strong); }
.fng-pill--warn, .fng-pill--gold { background: var(--fng-gold-soft); color: var(--fng-gold-ink); }
.fng-pill--info, .fng-pill--blue { background: var(--fng-blue-soft); color: #1e5a94; }
.fng-pill--danger { background: var(--fng-red-soft); color: var(--fng-red-ink); }

body.fng-score-page .fng-orge {
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius);
	background: var(--fng-surface); border-left-width: 3px;
	padding: var(--fng-space-sm) var(--fng-space-md);
	display: flex; flex-direction: column; gap: var(--fng-space-2xs);
}
body.fng-score-page .fng-orge--row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--fng-space-sm); padding: var(--fng-space-xs) var(--fng-space-sm); }
body.fng-score-page .fng-orge summary { position: relative; cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: var(--fng-space-2xs); padding-right: var(--fng-space-lg); }
body.fng-score-page .fng-orge summary::-webkit-details-marker { display: none; }
body.fng-score-page .fng-orge summary::before { content: "▸"; color: var(--fng-muted); position: absolute; top: 0; right: 0; }
body.fng-score-page .fng-orge[open] summary::before { content: "▾"; }
body.fng-score-page .fng-orge__body { margin-top: var(--fng-space-xs); padding-top: var(--fng-space-xs); border-top: 1px solid var(--fng-line); display: flex; flex-direction: column; gap: var(--fng-space-sm); }

body.fng-score-page .fng-orge--location { border-left-color: var(--fng-navy); }
body.fng-score-page .fng-orge--director { border-left-color: var(--fng-blue); }
body.fng-score-page .fng-orge--supervisor { border-left-color: var(--fng-green); }
body.fng-score-page .fng-orge--employee { border-left-color: var(--fng-line); }
body.fng-score-page .fng-orge--department { border-left-color: var(--fng-line); }
body.fng-score-page .fng-orge--attention { border-left-color: #d9a441; }

body.fng-score-page .fng-orge__identity { display: flex; align-items: center; gap: var(--fng-space-xs); min-width: 0; }
body.fng-score-page .fng-orge__idtext { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
body.fng-score-page .fng-orge__name { font-weight: var(--fng-fw-bold); color: var(--fng-navy); text-decoration: none; }
body.fng-score-page a.fng-orge__name:hover { text-decoration: underline; }
body.fng-score-page .fng-orge__meta { color: var(--fng-muted); font-size: var(--fng-text-sm); }
body.fng-score-page .fng-orge__flags,
body.fng-score-page .fng-orge__stats,
body.fng-score-page .fng-orge__actions { display: flex; flex-wrap: wrap; gap: var(--fng-space-2xs); }
body.fng-score-page .fng-orge__actions { gap: var(--fng-space-xs); margin-top: var(--fng-space-2xs); }

/* A narrow column — a count, or a single icon action — whose heading and cells
   are centred together, so the content is not stranded under a wider heading.
   Only applied where it is asked for; ordinary text columns stay left. */
body.fng-score-page .fng-table th.fng-col--num,
body.fng-score-page .fng-table td.fng-col--num,
body.fng-score-page .fng-table th.fng-col--center,
body.fng-score-page .fng-table td.fng-col--center { text-align: center; }
/* An icon cell needs its box centred, not just its text. */
body.fng-score-page .fng-table td.fng-col--center .fng-edit-icon { margin-inline: auto; }
/* On mobile the table becomes stacked cards with a data-label prefix, where
   centring would separate the value from its own label. */
@media (max-width: 768px) {
	body.fng-score-page .fng-table td.fng-col--num,
	body.fng-score-page .fng-table td.fng-col--center { text-align: left; }
	body.fng-score-page .fng-table td.fng-col--center .fng-edit-icon { margin-inline: 0; }
}

/* ==========================================================================
   Vertical rhythm: introductory text must never touch what it introduces
   --------------------------------------------------------------------------
   .fng-help is deliberately tight by default (0.25rem) because it is mostly a
   hint sitting under a form field. But the same class also introduces whole
   sections, and there it was ending up almost against the following card —
   which we have now hit on Organization Overview, buckets and blocks in turn.
   Rather than patching each route, the gap is stated once as a relationship:
   help text followed by a block-level thing gets a real section gap. Written
   with the shared spacing scale, so it moves with the rest of the system.
   ========================================================================== */
body.fng-score-page .fng-app .fng-help + .fng-org2__block,
body.fng-score-page .fng-app .fng-help + .fng-org2__bucket,
body.fng-score-page .fng-app .fng-help + .fng-org2__rows,
body.fng-score-page .fng-app .fng-help + .fng-org2__cards,
body.fng-score-page .fng-app .fng-help + .fng-orge,
body.fng-score-page .fng-app .fng-help + .fng-table-wrap,
body.fng-score-page .fng-app .fng-help + .fng-card,
body.fng-score-page .fng-app .fng-help + section { margin-top: var(--fng-space-md); }
/* And a section label immediately followed by its help line should own that
   pairing rather than inheriting the label's generous bottom margin. */
body.fng-score-page .fng-app .fng-section-label + .fng-help { margin-top: 0; }
/* The tight variant opts out — it is an in-field hint by definition. */
body.fng-score-page .fng-app .fng-help--tight + * { margin-top: var(--fng-space-2xs); }

/* Profile: the summary card's metadata needs a section gap before the
   editable cards, not the default paragraph spacing. */
body.fng-score-page .fng-profile__accounts { margin-top: var(--fng-space-xl); }

/* ==========================================================================
   Shared tooltip for icon-only controls
   --------------------------------------------------------------------------
   One pattern, driven entirely by a data-fng-tip attribute — no per-control
   markup and no JavaScript, so it cannot get out of step with the button it
   describes. aria-label remains the accessible name; this is the VISIBLE
   affordance for sighted pointer and keyboard users, which is why the tooltip
   itself is aria-hidden by construction (a pseudo-element).

   Anchored to the button's right edge rather than centred: every one of these
   controls sits in a right-hand action group, so centring would push wider
   labels past the viewport.
   ========================================================================== */
body.fng-score-page [data-fng-tip] { position: relative; }
body.fng-score-page [data-fng-tip]::after {
	content: attr(data-fng-tip);
	position: absolute; bottom: calc(100% + 6px); right: 0;
	z-index: 30;
	padding: 0.3em 0.6em;
	border-radius: var(--fng-radius-sm);
	background: var(--fng-navy); color: #fff;
	font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-med);
	line-height: 1.3; white-space: nowrap;
	opacity: 0; visibility: hidden;
	transition: opacity 120ms ease-out;
	pointer-events: none; /* never a hover trap */
}
/* Hover only where hovering is real, so a tap on a phone does not leave a
   tooltip stuck on screen. */
@media (hover: hover) and (pointer: fine) {
	body.fng-score-page [data-fng-tip]:hover::after { opacity: 1; visibility: visible; }
}
/* Keyboard users get the same information at every input type. */
body.fng-score-page [data-fng-tip]:focus-visible::after { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
	body.fng-score-page [data-fng-tip]::after { transition: none; }
}

/* --- Expanded location: Supervisors above Departments --------------------- */
/* The two groups are not peers. Supervisors are people with rows of their own;
   departments are vocabulary chips. A small label on each, and a lighter one
   for departments, makes the hierarchy legible without extra chrome. */
body.fng-score-page .fng-org2__sub + .fng-org2__sub { margin-top: var(--fng-space-md); }
body.fng-score-page .fng-org2__subhead {
	margin: 0 0 var(--fng-space-2xs);
	font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-black);
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--fng-muted);
}
body.fng-score-page .fng-org2__sub--minor .fng-org2__subhead { font-weight: var(--fng-fw-bold); opacity: 0.85; }

/* --- Director cards: pencil top-right, compact ---------------------------- */
/* The edit action was the last child of a column flex, so it landed at the
   bottom-left with a run of dead space above it. Pinning it to the top-right
   corner both puts it where an edit affordance is expected and lets the card
   close up. Scoped to director cards so location/department rows, which lay
   their actions out inline, are untouched. */
body.fng-score-page .fng-orge--director.fng-orge--card {
	position: relative;
	padding: var(--fng-space-sm) var(--fng-space-md);
	/* Room for the pinned button, so a long name never runs under it. */
	padding-right: calc(var(--fng-space-md) + var(--fng-control-h));
	gap: var(--fng-space-2xs);
	justify-content: flex-start;
}
body.fng-score-page .fng-orge--director.fng-orge--card .fng-orge__actions {
	position: absolute;
	top: var(--fng-space-2xs);
	right: var(--fng-space-2xs);
	margin-top: 0;
}
/* The role badge is context, not a headline. */
body.fng-score-page .fng-orge--director.fng-orge--card .fng-orge__flags { margin-top: var(--fng-space-3xs); }

body.fng-score-page .fng-orge-chip {
	display: inline-flex; align-items: center;
	background: var(--fng-bg); border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius-pill); padding: 0.2em var(--fng-space-sm);
	font-size: var(--fng-text-sm);
}
body.fng-score-page .fng-orge-chip a { color: inherit; text-decoration: none; }
body.fng-score-page .fng-orge-chip a:hover { text-decoration: underline; }

/* ==========================================================================
   M6.20 — Final polish: spacing/typography normalization.

   Appended last on purpose: this pass replaces scattered one-off margins with
   a small set of shared rules, and being last means it wins over the literals
   it supersedes without hunting every historical declaration. Only margins and
   the type scale are touched here — no colours, no layout mode changes, so the
   blast radius is spacing alone.
   ========================================================================== */

/* --- Section rhythm (items 27-28). --------------------------------------
   .fng-help serves two jobs: an in-field hint (wants a tight top, no bottom)
   and a section description (wants breathing room below). The base rule keeps
   the field-hint behaviour untouched — import instructions and settings panels
   depend on it — and only help that *directly follows a heading* is retreated
   as a section description. :has() refines label->helper to 8px where it is
   supported; without it the label simply keeps its 16px and the rhythm is a
   little looser rather than broken. */
body.fng-score-page .fng-section-label { margin: var(--fng-space-xl) 0 var(--fng-space-md); }
body.fng-score-page .fng-section-label:first-child { margin-top: 0; }
body.fng-score-page .fng-org2__content > .fng-section-label:first-child { margin-top: 0; }
body.fng-score-page .fng-section-label:has(+ .fng-help) { margin-bottom: var(--fng-space-xs); }
body.fng-score-page .fng-section-label + .fng-help { margin-top: 0; margin-bottom: var(--fng-space-lg); }

/* Bucket headings (item 29) — title, count badge and description share one
   rhythm so the title never collides with the rows beneath it. */
body.fng-score-page .fng-org2__buckettitle { margin: 0 0 var(--fng-space-2xs); }
body.fng-score-page .fng-org2__buckettitle + .fng-help { margin-top: 0; margin-bottom: var(--fng-space-md); }

/* Kill inherited theme paragraph margins inside generated content (item 53).
   Scoped to the wrappers we own so long-form help panels keep their own flow. */
body.fng-score-page .fng-org2__content > p:empty,
body.fng-score-page .fng-appnav p:empty,
body.fng-score-page .fng-orge p:empty { display: none; }

/* --- Card density (item 31). --------------------------------------------- */
body.fng-score-page .fng-orge { padding: var(--fng-space-sm) var(--fng-space-md); }
body.fng-score-page .fng-orge--row { padding: var(--fng-space-xs) var(--fng-space-md); }
/* Row actions sit on the centre line. The previous unconditional margin-top
   fought .fng-orge--row's align-items:center and was why the Attention
   "Complete Setup" buttons floated below their row's midline (item 21). */
body.fng-score-page .fng-orge--row .fng-orge__actions { margin-top: 0; }

/* --- Location cards: one efficient management row (M6.20, items 6-10). ---
   Previously the <summary> was flex-column, so identity / flags / stats /
   actions each claimed their own line — four stacked rows per card, ~200px
   tall for a name and three numbers. They now share a single centred row with
   the actions pinned right, which brings a collapsed card into the 80-105px
   target without shrinking any text. */
/* Two shapes carry a location: a <details> with a disclosure body (Locations
   tab) and a flat <div> without one (Overview's "at a glance" list). Both get
   the same single-row treatment so the two surfaces read identically. */
body.fng-score-page :is(.fng-orge--location, .fng-orge--department) > summary,
body.fng-score-page div:is(.fng-orge--location, .fng-orge--department) {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--fng-space-xs) var(--fng-space-sm);
	padding-right: var(--fng-space-lg);
}
/* The identity takes the slack so badges and actions sit at a predictable
   right edge across every card in the list. */
body.fng-score-page :is(.fng-orge--location, .fng-orge--department) > summary .fng-orge__identity,
body.fng-score-page div:is(.fng-orge--location, .fng-orge--department) > .fng-orge__identity { flex: 1 1 14rem; min-width: 0; }
body.fng-score-page :is(.fng-orge--location, .fng-orge--department) > summary .fng-orge__actions,
body.fng-score-page div:is(.fng-orge--location, .fng-orge--department) > .fng-orge__actions { margin-left: auto; margin-top: 0; }
/* Disclosure caret sits on the row's centre line, not pinned to the top. */
body.fng-score-page :is(.fng-orge--location, .fng-orge--department) > summary::before { top: 50%; transform: translateY(-50%); }

/* Compact icon actions — 40px hit area on desktop, 44px on touch (see the
   mobile block), so density never costs accessibility. */
body.fng-score-page .fng-orge__iconbtn {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}

/* Badges are metadata, not headlines: smaller and tighter than the default
   pill so they read as annotations beside the name (item 7). */
body.fng-score-page :is(.fng-orge--location, .fng-orge--department) .fng-orge__flags .fng-pill,
body.fng-score-page :is(.fng-orge--location, .fng-orge--department) .fng-orge__stats .fng-pill {
	font-size: var(--fng-text-2xs);
	padding: 0.1rem var(--fng-space-xs);
}

@media (max-width: 768px) {
	/* Keep the full 44px touch target and let the actions wrap to their own
	   line rather than crushing three icons against the name. */
	body.fng-score-page .fng-orge__iconbtn { width: var(--fng-control-h); height: var(--fng-control-h); }
	body.fng-score-page :is(.fng-orge--location, .fng-orge--department) > summary .fng-orge__identity,
	body.fng-score-page div:is(.fng-orge--location, .fng-orge--department) > .fng-orge__identity { flex: 1 1 100%; }
	body.fng-score-page :is(.fng-orge--location, .fng-orge--department) > summary .fng-orge__actions,
	body.fng-score-page div:is(.fng-orge--location, .fng-orge--department) > .fng-orge__actions { margin-left: 0; }
}

/* "View All N Locations" — deliberate separation from the last card above and
   the next section below, set at section level (item 13). */
body.fng-score-page .fng-org2__more { margin: var(--fng-space-lg) 0 0; }
body.fng-score-page .fng-org2__block { margin-bottom: var(--fng-space-xl); }

/* --- Department rows -------------------------------------------------------
   M6.20 gave departments their own explicit grid (glyph | content | metric |
   disclosure) to stop a wrapping flex row scattering the Birdie pill across
   four x-positions. That grid declared no track for an action group, because
   departments had no actions then — which is exactly why the edit pencil, once
   added, dropped into an implicit row at the bottom-left.

   Departments now use the shared Location row pattern instead (see the :is()
   block above): identity takes the slack, badges and actions land on one
   predictable right edge. Same guarantee, one implementation, and Edit sits
   with the rest of the actions. Only the department-specific bits remain. */
body.fng-score-page .fng-orge--department .fng-orge__meta { overflow-wrap: anywhere; }
/* A <details> row insets twice — the card's own padding plus the summary's
   caret gutter — so the flat row reserves the sum to land its right edge in
   the same place. Written as the explicit sum so the relationship is visible. */
body.fng-score-page .fng-orge--department.fng-orge--row { padding-right: calc(var(--fng-space-md) + var(--fng-space-lg)); }

/* --- Attention rows: a predictable action column (M6.20, item 21). --------
   Rows are a grid, not a wrapping flex, so the "Complete Setup" button lands
   on the same right edge no matter how long the person's name, location or
   department happens to be. This is the alignment the brief called mandatory. */
body.fng-score-page .fng-orge--attention.fng-orge--row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--fng-space-sm);
	flex-wrap: nowrap;
}
body.fng-score-page .fng-orge--attention .fng-orge__identity { min-width: 0; }
body.fng-score-page .fng-orge--attention .fng-orge__actions { justify-content: flex-end; margin-top: 0; }

/* Overview attention banner: message left, action pinned far right. */
body.fng-score-page .fng-org2__block > .fng-orge--attention.fng-orge--row { padding: var(--fng-space-md); }

@media (max-width: 640px) {
	/* Stack, with the action full-width beneath rather than squeezed (item 52). */
	body.fng-score-page .fng-orge--attention.fng-orge--row { grid-template-columns: 1fr; }
	body.fng-score-page .fng-orge--attention .fng-orge__actions { justify-content: stretch; }
	body.fng-score-page .fng-orge--attention .fng-orge__actions .fng-btn { width: 100%; }
}

/* --- Shared section heading: label left, actions right (M6.20, item 20). --- */
body.fng-score-page .fng-sectionhead {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--fng-space-md);
	margin: var(--fng-space-xl) 0 var(--fng-space-md);
}
body.fng-score-page .fng-sectionhead:first-child { margin-top: 0; }
body.fng-score-page .fng-sectionhead .fng-section-label { margin: 0; }
body.fng-score-page .fng-sectionhead__actions { display: flex; align-items: center; gap: var(--fng-space-xs); }
/* Compact green plus — the Add affordance belongs beside its heading, not
   floating in its own toolbar row above the filter bar (item 19). */
body.fng-score-page .fng-sectionhead__add {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: var(--fng-radius-sm);
	background: var(--fng-green); color: #fff; text-decoration: none;
}
body.fng-score-page .fng-sectionhead__add:hover { background: var(--fng-green-strong); color: #fff; }
body.fng-score-page .fng-sectionhead__add:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
@media (max-width: 768px) {
	body.fng-score-page .fng-sectionhead__add { width: var(--fng-control-h); height: var(--fng-control-h); }
}

/* --- Employee setup guidance (M6.20, items 33-39). ------------------------
   Calm, not alarming: an amber accent and a clear list, never a bright wash.
   Every signal is carried by TEXT as well as colour so it survives a
   monochrome screen and a screen reader (item 64). */
/* M6.23: the notice now uses exactly the same palette and icon language as the
   fields it points at — pale gold ground, dark gold ink, one warning glyph —
   so the top of the form and the highlighted fields read as one system rather
   than two. Chips replaced the "Field — reason" bullet list, which looked like
   validation output; the reason now lives on the field itself. */
body.fng-score-page .fng-setup {
	display: flex; align-items: flex-start; gap: var(--fng-space-sm);
	margin: 0 0 var(--fng-space-lg);
	padding: var(--fng-space-md) var(--fng-space-lg);
	background: var(--fng-gold-soft);
	border: 1px solid #ecd9a1;
	border-left: 3px solid #d9a441;
	border-radius: var(--fng-radius);
	color: var(--fng-gold-ink);
	/* Generous, so #fng-setup does not land under a sticky theme header. */
	scroll-margin-top: 6rem;
}
body.fng-score-page .fng-setup__icon { display: inline-flex; flex: 0 0 auto; margin-top: 2px; color: var(--fng-gold-ink); }
body.fng-score-page .fng-setup__text { min-width: 0; }
body.fng-score-page .fng-setup__title { margin: 0 0 var(--fng-space-3xs); font-weight: var(--fng-fw-black); color: var(--fng-navy); }
body.fng-score-page .fng-setup__lede { margin: 0; color: var(--fng-gold-ink); }
body.fng-score-page .fng-setup__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--fng-space-2xs); margin: var(--fng-space-sm) 0 0; padding: 0; }
body.fng-score-page .fng-setup__chip {
	display: inline-flex; align-items: center;
	padding: 0.2em var(--fng-space-sm);
	border-radius: var(--fng-radius-pill);
	background: var(--fng-surface); border: 1px solid #ecd9a1;
	color: var(--fng-gold-ink); font-size: var(--fng-text-sm); font-weight: var(--fng-fw-med);
}
body.fng-score-page .fng-setup__chip--blocking { border-color: #d9a441; font-weight: var(--fng-fw-bold); }
body.fng-score-page .fng-setup__rec { margin: var(--fng-space-md) 0 0; color: var(--fng-muted); font-size: var(--fng-text-sm); }
/* Flagged fields get the same allowance, so jumping to one is not obscured. */
body.fng-score-page .fng-field--needs-attention { scroll-margin-top: 6rem; }

/* A field that still needs a decision. Subtle tint + amber edge, not a
   fluorescent block — and always paired with .fng-field__attention text. */
body.fng-score-page .fng-field--needs-attention > input,
body.fng-score-page .fng-field--needs-attention .fng-autocomplete input[type="text"] {
	border-color: #d9a441;
	background: var(--fng-gold-soft);
}
body.fng-score-page .fng-field--needs-attention > label { color: var(--fng-gold-ink); }
body.fng-score-page .fng-field__attention {
	margin: var(--fng-space-3xs) 0 0;
	font-size: var(--fng-text-sm);
	font-weight: var(--fng-fw-med);
	color: var(--fng-gold-ink);
}

/* ==========================================================================
   M6.21 — navigation/report fixes ahead of the Settings rebuild.
   ========================================================================== */

/* Attention tab count (items 34-37). Amber like every other attention signal,
   small enough to read as an annotation on the tab rather than a second
   heading. Hidden entirely at zero — see org_section_nav(). */
body.fng-score-page .fng-org2__navcount {
	display: inline-block;
	margin-left: var(--fng-space-3xs);
	padding: 0.05em 0.5em;
	border-radius: var(--fng-radius-pill);
	background: var(--fng-gold-soft);
	color: var(--fng-gold-ink);
	font-size: var(--fng-text-2xs);
	font-weight: var(--fng-fw-bold);
	line-height: 1.6;
	vertical-align: baseline;
}

/* Location detail metric strip (items 38-40). The base .fng-stats grid is a
   hard repeat(4,1fr), so a five-metric location wrapped its last tile onto a
   second row. auto-fit keeps all five on one line at desktop and degrades to
   3+2 then 2 then 1 without hard-coding any widths. */
body.fng-score-page .fng-stats--auto {
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
@media (max-width: 780px) {
	body.fng-score-page .fng-stats--auto { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

/* App-nav breathing room (items 46-48). The action pair was correctly aligned
   after M6.20 but sat hard against the divider. Padding under the whole nav
   row keeps Search/Menu and the primary links on one baseline while lifting
   the group off the line. */
body.fng-score-page .fng-appnav { padding-bottom: var(--fng-space-md); }
@media (max-width: 768px) {
	/* Phones hide the primary link row, so the same padding would read as dead
	   space above the content. */
	body.fng-score-page .fng-appnav { padding-bottom: var(--fng-space-xs); }
}

/* ==========================================================================
   M6.21 — Settings as a management application, not a configuration form.
   Full-width shell: calm sidebar + workspace + persistent action bar.
   ========================================================================== */
body.fng-score-page .fng-settings-shell {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--fng-space-xl);
	width: 100%;
	align-items: start;
}

/* --- Sidebar ------------------------------------------------------------- */
body.fng-score-page .fng-settings-nav { position: sticky; top: var(--fng-space-md); }
body.fng-score-page .fng-settings-nav__label {
	margin: 0 0 var(--fng-space-xs);
	font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-black);
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--fng-muted);
}
body.fng-score-page .fng-settings-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
body.fng-score-page .fng-settings-nav__item {
	display: flex; align-items: center; gap: var(--fng-space-xs);
	padding: var(--fng-space-xs) var(--fng-space-sm);
	border-radius: var(--fng-radius-sm);
	border-left: 3px solid transparent;
	color: var(--fng-ink); text-decoration: none; font-weight: var(--fng-fw-med);
}
body.fng-score-page .fng-settings-nav__item:hover { background: var(--fng-bg); color: var(--fng-navy); }
/* Active state is background + border + weight, never colour alone. */
body.fng-score-page .fng-settings-nav__item.is-active {
	background: var(--fng-green-soft);
	border-left-color: var(--fng-green);
	color: var(--fng-navy);
	font-weight: var(--fng-fw-bold);
}
/* Focus must stay distinguishable from the active state (item 60). */
body.fng-score-page .fng-settings-nav__item:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
body.fng-score-page .fng-settings-nav__select { display: none; width: 100%; }
/* Tools are destinations, not sections: separated by a rule and their own
   label so nobody expects a Save button at the other end. */
body.fng-score-page .fng-settings-nav__label--tools {
	margin-top: var(--fng-space-lg);
	padding-top: var(--fng-space-md);
	border-top: 1px solid var(--fng-line);
}
body.fng-score-page .fng-settings-nav__item--tool { color: var(--fng-muted); }
body.fng-score-page .fng-settings-nav__item--tool:hover { color: var(--fng-navy); }

/* --- Workspace ----------------------------------------------------------- */
body.fng-score-page .fng-settings-work { min-width: 0; }
body.fng-score-page .fng-settings-head { margin: 0 0 var(--fng-space-lg); }
body.fng-score-page .fng-settings-head__title { margin: 0 0 var(--fng-space-3xs); color: var(--fng-navy); font-size: var(--fng-text-xl); font-weight: var(--fng-fw-black); }
body.fng-score-page .fng-settings-head__desc { margin: 0; color: var(--fng-muted); }

/* The shell is full width; the editing column stays a readable measure so the
   whitespace reads as deliberate rather than accidental (item 50). */
body.fng-score-page .fng-settings { max-width: 1000px; }
body.fng-score-page .fng-settings-card {
	background: var(--fng-surface); border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius);
	padding: var(--fng-space-lg);
	margin: 0 0 var(--fng-space-md);
}
body.fng-score-page .fng-settings-card__title { margin: 0; color: var(--fng-navy); font-size: var(--fng-text-md); font-weight: var(--fng-fw-bold); }
body.fng-score-page .fng-settings-card__desc { margin: var(--fng-space-3xs) 0 var(--fng-space-md); color: var(--fng-muted); font-size: var(--fng-text-sm); }
body.fng-score-page .fng-settings-card__title + .fng-field { margin-top: var(--fng-space-md); }
body.fng-score-page .fng-settings-card__placeholder {
	margin: var(--fng-space-sm) 0 0; padding: var(--fng-space-sm) var(--fng-space-md);
	background: var(--fng-bg); border-radius: var(--fng-radius-sm);
	color: var(--fng-muted); font-size: var(--fng-text-sm);
}
body.fng-score-page .fng-settings .fng-field { margin-bottom: var(--fng-space-md); }
body.fng-score-page .fng-settings .fng-field:last-child { margin-bottom: 0; }
body.fng-score-page .fng-settings .fng-field > label { display: block; font-weight: var(--fng-fw-med); color: var(--fng-navy); margin-bottom: var(--fng-space-3xs); }
body.fng-score-page .fng-settings .fng-field input[type="text"],
body.fng-score-page .fng-settings .fng-field textarea,
body.fng-score-page .fng-settings .fng-field select { width: 100%; max-width: none; }
/* Sized to content, not a uniform 250px slab for every string (item 52). */
body.fng-score-page .fng-settings textarea { min-height: 0; height: auto; resize: vertical; }

/* --- Toggle row ---------------------------------------------------------- */
/* ==========================================================================
   Shared admin dialog (Location / Department add + rename)
   ========================================================================== */
body.fng-score-page .fng-modal {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: var(--fng-space-md);
}
body.fng-score-page .fng-modal[hidden] { display: none; }
body.fng-score-page .fng-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 31, 51, 0.45); }
body.fng-score-page .fng-modal__dialog {
	position: relative;
	width: 100%; max-width: 28rem;
	max-height: calc(100vh - 2 * var(--fng-space-md));
	overflow-y: auto;
	padding: var(--fng-space-xl);
	background: var(--fng-surface);
	border-radius: var(--fng-radius-md);
	box-shadow: 0 18px 48px rgba(11, 31, 51, 0.28);
}
body.fng-score-page .fng-modal__title {
	margin: 0 0 var(--fng-space-md);
	color: var(--fng-navy); font-size: var(--fng-text-lg); font-weight: var(--fng-fw-black);
}
body.fng-score-page .fng-modal__form .fng-field { margin: 0 0 var(--fng-space-lg); }
body.fng-score-page .fng-modal__actions { display: flex; justify-content: flex-end; gap: var(--fng-space-xs); }
/* Focus must stay obvious inside a dialog that has its own surface. */
body.fng-score-page .fng-modal__dialog :focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
/* Stop the page behind the dialog scrolling under it. */
body.fng-modal-open { overflow: hidden; }

/* The single "+ Add" that closes a primary list. */
body.fng-score-page .fng-org2__addterm { margin: var(--fng-space-lg) 0 0; }

@media (max-width: 480px) {
	body.fng-score-page .fng-modal { padding: var(--fng-space-sm); align-items: flex-start; padding-top: var(--fng-space-2xl); }
	body.fng-score-page .fng-modal__dialog { padding: var(--fng-space-lg); }
	body.fng-score-page .fng-modal__actions { flex-direction: column-reverse; }
	body.fng-score-page .fng-modal__actions .fng-btn { width: 100%; }
}

/* --- Award: required + validation ----------------------------------------
   Before submission this is deliberately quiet — a small "Required" word in
   place of a bare asterisk, which means nothing to someone who has not been
   taught the convention. Nothing turns red until the person has actually tried
   to submit. */
body.fng-score-page .fng-award .gfield.fng-field--required > .gfield_label .gfield_required,
body.fng-score-page .fng-award .gfield.fng-field--required > label .gfield_required { display: none; }
body.fng-score-page .fng-award .gfield.fng-field--required > .gfield_label::after,
body.fng-score-page .fng-award .gfield.fng-field--required > label::after {
	content: var(--fng-required-text, "Required");
	display: inline-block; margin-left: var(--fng-space-2xs);
	font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-bold);
	letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--fng-muted);
}
/* After a failed submission: warm error edge, tint, and the message in text —
   colour is never the only signal. */
body.fng-score-page .fng-award .gfield_error input:not([type="hidden"]),
body.fng-score-page .fng-award .gfield_error textarea,
body.fng-score-page .fng-award .gfield_error select,
body.fng-score-page .fng-award [aria-invalid="true"] {
	border-color: var(--fng-red-ink);
	background: var(--fng-red-soft);
}
body.fng-score-page .fng-award .gfield_validation_message,
body.fng-score-page .fng-award .validation_message {
	display: flex; align-items: flex-start; gap: var(--fng-space-3xs);
	margin-top: var(--fng-space-3xs);
	background: none; border: 0; padding: 0;
	color: var(--fng-red-ink); font-size: var(--fng-text-sm); font-weight: var(--fng-fw-med);
}
/* Compact error glyph, decorative — the sentence beside it carries the meaning. */
body.fng-score-page .fng-award .gfield_validation_message::before,
body.fng-score-page .fng-award .validation_message::before {
	content: "!"; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.05em; height: 1.05em; margin-top: 0.1em;
	border-radius: var(--fng-radius-pill);
	background: var(--fng-red-ink); color: #fff;
	font-size: 0.75em; font-weight: var(--fng-fw-black);
}
body.fng-score-page .fng-award__summary { margin-bottom: var(--fng-space-lg); }
body.fng-score-page .fng-award__summary p { margin: 0; }
body.fng-score-page .fng-award__summary-title { font-weight: var(--fng-fw-bold); }

/* --- Award: sending-limit states ----------------------------------------- */
/* Informational and positive — never warning yellow or red. A tinted, compact
   container so it reads as a deliberate piece of the page rather than a stray
   grey line, while staying quieter than the form it sits above. */
body.fng-score-page .fng-award__allowance {
	display: inline-flex; align-items: center; gap: var(--fng-space-2xs);
	width: fit-content; max-width: 100%;
	margin: 0 0 var(--fng-space-lg);
	padding: var(--fng-space-2xs) var(--fng-space-md);
	border-radius: var(--fng-radius-pill);
	background: var(--fng-green-soft);
	border: 1px solid #cfe6d6;
	color: var(--fng-navy); font-size: var(--fng-text-sm); font-weight: var(--fng-fw-med);
}
body.fng-score-page .fng-award__allowance-icon { display: inline-flex; color: var(--fng-green-strong); }
/* Reached: a calm end-state, not an error. */
body.fng-score-page .fng-award-limit {
	max-width: 34rem; margin: 0 auto; padding: var(--fng-space-2xl) var(--fng-space-xl);
	text-align: center;
	background: var(--fng-surface);
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius-md);
}
body.fng-score-page .fng-award-limit__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: var(--fng-space-md);
	border-radius: var(--fng-radius-pill);
	background: var(--fng-gold-soft); color: var(--fng-gold-ink);
}
body.fng-score-page .fng-award-limit__title {
	margin: 0 0 var(--fng-space-2xs);
	color: var(--fng-navy); font-size: var(--fng-text-lg); font-weight: var(--fng-fw-black);
}
body.fng-score-page .fng-award-limit__copy { margin: 0 0 var(--fng-space-sm); color: var(--fng-ink); }
body.fng-score-page .fng-award-limit__count { margin: 0; color: var(--fng-muted); font-size: var(--fng-text-sm); }

/* --- Birdie sending limit ------------------------------------------------ */
/* The dependent fields sit in a shallow indent so it reads as "these belong to
   the toggle above" without a nested card. */
body.fng-score-page .fng-birdielimit__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fng-space-md);
	margin-top: var(--fng-space-md);
	padding-left: var(--fng-space-md);
	border-left: 3px solid var(--fng-green-soft);
}
body.fng-score-page .fng-birdielimit__fields .fng-field { margin: 0; }
body.fng-score-page .fng-birdielimit__summary {
	margin: var(--fng-space-md) 0 0;
	padding: var(--fng-space-sm) var(--fng-space-md);
	border-radius: var(--fng-radius-sm);
	background: var(--fng-green-soft);
	color: var(--fng-navy);
	font-weight: var(--fng-fw-med);
	font-size: var(--fng-text-sm);
}
body.fng-score-page .fng-birdielimit [hidden] { display: none; }

body.fng-score-page .fng-setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fng-space-md); margin-top: var(--fng-space-sm); }
body.fng-score-page .fng-setting-row__name { margin: 0 0 var(--fng-space-3xs); font-weight: var(--fng-fw-bold); color: var(--fng-navy); }
body.fng-score-page .fng-setting-row__help { margin: 0; color: var(--fng-muted); font-size: var(--fng-text-sm); max-width: 60ch; }
/* A real checkbox underneath, presented as a switch. */
body.fng-score-page .fng-switch { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; }
body.fng-score-page .fng-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
body.fng-score-page .fng-switch__track {
	width: 44px; height: 26px; border-radius: var(--fng-radius-pill);
	background: #c9d3dd; position: relative; transition: background .15s ease;
}
body.fng-score-page .fng-switch__track::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 20px; height: 20px; border-radius: 50%; background: #fff;
	transition: transform .15s ease;
}
body.fng-score-page .fng-switch input:checked + .fng-switch__track { background: var(--fng-green); }
body.fng-score-page .fng-switch input:checked + .fng-switch__track::after { transform: translateX(18px); }
body.fng-score-page .fng-switch input:focus-visible + .fng-switch__track { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* --- Sticky action bar --------------------------------------------------- */
body.fng-score-page .fng-settings-actions {
	position: sticky; bottom: 0; z-index: 5;
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--fng-space-md);
	max-width: 1000px;
	margin-top: var(--fng-space-md);
	padding: var(--fng-space-sm) var(--fng-space-md);
	background: rgba(255,255,255,0.97);
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius);
	box-shadow: var(--fng-shadow);
}
body.fng-score-page .fng-settings-actions__state { margin: 0; color: var(--fng-muted); font-size: var(--fng-text-sm); }
body.fng-score-page .fng-settings-actions__state.is-dirty { color: var(--fng-gold-ink); font-weight: var(--fng-fw-med); }
body.fng-score-page .fng-settings-actions__buttons { display: flex; align-items: center; gap: var(--fng-space-xs); }
body.fng-score-page .fng-settings-actions .fng-btn[disabled] { opacity: 0.5; cursor: default; }

@media (max-width: 900px) {
	/* One column, and the sidebar becomes a select rather than a 240px rail
	   squeezed beside the content (item 9). */
	body.fng-score-page .fng-settings-shell { grid-template-columns: 1fr; gap: var(--fng-space-md); }
	body.fng-score-page .fng-settings-nav { position: static; }
	body.fng-score-page .fng-settings-nav__list { display: none; }
	/* The select carries a Tools optgroup, so the desktop Tools heading would
	   be a label with nothing under it. */
	body.fng-score-page .fng-settings-nav__label--tools { display: none; }
	body.fng-score-page .fng-settings-nav__select { display: block; }
	body.fng-score-page .fng-settings-actions { flex-direction: column; align-items: stretch; }
	body.fng-score-page .fng-settings-actions__buttons { justify-content: stretch; }
	body.fng-score-page .fng-settings-actions__buttons .fng-btn { flex: 1 1 auto; }
	body.fng-score-page .fng-setting-row { flex-direction: column; }
	body.fng-score-page .fng-birdielimit__fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   M6.25 — Birdie balance, S.C.O.R.E. track, redemption
   ========================================================================== */

/* --- Balance summary ------------------------------------------------------ */
body.fng-score-page .fng-balance { margin: 0 0 var(--fng-space-xl); }
body.fng-score-page .fng-balance__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fng-space-md); margin-bottom: var(--fng-space-md);
}
body.fng-score-page .fng-balance__figure {
	display: flex; flex-direction: column; gap: var(--fng-space-3xs);
	padding: var(--fng-space-md);
	background: var(--fng-surface); border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius);
}
/* The available balance is the number that governs redemption and ranking, so
   it is visually the headline; the other two are context for it. */
body.fng-score-page .fng-balance__figure.is-primary { border-left: 3px solid var(--fng-green); background: var(--fng-green-soft); }
body.fng-score-page .fng-balance__num { font-size: var(--fng-text-2xl); font-weight: var(--fng-fw-black); color: var(--fng-navy); line-height: 1; }
body.fng-score-page .fng-balance__figure.is-primary .fng-balance__num { color: var(--fng-green-strong); }
body.fng-score-page .fng-balance__label { font-size: var(--fng-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fng-muted); font-weight: var(--fng-fw-bold); }
body.fng-score-page .fng-balance__eligible {
	margin: 0 0 var(--fng-space-md); width: fit-content;
	padding: var(--fng-space-2xs) var(--fng-space-md);
	border-radius: var(--fng-radius-pill);
	background: var(--fng-green-soft); border: 1px solid #cfe6d6;
	color: var(--fng-navy); font-size: var(--fng-text-sm); font-weight: var(--fng-fw-med);
}
/* The action row: track takes the width, the control closes it at the right. */
body.fng-score-page .fng-balance__row {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--fng-space-lg); flex-wrap: wrap;
}
body.fng-score-page .fng-balance__row .fng-reward { flex: 1 1 auto; min-width: 0; }
body.fng-score-page .fng-balance__actions { display: flex; align-items: center; gap: var(--fng-space-sm); flex: 0 0 auto; }

/* --- Reward Progress ------------------------------------------------------
   The letters are a PROGRESS INDICATOR for one 25-Birdie reward cycle, not the
   ledger. Five groups of five, and each group is the unit the eye lands on: a
   reward stage, in a soft container, rather than five separate boxed letters.

   Twenty-five individual chips read as a grid of form fields; twenty-five bare
   letters read as noise you have to count. A group has an outline, so it is one
   thing — and a completed one carries a restrained green edge so "how many
   stages are done" is answerable without counting anything. */
body.fng-score-page .fng-reward { display: flex; flex-direction: column; gap: var(--fng-space-2xs); min-width: 0; }
body.fng-score-page .fng-reward__track {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: var(--fng-space-3xs) 0.3rem;
	min-width: 0;
}
body.fng-score-page .fng-reward__word {
	display: inline-flex; align-items: center; gap: 0.28em; flex: 0 0 auto;
	padding: 0.2rem 0.42rem;
	border: 1px solid var(--fng-line);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #fcfcfa;
}
/* A finished stage. Green only on the edge that closes it — a filled green group
   would make five of them shout, and eligibility is stated in words elsewhere. */
body.fng-score-page .fng-reward__word.is-complete {
	border-color: #d7e6da;
	border-bottom-color: var(--fng-green);
	background: var(--fng-surface);
}
body.fng-score-page .fng-reward__letter {
	font-size: 0.75rem; font-weight: var(--fng-fw-bold);
	color: var(--fng-navy); line-height: 1.25;
	letter-spacing: 0.01em;
}
body.fng-score-page .fng-reward__progress {
	margin: 0; font-size: var(--fng-text-2xs); color: var(--fng-muted);
	letter-spacing: 0.01em;
}
body.fng-score-page .fng-reward__empty { margin: 0; font-size: var(--fng-text-2xs); color: var(--fng-muted); }

/* The profile has room the leaderboard row does not. Same component, one step up
   in scale — never a second implementation. */
body.fng-score-page .fng-reward--panel .fng-reward__word { padding: 0.3rem 0.55rem; gap: 0.32em; }
body.fng-score-page .fng-reward--panel .fng-reward__letter { font-size: 0.875rem; }
body.fng-score-page .fng-reward--panel .fng-reward__progress { font-size: var(--fng-text-xs); }

/* --- The balance figure ---------------------------------------------------
   A number read as a number, with one short line of reward state beneath it and
   nothing else. No pill, no bare coloured dot standing in for a sentence. */
body.fng-score-page .fng-reward-balance {
	display: inline-flex; align-items: center; gap: 0.4rem;
}
body.fng-score-page .fng-reward-balance__num {
	font-size: var(--fng-text-lg); font-weight: var(--fng-fw-black);
	color: var(--fng-navy); line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
/* Colour, not size. Eligible balances are green; they are not enlarged, because
   the column has to stay scannable as a column of comparable numbers. */
body.fng-score-page .fng-reward-balance.is-eligible .fng-reward-balance__num { color: var(--fng-green-strong); }
/* The reward mark: one small flag, focusable, holding the full sentence. It
   replaced a "Reward ready" line under every eligible figure — fifty of those is
   a paragraph, one glyph is a mark. */
body.fng-score-page .fng-reward-balance__flag {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--fng-green-strong); cursor: help; flex: 0 0 auto;
}
body.fng-score-page .fng-reward-balance__flag:focus-visible {
	outline: 3px solid var(--fng-blue); outline-offset: 2px; border-radius: 3px;
}

/* --- Redeem dialog extras (the dialog itself reuses .fng-modal) ------------ */
body.fng-score-page .fng-redeem__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--fng-space-md); margin: 0 0 var(--fng-space-md); }
body.fng-score-page .fng-redeem__facts dt { font-size: var(--fng-text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fng-muted); font-weight: var(--fng-fw-bold); }
body.fng-score-page .fng-redeem__facts dd { margin: var(--fng-space-3xs) 0 0; font-size: var(--fng-text-lg); font-weight: var(--fng-fw-black); color: var(--fng-navy); }
body.fng-score-page .fng-redeem__facts--calc { padding: var(--fng-space-md); background: var(--fng-bg); border-radius: var(--fng-radius-sm); }
body.fng-score-page .fng-stepper { display: inline-flex; align-items: stretch; gap: var(--fng-space-2xs); }
body.fng-score-page .fng-stepper__btn {
	width: var(--fng-control-h); height: var(--fng-control-h); flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--fng-line); border-radius: var(--fng-radius-sm);
	background: var(--fng-surface); color: var(--fng-navy);
	font-size: var(--fng-text-lg); font-weight: var(--fng-fw-black); cursor: pointer;
}
body.fng-score-page .fng-stepper__btn:hover { border-color: var(--fng-green); }
body.fng-score-page .fng-stepper__btn:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }
body.fng-score-page .fng-stepper input[type="number"] { width: 5rem; text-align: center; }
/* The gift-card count is the one decision in this dialog, so the label and the
   stepper are centred as a unit. Only this block centres — the employee, the
   balance and the result summary stay left-aligned, because a dialog where
   everything is centred has no focal point at all. */
body.fng-score-page .fng-redeem__stepper { text-align: center; }
body.fng-score-page .fng-redeem__stepper > label { display: block; text-align: center; }
body.fng-score-page .fng-redeem__stepper .fng-stepper { justify-content: center; }
body.fng-score-page .fng-redeem-history { margin: 0 0 var(--fng-space-xl); }

@media (max-width: 640px) {
	body.fng-score-page .fng-balance__grid { grid-template-columns: 1fr; gap: var(--fng-space-sm); }
	body.fng-score-page .fng-redeem__facts { grid-template-columns: 1fr; }
}

/* --- Scoreboard table ------------------------------------------------------
   Rank | Employee | S.C.O.R.E. — Location and Department moved to the name's
   tooltip so the recognition pattern is what the eye lands on.

   COLUMN WIDTHS. Rank holds one or two digits and nothing else, so it gets only
   what that needs; Employee gets enough that ordinary full names sit on one
   line; S.C.O.R.E. takes the rest, because it is the content. table-layout:fixed
   makes those widths actually hold rather than being renegotiated per row. */
body.fng-score-page .fng-leaderboard__table { table-layout: fixed; width: 100%; }
body.fng-score-page .fng-leaderboard__table th.fng-leaderboard__rank-h,
body.fng-score-page .fng-leaderboard__table td.fng-leaderboard__rank {
	width: 4.25rem; text-align: left; font-weight: var(--fng-fw-bold); color: var(--fng-navy);
	font-variant-numeric: tabular-nums;
}
body.fng-score-page .fng-leaderboard__table th:nth-child(2),
body.fng-score-page .fng-leaderboard__who { width: 16rem; }
body.fng-score-page .fng-leaderboard__score-h,
body.fng-score-page .fng-leaderboard__score { width: auto; }
body.fng-score-page .fng-leaderboard__avail-h,
body.fng-score-page .fng-leaderboard__avail { width: 6.5rem; text-align: right; }
body.fng-score-page .fng-leaderboard__table td { vertical-align: middle; }
/* Compact scorecard rows: the letters set the height, not the padding. */
body.fng-score-page .fng-leaderboard__table tbody td { padding-top: 0.95rem; padding-bottom: 0.95rem; }

/* A scorecard is horizontal rules and whitespace. No vertical rules, no tinted
   rows, no boxed cells — the eye should run left to right along a row, and
   nothing should divide it into compartments on the way. */
body.fng-score-page .fng-leaderboard .fng-table-wrap { box-shadow: none; }
body.fng-score-page .fng-leaderboard__table { border: 0; background: transparent; }
body.fng-score-page .fng-leaderboard__table thead th {
	background: transparent;
	border-bottom: 1px solid var(--fng-line);
	font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-bold);
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--fng-muted);
	padding-top: var(--fng-space-sm); padding-bottom: var(--fng-space-sm);
}
body.fng-score-page .fng-leaderboard__table tbody tr:last-child td { border-bottom: 0; }
body.fng-score-page .fng-leaderboard__table tbody tr:hover { background: #fbfcfd; }

/* Placement lives on the rank, as a small accent — not as a coloured band
   across the whole row, which made the top three look like a separate table. */
body.fng-score-page .fng-leaderboard__rank.fng-lb-medal { position: relative; padding-left: 1.4rem; }
body.fng-score-page .fng-lb-medal::before {
	content: ""; position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%);
	width: 7px; height: 7px; border-radius: 50%;
}
body.fng-score-page .fng-lb-medal--1::before { background: #c6a04a; }
body.fng-score-page .fng-lb-medal--2::before { background: #9fadb8; }
body.fng-score-page .fng-lb-medal--3::before { background: #c08457; }
/* A full name should not wrap at ordinary desktop widths. It still may — long
   names exist — and the rank stays on the row's centre line when it does. */
body.fng-score-page .fng-leaderboard__who { white-space: normal; overflow-wrap: break-word; }
body.fng-score-page .fng-leaderboard__who .fng-employee-link { display: inline; }

/* TOOLTIP OVERFLOW. The name tooltip used to be clipped by .fng-table-wrap's
   overflow-x — a scroll container clips its descendants, and no z-index can
   escape one. Rather than forcing the whole wrapper visible (which would kill
   the mobile track scrolling that lives inside it), the responsibility moves:
   this table no longer needs to scroll horizontally at all, because the track
   is capped at 25 letters, so the wrapper can be visible and the SCORE cell
   owns its own overflow on narrow screens. */
body.fng-score-page .fng-leaderboard .fng-table-wrap { overflow: visible; }
/* .fng-table carries overflow:hidden to clip its own rounded corners, and that
   clipped the first row's tooltip against the table's top edge. The wrapper
   already draws the border and radius here, so the table does not need to. */
body.fng-score-page .fng-leaderboard__table { overflow: visible; }
body.fng-score-page .fng-leaderboard__score { overflow: hidden; }
body.fng-score-page .fng-leaderboard__who { overflow: visible; position: relative; z-index: 1; }
/* Multi-line tooltip: name, where they work, what they hold. Anchored to the
   LEFT here — the name is the first column, so a right-anchored tooltip would
   hang off the table's leading edge. Rows near the bottom flip below via the
   modifier applied on the last rows. */
body.fng-score-page .fng-leaderboard__who [data-fng-tip]::after {
	left: 0; right: auto;
	white-space: pre-line; max-width: 13rem; width: max-content;
	text-align: left;
	padding: 0.3rem 0.5rem; line-height: 1.4;
}
/* The first row has no space above it that is not the column header, so its
   tooltip opens downward instead of covering "Rank / Employee / S.C.O.R.E.". */
body.fng-score-page .fng-leaderboard tbody tr:first-child .fng-leaderboard__who [data-fng-tip]::after {
	top: calc(100% + 6px); bottom: auto;
}
/* The tooltip must sit above every following row, not just its own. */
body.fng-score-page .fng-leaderboard__who [data-fng-tip]:hover,
body.fng-score-page .fng-leaderboard__who [data-fng-tip]:focus-visible { z-index: 40; }
body.fng-score-page .fng-leaderboard tbody tr:hover,
body.fng-score-page .fng-leaderboard tbody tr:focus-within { position: relative; z-index: 5; }

@media (max-width: 768px) {
	/* The stacked-card treatment keeps Rank and Employee legible; the track
	   scrolls inside its own cell so the page never gains a scrollbar. */
	body.fng-score-page .fng-leaderboard__table { table-layout: auto; }
	body.fng-score-page .fng-leaderboard__who { width: auto; }
	/* Reward groups wrap cleanly rather than scrolling: five short containers fit
	   two-per-line at phone widths, which reads better than a scroll region. */
	body.fng-score-page .fng-leaderboard__score .fng-reward__track { flex-wrap: wrap; }
	body.fng-score-page .fng-leaderboard__who [data-fng-tip]::after { max-width: 12rem; }
}

/* --- Audit: redemption events --------------------------------------------- */
body.fng-score-page .fng-audit-redemptions { margin-top: var(--fng-space-2xl); }
body.fng-score-page .fng-badge--redemption { background: var(--fng-blue-soft); color: #1e5a94; }
body.fng-score-page .fng-audit-redemptions__note { display: block; margin-top: var(--fng-space-3xs); color: var(--fng-muted); font-size: var(--fng-text-sm); }

/* A redemption in the personal Activity feed. Same badge colour as the audit
   row, so the event reads as the same kind of thing on both surfaces. */
body.fng-score-page .fng-status--redeemed { background: var(--fng-blue-soft); color: #1e5a94; }

/* ==========================================================================
   M6.28 — one navigation system.

   The app had grown a primary tab row, a desktop hamburger holding more
   destinations, a bordered search box, an account area, and Organization's own
   section nav plus a grid of stat cards restating it. Several of those competed
   for the same job; two of them held the same destinations at once. What is
   left is: where you can go, then what you can do, then nothing.
   ========================================================================== */

/* The toolbar reads as ONE control. Text links on the left, equal-size square
   icon buttons on the right, all sharing the control height so the row has a
   single baseline rather than two visual systems on one line. */
body.fng-score-page .fng-appnav__actions { gap: var(--fng-space-2xs); }
body.fng-score-page .fng-appnav__action {
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--fng-control-h); height: var(--fng-control-h); flex: 0 0 auto;
	border-radius: var(--fng-radius-sm);
	border: 1px solid transparent;
	background: transparent;
	color: var(--fng-navy);
	text-decoration: none;
}
body.fng-score-page .fng-appnav__action:hover {
	border-color: var(--fng-line);
	background: var(--fng-surface);
	color: var(--fng-green-strong);
}
body.fng-score-page .fng-appnav__action:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; }

/* REVIEW QUEUE BADGE (M6.34). The icon row was the only route to the Review page
   for a Director — their Overview shows organization figures where a supervisor
   gets the "N Birdies waiting" panel — so an icon with no state meant a full
   queue looked identical to an empty one. The count rides on the icon itself.
   Red because it is a queue with people waiting at the other end of it, not a
   neutral tally; the accessible name says "Review Birdies — 3 waiting", so the
   colour is never the only carrier. */
body.fng-score-page .fng-appnav__action { position: relative; }
body.fng-score-page .fng-appnav__count {
	position: absolute; top: 1px; right: 1px;
	min-width: 17px; height: 17px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--fng-radius-pill);
	background: #c0392b; color: #fff;
	font-size: 0.66rem; font-weight: var(--fng-fw-black);
	line-height: 1; letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--fng-surface);
	pointer-events: none;
}
/* The badge must not be the only signal, and must not disappear against the
   hover fill. */
body.fng-score-page .fng-appnav__action.has-count { color: var(--fng-navy); }
body.fng-score-page .fng-appnav__action.has-count:hover .fng-appnav__count { box-shadow: 0 0 0 2px var(--fng-surface); }
@media (max-width: 768px) {
	/* Sits alongside the drawer button at phone widths without crowding it. */
	body.fng-score-page .fng-appnav__count { top: 0; right: 0; }
}
/* Tooltips open downward: this row sits at the top of the application, so an
   upward tooltip would point into the site header. */
body.fng-score-page .fng-appnav__action[data-fng-tip]::after {
	top: calc(100% + 6px); bottom: auto; right: 0; left: auto;
}

/* The drawer button is the mobile navigation and nothing else. On desktop every
   destination it once held is either a primary link, an action, or the theme
   header's own account menu — so showing it there would be a second navigation
   for a set of links already on screen. */
body.fng-score-page .fng-menu { display: none; }
@media (max-width: 768px) {
	body.fng-score-page .fng-menu { display: flex; }
}

/* Attached to the application, not floating above it. The row carried a whole
   space-md of padding under it plus the shell's own margin, which read as a gap
   between the navigation and the page it belongs to. */
body.fng-score-page .fng-appnav { padding-bottom: var(--fng-space-sm); margin-bottom: var(--fng-space-lg); }
@media (max-width: 768px) {
	body.fng-score-page .fng-appnav { padding-bottom: 0; margin-bottom: var(--fng-space-md); }
}

/* --- Organization section nav: the counts live here now ------------------- */
/* Metadata on a navigation item, not a dashboard tile: same weight as the label
   it annotates, sitting a step back from it in colour. */
body.fng-score-page .fng-org2__navitem {
	display: inline-flex; align-items: baseline; gap: var(--fng-space-3xs);
}
/* M6.32: a finished-looking count. Bare digits beside a label read as an
   unstyled fragment — something the build forgot to finish — so the count gets a
   quiet container of its own: one step down in size, medium weight, muted ink on
   a barely-there neutral fill, small pill radius. Enough to say "this belongs to
   that label" and not one step more. It is deliberately NOT the Attention
   treatment: if every count wore amber, the one that means "twelve people cannot
   receive Birdies" would stop meaning anything. */
body.fng-score-page .fng-org2__navcount {
	margin-left: 0;
	padding: 0.1em 0.42em;
	border-radius: var(--fng-radius-pill);
	background: rgba(19, 46, 77, 0.055);
	color: var(--fng-muted);
	font-size: 0.75rem;
	font-weight: var(--fng-fw-med);
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}
body.fng-score-page .fng-org2__navitem.is-active .fng-org2__navcount {
	background: rgba(19, 46, 77, 0.09);
	color: var(--fng-navy);
}
/* The count must not push the label's baseline around, or the active underline
   would sit lower on tabs that carry a count than on the two that do not. */
body.fng-score-page .fng-org2__navcount,
body.fng-score-page .fng-org2__navcount--warn { align-self: center; }
/* Attention is the exception, and keeps the amber it has always had — twelve
   people who cannot receive Birdies must not read as neutral metadata. */
body.fng-score-page .fng-org2__navcount--warn {
	padding: 0.05em 0.5em;
	border-radius: var(--fng-radius-pill);
	background: var(--fng-gold-soft);
	color: var(--fng-gold-ink);
	font-size: var(--fng-text-2xs);
	line-height: 1.6;
}
body.fng-score-page .fng-org2__navitem.is-active .fng-org2__navcount--warn { color: var(--fng-gold-ink); }

/* ==========================================================================
   M6.29 — the leaderboard as a reward board.

   Four columns, one visual language: who, how close to a reward, how much they
   hold. Location and Department print under the name instead of hiding behind
   hover, the letters group into reward stages, and the balance gets a column of
   its own with the reward state beneath it.
   ========================================================================== */

/* Employee gets the width. A full name plus its location · department line is
   the widest thing in the row, and it is also the thing people scan for. */
body.fng-score-page .fng-leaderboard__table th.fng-leaderboard__who-h,
body.fng-score-page .fng-leaderboard__who { width: 19rem; }
body.fng-score-page .fng-leaderboard__name {
	display: block;
	font-weight: var(--fng-fw-bold); color: var(--fng-navy);
	line-height: 1.3;
}
body.fng-score-page .fng-leaderboard__meta {
	display: block; margin-top: 0.1rem;
	font-size: var(--fng-text-2xs); color: var(--fng-muted);
	line-height: 1.35;
}
/* Rows breathe enough for two lines of identity plus two of progress. */
body.fng-score-page .fng-leaderboard__table tbody td { padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* The Reward Progress heading carries the rule, one hover or focus away. */
body.fng-score-page .fng-leaderboard__score-h { white-space: nowrap; }
body.fng-score-page .fng-leaderboard__info {
	display: inline-flex; align-items: center; justify-content: center;
	margin-left: 0.3rem; color: var(--fng-muted); cursor: help;
	vertical-align: -2px;
}
body.fng-score-page .fng-leaderboard__info:hover { color: var(--fng-navy); }
body.fng-score-page .fng-leaderboard__info:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; border-radius: 3px; }
/* Header tooltip opens downward — there is nothing above it but the page title. */
body.fng-score-page .fng-leaderboard__info[data-fng-tip]::after {
	top: calc(100% + 6px); bottom: auto; left: 0; right: auto;
	white-space: normal; width: max-content; max-width: 17rem;
	text-align: left; font-weight: var(--fng-fw-med);
}

/* Available: right-aligned, and the only place a reward state is asserted. */
body.fng-score-page .fng-leaderboard__avail-h,
body.fng-score-page .fng-leaderboard__avail { width: 8.5rem; text-align: right; }

/* Top three: a small marker on the rank. Nothing tints a row, nothing draws a
   vertical rule — see the M6.26.1 note where the bands were removed. */
body.fng-score-page .fng-leaderboard tbody tr:hover { background: #fbfcfd; }

/* --- Tooltip: stay inside the viewport ------------------------------------
   The shared tooltip anchors left by default, which is right for a first-column
   name. fng-tooltip.js measures the rendered box and adds .is-tip-flip to any
   anchor whose tooltip would cross the right edge, which switches the anchoring
   rather than letting it run off-screen. No leaderboard-only implementation:
   the class applies to every [data-fng-tip] in the app. */
body.fng-score-page [data-fng-tip].is-tip-flip::after { left: auto; right: 0; }
body.fng-score-page [data-fng-tip].is-tip-below::after { top: calc(100% + 6px); bottom: auto; }

@media (max-width: 768px) {
	body.fng-score-page .fng-leaderboard__avail-h,
	body.fng-score-page .fng-leaderboard__avail { width: auto; text-align: left; }
	body.fng-score-page .fng-leaderboard__info[data-fng-tip]::after { max-width: 14rem; }
}

/* ==========================================================================
   M6.30 — the board stops explaining itself once per row.

   Every row used to carry a line of prose under the track ("16 of 25 toward
   reward", "2 rewards available · 2 toward next") plus a "Reward ready" line
   under every eligible figure. Fifty rows of that is the same rule restated
   fifty times, and it turned a table into a page of sentences.

   What replaced it: the heading explains the system ONCE, the track shows the
   position, the figure states the balance, and a small flag marks the rows where
   something can be claimed. The detail did not go away — it lives on hover,
   focus, and in the accessible label, where somebody asks for it.
   ========================================================================== */

/* Rank stays two digits wide; Available gets enough for a three-digit balance
   plus its flag. Reward Progress keeps everything left over — it is the content. */
body.fng-score-page .fng-leaderboard__table th.fng-leaderboard__rank-h,
body.fng-score-page .fng-leaderboard__table td.fng-leaderboard__rank { width: 4.75rem; }
body.fng-score-page .fng-leaderboard__avail-h,
body.fng-score-page .fng-leaderboard__avail { width: 9.5rem; }

/* Tighter rows, now that identity is the tallest thing in them: two lines of
   name plus metadata, with the track and the figure centred against it. */
body.fng-score-page .fng-leaderboard__table tbody td { padding-top: 0.78rem; padding-bottom: 0.78rem; }
body.fng-score-page .fng-leaderboard__score .fng-reward { gap: 0; }

/* The flag sits at the far right of the row, so its tooltip has to open to the
   LEFT or it leaves the table. fng-tooltip.js would flip it on measurement
   anyway; anchoring it correctly from the start means it never renders wrong for
   a frame, and it still works with the script absent. */
body.fng-score-page .fng-leaderboard__avail [data-fng-tip]::after {
	right: 0; left: auto;
	white-space: normal; width: max-content; max-width: 15rem;
	text-align: left; font-weight: var(--fng-fw-med);
}
body.fng-score-page .fng-leaderboard tbody tr:first-child .fng-leaderboard__avail [data-fng-tip]::after {
	top: calc(100% + 6px); bottom: auto;
}
/* The Available cell has to let its own tooltip out; the row lifts above the
   rows below it while the mark is hovered or focused. */
body.fng-score-page .fng-leaderboard__avail { overflow: visible; position: relative; }
body.fng-score-page .fng-leaderboard__avail [data-fng-tip]:hover,
body.fng-score-page .fng-leaderboard__avail [data-fng-tip]:focus-visible { z-index: 40; }

/* NARROW DESKTOP (small laptops, split windows). The reward cycle is five groups
   wide and it must stay ONE line — a wrapped track turns a 66px row into a 79px
   one and breaks the column's rhythm halfway down the board. Rather than shrink
   the letters, the Employee column gives back the width it does not need at this
   size, and the groups tighten by a couple of pixels each. */
@media (max-width: 1200px) and (min-width: 769px) {
	body.fng-score-page .fng-leaderboard__table th.fng-leaderboard__who-h,
	body.fng-score-page .fng-leaderboard__who { width: 14.5rem; }
	body.fng-score-page .fng-leaderboard__table th.fng-leaderboard__rank-h,
	body.fng-score-page .fng-leaderboard__table td.fng-leaderboard__rank { width: 3.6rem; }
	body.fng-score-page .fng-leaderboard__avail-h,
	body.fng-score-page .fng-leaderboard__avail { width: 7.5rem; }
	body.fng-score-page .fng-leaderboard__score .fng-reward__track { gap: var(--fng-space-3xs) 0.22rem; }
	body.fng-score-page .fng-leaderboard__score .fng-reward__word { padding: 0.2rem 0.32rem; gap: 0.2em; }
}

@media (max-width: 768px) {
	/* In the stacked-card treatment the figure leads its own line, so the flag
	   follows the number rather than hanging off a right edge that is not there. */
	body.fng-score-page .fng-reward-balance { justify-content: flex-start; }
	body.fng-score-page .fng-leaderboard__avail [data-fng-tip]::after { left: 0; right: auto; max-width: 13rem; }
}

/* --- Profile: Reward Progress beside its action --------------------------- */
body.fng-score-page .fng-balance__reward {
	margin-top: var(--fng-space-lg);
	padding-top: var(--fng-space-md);
	border-top: 1px solid var(--fng-line);
}
/* The heading and its info affordance sit together at the left; nothing is
   pushed to the far right, because the reward count now lives with the button. */
body.fng-score-page .fng-balance__rewardhead {
	display: flex; align-items: center; justify-content: flex-start;
	gap: var(--fng-space-3xs); margin-bottom: var(--fng-space-sm);
}
body.fng-score-page .fng-balance__rewardtitle {
	margin: 0;
	font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-black);
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--fng-muted);
}
body.fng-score-page .fng-balance__rewardinfo {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--fng-muted); cursor: help;
}
body.fng-score-page .fng-balance__rewardinfo:hover { color: var(--fng-navy); }
body.fng-score-page .fng-balance__rewardinfo:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 2px; border-radius: 3px; }
/* Opens downward and to the right: the heading is at the top-left of the block. */
body.fng-score-page .fng-balance__rewardinfo[data-fng-tip]::after {
	top: calc(100% + 6px); bottom: auto; left: 0; right: auto;
	white-space: normal; width: max-content; max-width: 19rem;
	text-align: left; font-weight: var(--fng-fw-med);
}

/* THE ACTION CLUSTER. Control first, then how many rewards are waiting, centred
   under it — a caption for the button, not a competing badge. It used to sit up
   beside the heading, which put the reason at the opposite end of the row from
   the thing it was a reason for. */
body.fng-score-page .fng-balance__ready {
	display: inline-flex; align-items: center; gap: 0.3rem;
	font-size: var(--fng-text-xs); font-weight: var(--fng-fw-bold);
	color: var(--fng-green-strong);
}
body.fng-score-page .fng-balance__actions {
	flex-direction: column; align-items: center; gap: var(--fng-space-2xs);
}
/* The track owns the left, the cluster closes the row on the right, and both
   centre on the same line rather than the button hanging in dead space. */
body.fng-score-page .fng-balance__row { align-items: center; }

@media (max-width: 640px) {
	/* Stacked: heading, track, control, reward count. Nothing overlaps and the
	   cluster stops being right-aligned against an edge that is not there. */
	body.fng-score-page .fng-balance__row { align-items: stretch; gap: var(--fng-space-md); }
	body.fng-score-page .fng-balance__actions { align-items: flex-start; }
	body.fng-score-page .fng-balance__rewardinfo[data-fng-tip]::after { max-width: 14rem; }
}

/* A POST action inside an entity row (M6.35). The form is layout-neutral so a
   button that changes something sits exactly where a link button would. */
body.fng-score-page .fng-orge__actionform { display: inline; margin: 0; }
body.fng-score-page .fng-orge__actionform button { margin: 0; }

/* --- The edit pencil, on the name it edits -------------------------------- */
body.fng-score-page .fng-profile-card__nameaction {
	display: inline-flex; vertical-align: middle; margin-left: var(--fng-space-2xs);
}
body.fng-score-page .fng-edit-icon--name { width: 34px; height: 34px; }
body.fng-score-page .fng-edit-icon--name[data-fng-tip]::after {
	white-space: nowrap; left: 0; right: auto;
}

/* ---------------------------------------------------------------------------
   Manual Birdie adjustments (M6.38)
   Senior leadership correcting a total by hand, and the record of it. Content is
   width-capped: this sits at the foot of a full-width editor, and an unbounded
   paragraph on a 1900px screen is a line of text nobody can track back from. The
   history is shown to the employee too, so it reads as information rather than
   as an administrative control.
   --------------------------------------------------------------------------- */

.fng-adjust {
	margin: var(--fng-space-xl) 0 0;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius);
	background: var(--fng-surface);
	box-shadow: var(--fng-shadow);
}

.fng-adjust__title,
.fng-adjust-history__title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	color: var(--fng-navy);
}

.fng-adjust__intro {
	max-width: 62ch;
	margin: 0 0 1.25rem;
}

.fng-adjust__form {
	max-width: 42rem;
}

/* Amount and the current total read as one statement: "add N to the 2 they
   have". Baseline-aligned so the two numbers sit on the same line. */
.fng-adjust__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.25rem;
	margin-bottom: 1rem;
}

.fng-adjust__amount {
	margin-bottom: 0;
	flex: 0 0 8rem;
}

.fng-adjust__amount input {
	max-width: 8rem;
	text-align: center;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

.fng-adjust__current {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-bottom: 0.15rem;
}

.fng-adjust__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fng-muted);
}

.fng-adjust__value {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--fng-navy);
	font-variant-numeric: tabular-nums;
}

.fng-adjust__form .fng-field input[type="text"] {
	max-width: 100%;
}

/* Not a .fng-field label: those are bold block labels for inputs above them,
   and this is a sentence sitting beside its checkbox. */
.fng-adjust__confirm {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--fng-ink);
	max-width: 62ch;
}

.fng-adjust__confirm input {
	width: auto;
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

.fng-adjust-history {
	margin: var(--fng-space-lg) 0 0;
	max-width: 42rem;
}

.fng-adjust-history__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.fng-adjust-history__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--fng-line);
	border-radius: var(--fng-radius-sm);
	background: var(--fng-surface);
}

.fng-adjust-history__amount {
	font-weight: 800;
	color: var(--fng-green-strong);
	font-variant-numeric: tabular-nums;
}

.fng-adjust-history__detail {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.fng-adjust-history__reason {
	overflow-wrap: anywhere;
}

.fng-adjust-history__meta {
	font-size: 0.85rem;
	color: var(--fng-muted);
}

.fng-adjust-history__undo {
	margin: 0;
}

@media (max-width: 640px) {
	.fng-adjust {
		padding: 1rem;
	}

	.fng-adjust__row {
		gap: 1rem;
	}

	.fng-adjust-history__item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.fng-adjust-history__undo {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* ==========================================================================
   M6.42 — Leaderboard: Filter by Location, and every employee on the board

   The toolbar sits above the table: what is shown on the left (location chips,
   one-click "Show everyone" / "Show only <my location>"), the Filter by Location
   trigger on the right, over the Available column. The drawer reuses the shared
   .fng-modal contract and only changes where the dialog sits.

   A manager looking at everyone sees their own people as a soft green wash
   fading across the row, with a thin accent on the rank — enough to find them
   in a long list without turning the board into two tables.
   ========================================================================== */
body.fng-score-page .fng-lbfilter {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: var(--fng-space-sm);
	margin: 0 0 var(--fng-space-sm);
}
body.fng-score-page .fng-lbfilter__state {
	display: flex; align-items: center; flex-wrap: wrap; gap: var(--fng-space-xs);
	min-width: 0;
}
body.fng-score-page .fng-lbfilter__open { margin-left: auto; }
body.fng-score-page .fng-lbfilter__open .fng-icon { color: var(--fng-muted); }
body.fng-score-page .fng-lbfilter__open.is-active { border-color: var(--fng-green); color: var(--fng-green-strong); background: var(--fng-green-soft); }
body.fng-score-page .fng-lbfilter__open.is-active .fng-icon { color: var(--fng-green-strong); }

body.fng-score-page .fng-lbfilter__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
body.fng-score-page .fng-lbfilter__chip {
	display: inline-flex; align-items: center; gap: 0.15rem;
	padding: 0.2rem 0.3rem 0.2rem 0.75rem; margin: 0;
	background: var(--fng-green-soft); border: 1px solid #cfe6d6; border-radius: var(--fng-radius-pill);
	color: var(--fng-green-strong); font-size: var(--fng-text-sm); font-weight: var(--fng-fw-med);
}
body.fng-score-page .fng-lbfilter__chip-x {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.5rem; height: 1.5rem; border-radius: 50%;
	color: inherit; text-decoration: none; font-size: 1.05rem; line-height: 1;
}
body.fng-score-page .fng-lbfilter__chip-x:hover { background: #d7ecdd; }
body.fng-score-page .fng-lbfilter__chip-x:focus-visible { outline: 3px solid var(--fng-blue); outline-offset: 1px; }
body.fng-score-page .fng-lbfilter__all { font-size: var(--fng-text-sm); font-weight: var(--fng-fw-med); color: var(--fng-blue); }
body.fng-score-page .fng-lbfilter__key {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: var(--fng-text-sm); color: var(--fng-muted);
}
body.fng-score-page .fng-lbfilter__swatch {
	width: 1.6rem; height: 0.95rem; border-radius: 3px;
	border: 1px solid #cfe6d6;
	background: linear-gradient(90deg, #dff0e5, var(--fng-green-soft) 55%, #f7fbf8);
	box-shadow: inset 3px 0 0 var(--fng-green);
}

/* The highlight. Painted on the row so the wash runs across every cell as one
   gradient rather than restarting in each. */
body.fng-score-page .fng-leaderboard__table tbody tr.fng-lb-row--home,
body.fng-score-page .fng-leaderboard__table tbody tr.fng-lb-row--home:hover {
	background: linear-gradient(90deg, #dff0e5 0%, var(--fng-green-soft) 55%, #f7fbf8 100%);
}
body.fng-score-page .fng-leaderboard__table tbody tr.fng-lb-row--home td:first-child { box-shadow: inset 3px 0 0 var(--fng-green); }
/* A cell that is its own stacking context repaints the row's gradient from its
   own left edge, which drew a seam after the Employee column. The name cell's
   z-index was for a tooltip it no longer carries; on these rows it goes. */
body.fng-score-page .fng-leaderboard__table tbody tr.fng-lb-row--home td { z-index: auto; }

/* Drawer: the shared dialog, docked to the right edge at full height. */
body.fng-score-page .fng-modal--drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
body.fng-score-page .fng-modal--drawer .fng-modal__dialog {
	display: flex; flex-direction: column;
	max-width: 24rem; height: 100%; max-height: none;
	padding: var(--fng-space-lg);
	/* No slide-in: an animation that is paused or throttled leaves the panel
	   stuck part-way off screen, and a filter panel must simply be there. */
	border-radius: 0;
}
/* Clear the WordPress admin bar when it is showing. */
body.admin-bar.fng-score-page .fng-modal--drawer { top: 32px; }
@media (max-width: 782px) { body.admin-bar.fng-score-page .fng-modal--drawer { top: 46px; } }

body.fng-score-page .fng-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fng-space-sm); }
body.fng-score-page .fng-drawer__head .fng-modal__title { margin: 0; }
body.fng-score-page .fng-drawer__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	color: var(--fng-muted); text-decoration: none; font-size: 1.5rem; line-height: 1;
}
body.fng-score-page .fng-drawer__close:hover { background: var(--fng-bg); color: var(--fng-navy); }
body.fng-score-page .fng-drawer__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: var(--fng-space-md); }
body.fng-score-page .fng-drawer__search { margin: 0 0 var(--fng-space-xs); }
body.fng-score-page .fng-drawer__search input { width: 100%; }
body.fng-score-page .fng-drawer__bulk { display: flex; gap: var(--fng-space-xs); margin: 0 0 var(--fng-space-xs); }
body.fng-score-page .fng-drawer__bulk[hidden],
body.fng-score-page .fng-drawer__search[hidden],
body.fng-score-page .fng-drawer__option[hidden] { display: none; }
body.fng-score-page .fng-drawer__list {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	margin: 0 calc(-1 * var(--fng-space-xs)); padding: 0; border: 0;
}
body.fng-score-page .fng-drawer__option {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.65rem var(--fng-space-xs); margin: 0;
	border-radius: var(--fng-radius-sm); cursor: pointer;
	font-weight: var(--fng-fw-med); color: var(--fng-ink);
}
body.fng-score-page .fng-drawer__option:hover { background: var(--fng-bg); }
body.fng-score-page .fng-drawer__option input { width: 1.1rem; height: 1.1rem; margin: 0; flex: 0 0 auto; accent-color: var(--fng-green); }
body.fng-score-page .fng-drawer__option-name { flex: 1 1 auto; min-width: 0; }
body.fng-score-page .fng-drawer__option-tag {
	margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: var(--fng-radius-pill);
	background: var(--fng-green-soft); color: var(--fng-green-strong);
	font-size: var(--fng-text-2xs); font-weight: var(--fng-fw-bold); vertical-align: 1px;
}
body.fng-score-page .fng-drawer__option-count { color: var(--fng-muted); font-size: var(--fng-text-sm); font-variant-numeric: tabular-nums; }
body.fng-score-page .fng-drawer__actions {
	margin-top: var(--fng-space-md); padding-top: var(--fng-space-md);
	border-top: 1px solid var(--fng-line);
}

@media (max-width: 768px) {
	/* Cards: the wash reads across the card the same way it reads across a row. */
	body.fng-score-page .fng-leaderboard__table tbody tr.fng-lb-row--home { border-color: #cfe6d6; box-shadow: inset 3px 0 0 var(--fng-green), var(--fng-shadow); }
	body.fng-score-page .fng-leaderboard__table tbody tr.fng-lb-row--home td:first-child { box-shadow: none; }
}
@media (max-width: 480px) {
	body.fng-score-page .fng-lbfilter__open { width: 100%; }
	body.fng-score-page .fng-modal--drawer { padding: 0; padding-top: 0; }
	body.fng-score-page .fng-modal--drawer .fng-modal__dialog { max-width: none; padding: var(--fng-space-md); }
	body.fng-score-page .fng-modal--drawer .fng-modal__actions { flex-direction: row; }
	body.fng-score-page .fng-modal--drawer .fng-modal__actions .fng-btn { flex: 1 1 0; width: auto; }
}