/* PracticePilot — My Practice Attempts (v0.57.0 premium redesign).
   Shares the v0.56.0 My Weak Areas design tokens (navy/indigo hero, 20px card
   radius, soft shadow, stat tiles, pills, ring + inline-SVG chart styles),
   copied here and scoped to this page's root — no global stylesheet.
   Theme isolation follows the v0.49.3 two-tier pattern:
   TIER 1 — every rule is scoped under the #ppilot-history-root ID
            (specificity 1,x,x), beating a theme's bare element and
            ".entry-content X" rules regardless of source order.
   TIER 2 — every text-bearing element sets its own color, decoration,
            font-family and margin; the only !important declarations are
            scoped to this root's links/buttons to neutralise a theme's own
            `!important` hover fade.
   Mobile-first. Container queries lay out the attempt rows by the width
   of the list card itself (works whether the aside is beside or below). */

/* v0.57.3 hotfix: this theme-title-collapse block was missing entirely —
   every other redesigned page (weak-areas.css, mistake-book.css,
   adaptive-practice.css, analytics.css, profile.css) collapses the host
   theme's own duplicate page-title markup via its page-specific body
   class (wired in Plugin.php::maybe_add_dashboard_body_class()), but
   history.css never had the matching rule. The body class Plugin.php
   actually adds for this page is `ppilot-attempts-page` (NOT
   `ppilot-history-page`), so this selector matches that exact class. */
body.ppilot-attempts-page .entry-header,
body.ppilot-attempts-page .entry-title,
body.ppilot-attempts-page h1.entry-title,
body.ppilot-attempts-page .page-title,
body.ppilot-attempts-page .wp-block-post-title,
body.ppilot-attempts-page .elementor-widget-theme-page-title {
	display: none !important;
}

#ppilot-history-root {
	--ppah-navy: #0b1f45;
	--ppah-navy-2: #16306a;
	--ppah-royal: #2547d0;
	--ppah-purple: #6d3fd8;
	--ppah-cyan: #0e7490;
	--ppah-green: #0f7a55;
	--ppah-amber: #a14a06;
	--ppah-red: #b42318;
	--ppah-rose: #be123c;
	--ppah-ink: #0f172a;
	--ppah-body: #334155;
	--ppah-muted: #4b5565;
	--ppah-line: #e3e8f2;
	--ppah-bg: #f4f6fb;
	--ppah-card: #ffffff;
	--ppah-radius: 20px;
	--ppah-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
	--ppah-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	display: block;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto 32px;
	padding: 0;
	font-family: var(--ppah-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ppah-body);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
#ppilot-history-root *,
#ppilot-history-root *::before,
#ppilot-history-root *::after { box-sizing: border-box; }

/* ---- TIER 2 baseline ---- */
#ppilot-history-root div,
#ppilot-history-root section,
#ppilot-history-root aside,
#ppilot-history-root nav,
#ppilot-history-root figure,
#ppilot-history-root fieldset { line-height: inherit; margin: 0; padding: 0; border: 0; font-family: var(--ppah-font); min-width: 0; }
#ppilot-history-root h1,
#ppilot-history-root h2,
#ppilot-history-root h3 {
	font-family: var(--ppah-font); color: var(--ppah-ink); margin: 0; padding: 0; border: 0;
	text-decoration: none; text-transform: none; letter-spacing: -.01em; line-height: 1.25; font-weight: 700; background: none;
}
#ppilot-history-root h1::before, #ppilot-history-root h1::after,
#ppilot-history-root h2::before, #ppilot-history-root h2::after,
#ppilot-history-root h3::before, #ppilot-history-root h3::after { content: none; display: none; }
#ppilot-history-root p,
#ppilot-history-root span,
#ppilot-history-root li,
#ppilot-history-root strong,
#ppilot-history-root small,
#ppilot-history-root label,
#ppilot-history-root legend,
#ppilot-history-root dt,
#ppilot-history-root dd,
#ppilot-history-root th,
#ppilot-history-root td,
#ppilot-history-root caption,
#ppilot-history-root figcaption {
	font-family: var(--ppah-font); color: inherit; margin: 0; padding: 0; text-decoration: none; text-transform: none; letter-spacing: normal; line-height: inherit; font-size: inherit; background: none; border: 0; float: none;
}
#ppilot-history-root ul,
#ppilot-history-root ol,
#ppilot-history-root dl { list-style: none; margin: 0; padding: 0; }
#ppilot-history-root li { margin: 0; line-height: inherit; }
#ppilot-history-root li::before,
#ppilot-history-root li::marker { content: none; color: transparent; }
#ppilot-history-root a,
#ppilot-history-root a:visited,
#ppilot-history-root a:hover,
#ppilot-history-root a:focus,
#ppilot-history-root a:active {
	text-decoration: none; border-bottom: 0; box-shadow: none; font-family: var(--ppah-font);
	opacity: 1 !important; filter: none !important;
}
#ppilot-history-root button,
#ppilot-history-root button:hover,
#ppilot-history-root button:focus {
	font-family: var(--ppah-font); text-transform: none; letter-spacing: normal; box-shadow: none; text-shadow: none;
	opacity: 1 !important; filter: none !important;
}
#ppilot-history-root svg { display: inline-block; vertical-align: middle; max-width: 100%; overflow: visible; }
#ppilot-history-root .ppah-icon { width: 20px; height: 20px; flex: 0 0 auto; }
#ppilot-history-root :focus { outline: none; }
#ppilot-history-root :focus-visible { outline: 3px solid #2547d0; outline-offset: 2px; }
#ppilot-history-root .ppah-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- HERO ---- */
#ppilot-history-root .ppah-hero {
	position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px;
	padding: 22px 20px; margin: 0 0 16px; border-radius: var(--ppah-radius);
	background: radial-gradient(120% 140% at 100% 0%, #3b2a8c 0%, rgba(59, 42, 140, 0) 55%), linear-gradient(135deg, #0b1f45 0%, #16306a 60%, #1d3f7a 100%);
	color: #ffffff;
}
/* v0.57.1 hotfix (live-screenshot report): this page's backend
   (AttemptHistoryOverviewService::resolve_attempts_hero_image(), v0.57.0)
   has always resolved a real hero photo, but until now there was no CSS
   rule here to paint it with ANY overlay once history.js's own wiring gap
   (fixed alongside this) applied it — a real photo would have rendered
   completely raw behind white text. Mirrors the exact overlay treatment
   (stops/floor) and text-shadow already fixed on the other hero pages,
   itself matching the proven Dashboard hero (command-center.css
   .ppilot-cc-hero). */
#ppilot-history-root .ppah-hero--image {
	background-color: #0b1f45;
	/* v0.57.2 hotfix: verbatim Dashboard hero gradient (command-center.css
	   .ppilot-cc-hero, owner-confirmed correct), replacing the v0.57.1
	   page-specific alpha tune that still looked washed out live. */
	background-image: linear-gradient(90deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.72) 45%, rgba(11, 31, 69, 0.6) 72%, rgba(11, 31, 69, 0.28) 100%), var(--ppah-hero-mobile, none);
	background-size: cover; background-position: center right;
}
#ppilot-history-root .ppah-hero--image .ppah-hero-art { visibility: hidden; }
#ppilot-history-root .ppah-hero-main { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
#ppilot-history-root .ppah-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #e0e7ff; }
#ppilot-history-root .ppah-hero-eyebrow .ppah-icon { width: 16px; height: 16px; color: #fbbf24; }
#ppilot-history-root .ppah-hero-eyebrow-text { color: #e0e7ff !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
/* v0.57.3 hotfix: same !important hardening as weak-areas.css — mirrors
   command-center.css's proven .ppilot-cc-hero-greeting-prefix pattern. */
#ppilot-history-root .ppah-hero-title { color: #ffffff !important; font-size: 26px; line-height: 1.15; font-weight: 800 !important; margin: 0 0 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35) !important; }
#ppilot-history-root .ppah-hero-sub { color: #dbe4ff !important; font-size: 15px; line-height: 1.55; margin: 0; max-width: 640px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3) !important; }
#ppilot-history-root .ppah-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
#ppilot-history-root .ppah-hero-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: #ffffff; }
#ppilot-history-root .ppah-hero-chip-value { color: #ffffff; font-size: 18px; font-weight: 800; line-height: 1.1; }
#ppilot-history-root .ppah-hero-chip-label { color: #dbe4ff; font-size: 13px; font-weight: 600; }
#ppilot-history-root .ppah-hero-art { display: none; position: relative; z-index: 1; flex: 0 0 auto; width: 140px; height: 140px; }
#ppilot-history-root .ppah-hero-svg { width: 100%; height: 100%; }

/* ---- STATS ---- */
#ppilot-history-root .ppah-stats { margin: 0 0 16px; }
#ppilot-history-root .ppah-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#ppilot-history-root .ppah-stat {
	display: flex; align-items: flex-start; gap: 12px; padding: 14px; min-width: 0;
	background: var(--ppah-card); border: 1px solid var(--ppah-line); border-radius: 16px; box-shadow: var(--ppah-shadow); color: var(--ppah-body);
}
#ppilot-history-root .ppah-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; background: #eef2ff; color: var(--ppah-royal); }
#ppilot-history-root .ppah-stat-icon .ppah-icon { width: 22px; height: 22px; }
#ppilot-history-root .ppah-stat--red .ppah-stat-icon { background: #fef3f2; color: var(--ppah-red); }
#ppilot-history-root .ppah-stat--green .ppah-stat-icon { background: #e8f7ef; color: var(--ppah-green); }
#ppilot-history-root .ppah-stat--purple .ppah-stat-icon { background: #f5f1ff; color: var(--ppah-purple); }
#ppilot-history-root .ppah-stat--rose .ppah-stat-icon { background: #fff1f3; color: var(--ppah-rose); }
#ppilot-history-root .ppah-stat--blue .ppah-stat-icon { background: #eef4ff; color: var(--ppah-royal); }
#ppilot-history-root .ppah-stat--amber .ppah-stat-icon { background: #fff8eb; color: var(--ppah-amber); }
#ppilot-history-root .ppah-stat-body { min-width: 0; flex: 1 1 auto; }
#ppilot-history-root .ppah-stat-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
#ppilot-history-root .ppah-stat-value { color: var(--ppah-ink); font-size: 22px; font-weight: 800; line-height: 1.15; }
#ppilot-history-root .ppah-stat--na .ppah-stat-value { color: var(--ppah-muted); }
#ppilot-history-root .ppah-stat-label { color: var(--ppah-ink); font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-top: 2px; }
#ppilot-history-root .ppah-stat-caption { color: var(--ppah-muted); font-size: 12px; line-height: 1.35; margin-top: 2px; }
#ppilot-history-root .ppah-delta { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#ppilot-history-root .ppah-delta-text { color: inherit; }
#ppilot-history-root .ppah-delta--up { background: #e8f7ef; color: var(--ppah-green); }
#ppilot-history-root .ppah-delta--down { background: #fef3f2; color: var(--ppah-red); }
#ppilot-history-root .ppah-delta--flat { background: #eef2f7; color: var(--ppah-body); }

/* ---- LAYOUT + CARDS ---- */
#ppilot-history-root .ppah-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
#ppilot-history-root .ppah-main, #ppilot-history-root .ppah-aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#ppilot-history-root .ppah-card {
	background: var(--ppah-card); border: 1px solid var(--ppah-line); border-radius: var(--ppah-radius);
	box-shadow: var(--ppah-shadow); padding: 16px; min-width: 0; color: var(--ppah-body);
}
#ppilot-history-root .ppah-card-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
#ppilot-history-root .ppah-card-head--split { flex-wrap: wrap; }
#ppilot-history-root .ppah-card-head--split .ppah-card-titles { flex: 1 1 160px; }
#ppilot-history-root .ppah-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #eef2ff; color: var(--ppah-royal); flex: 0 0 auto; }
#ppilot-history-root .ppah-card-icon--indigo { background: #eef2ff; color: #4338ca; }
#ppilot-history-root .ppah-card-icon--purple { background: #f5f1ff; color: var(--ppah-purple); }
#ppilot-history-root .ppah-card-icon--amber { background: #fff8eb; color: var(--ppah-amber); }
#ppilot-history-root .ppah-card-titles { min-width: 0; }
#ppilot-history-root .ppah-card-title { color: var(--ppah-ink); font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0; }
#ppilot-history-root .ppah-card-title:focus-visible { outline-offset: 4px; }
#ppilot-history-root .ppah-card-sub { color: var(--ppah-muted); font-size: 13px; line-height: 1.45; margin: 2px 0 0; }
#ppilot-history-root .ppah-card-sub--below { margin: -6px 0 12px; }

/* ---- BUTTONS ---- */
#ppilot-history-root .ppah-btn,
#ppilot-history-root .ppah-btn:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
	border-radius: 12px; border: 1px solid transparent; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
	white-space: nowrap; text-decoration: none; text-transform: none; background: #eef2ff; color: var(--ppah-royal); margin: 0; width: auto; height: auto;
	transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
#ppilot-history-root .ppah-btn .ppah-btn-text { color: inherit; font-weight: 700; }
#ppilot-history-root .ppah-btn .ppah-icon { width: 18px; height: 18px; }
#ppilot-history-root .ppah-btn--primary,
#ppilot-history-root .ppah-btn--primary:visited,
#ppilot-history-root .ppah-btn--primary:hover,
#ppilot-history-root .ppah-btn--primary:focus { background: #2f40cd linear-gradient(135deg, #2547d0, #4338ca); color: #ffffff; border-color: transparent; }
#ppilot-history-root .ppah-btn--primary:hover { background: #2935ab linear-gradient(135deg, #1e3bb3, #3730a3); transform: translateY(-1px); }
#ppilot-history-root .ppah-btn--ghost,
#ppilot-history-root .ppah-btn--ghost:visited,
#ppilot-history-root .ppah-btn--ghost:hover,
#ppilot-history-root .ppah-btn--ghost:focus { background: #ffffff; color: var(--ppah-navy); border-color: #cdd6e8; }
#ppilot-history-root .ppah-btn--ghost:hover { border-color: #9fb0d6; background: #f7f9ff; }
#ppilot-history-root .ppah-btn--sm { min-height: 40px; padding: 8px 12px; font-size: 13px; }
#ppilot-history-root .ppah-btn[disabled] { cursor: not-allowed; background: #e9edf5; color: #4b5565; border-color: #d5dbe7; transform: none; }
#ppilot-history-root .ppah-export-host { flex: 0 0 auto; }
#ppilot-history-root .ppah-export-note { color: var(--ppah-green); font-size: 13px; font-weight: 600; margin: -6px 0 10px; }
#ppilot-history-root .ppah-export-note:empty { display: none; }
#ppilot-history-root .ppah-export-note--error { color: var(--ppah-red); }

/* ---- TOOLBAR ---- */
#ppilot-history-root .ppah-toolbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 12px; background: var(--ppah-bg); border: 1px solid var(--ppah-line); border-radius: 16px; }
#ppilot-history-root .ppah-toolbar-top { display: flex; align-items: flex-end; gap: 10px; }
#ppilot-history-root .ppah-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#ppilot-history-root .ppah-field--search { flex: 1 1 auto; }
#ppilot-history-root .ppah-label { color: var(--ppah-body); font-size: 12.5px; font-weight: 700; line-height: 1.3; padding: 0; }
#ppilot-history-root .ppah-search-wrap { position: relative; }
#ppilot-history-root .ppah-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ppah-muted); pointer-events: none; }
#ppilot-history-root .ppah-input,
#ppilot-history-root .ppah-select,
#ppilot-history-root .ppah-input:focus,
#ppilot-history-root .ppah-select:focus {
	display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 12px;
	border: 1px solid #cdd6e8; border-radius: 12px; background-color: #ffffff; color: var(--ppah-ink);
	font-family: var(--ppah-font); font-size: 15px; line-height: 1.2; box-shadow: none; text-transform: none; max-width: 100%;
	-webkit-appearance: none; appearance: none;
}
#ppilot-history-root .ppah-input[type="search"] { padding-left: 38px; }
#ppilot-history-root .ppah-input--date { padding: 0 10px; font-size: 14px; }
#ppilot-history-root .ppah-select { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, #4b5565 50%), linear-gradient(135deg, #4b5565 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
#ppilot-history-root .ppah-input:focus-visible,
#ppilot-history-root .ppah-select:focus-visible { outline: 3px solid #2547d0; outline-offset: 1px; border-color: #2547d0; background-color: #ffffff; color: var(--ppah-ink); }
#ppilot-history-root .ppah-filter-toggle { flex: 0 0 auto; }
#ppilot-history-root .ppah-filter-count { color: inherit; font-weight: 700; }
#ppilot-history-root .ppah-filter-count:empty { display: none; }
#ppilot-history-root .ppah-filter-fields { display: none; grid-template-columns: 1fr; gap: 10px; }
#ppilot-history-root .ppah-filter-fields--open { display: grid; }
#ppilot-history-root .ppah-daterange-row { display: flex; align-items: center; gap: 6px; }
#ppilot-history-root .ppah-daterange-row .ppah-input { flex: 1 1 0; min-width: 0; }
#ppilot-history-root .ppah-daterange-sep { color: var(--ppah-muted); display: inline-flex; }
#ppilot-history-root .ppah-daterange-sep .ppah-icon { width: 16px; height: 16px; }
#ppilot-history-root .ppah-field--clear { justify-content: flex-end; }
#ppilot-history-root .ppah-clear[hidden] { display: none; }

/* ---- ATTEMPT ROWS ---- */
#ppilot-history-root .ppah-list-host { container-type: inline-size; }
#ppilot-history-root .ppah-list-host[aria-busy="true"] .ppah-rows { opacity: .55; }
#ppilot-history-root .ppah-rows { display: flex; flex-direction: column; gap: 10px; transition: opacity .15s ease; }
#ppilot-history-root .ppah-row { border: 1px solid var(--ppah-line); border-radius: 16px; background: #ffffff; padding: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
#ppilot-history-root .ppah-row:hover { border-color: #c7d2ea; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
#ppilot-history-root .ppah-row-grid {
	display: grid; gap: 10px 12px; align-items: center;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-areas: "icon info" "score metrics" "actions actions";
}
#ppilot-history-root .ppah-type-icon { grid-area: icon; align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #eef2ff; color: var(--ppah-royal); }
#ppilot-history-root .ppah-type-icon .ppah-icon { width: 22px; height: 22px; }
#ppilot-history-root .ppah-type-icon--red { background: #fef3f2; color: var(--ppah-red); }
#ppilot-history-root .ppah-type-icon--green { background: #e8f7ef; color: var(--ppah-green); }
#ppilot-history-root .ppah-type-icon--purple { background: #f5f1ff; color: var(--ppah-purple); }
#ppilot-history-root .ppah-type-icon--cyan { background: #ecfeff; color: var(--ppah-cyan); }
#ppilot-history-root .ppah-type-icon--slate { background: #eef2f7; color: var(--ppah-body); }
#ppilot-history-root .ppah-row-info { grid-area: info; min-width: 0; }
#ppilot-history-root .ppah-row-title { color: var(--ppah-ink); font-size: 15.5px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
#ppilot-history-root .ppah-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#ppilot-history-root .ppah-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 9px; border-radius: 999px; background: #f1f4f9; color: var(--ppah-body); font-size: 12px; font-weight: 600; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ppilot-history-root .ppah-chip--blue { background: #eaf0ff; color: #1d3fbf; }
#ppilot-history-root .ppah-chip--green { background: #e8f7ef; color: var(--ppah-green); }
#ppilot-history-root .ppah-chip--purple { background: #f3eefe; color: #5b32c2; }
#ppilot-history-root .ppah-chip--red { background: #fef3f2; color: var(--ppah-red); }
#ppilot-history-root .ppah-chip--cyan { background: #ecfeff; color: var(--ppah-cyan); }
#ppilot-history-root .ppah-chip--soft { background: #ffffff; color: var(--ppah-muted); border: 1px solid var(--ppah-line); }
#ppilot-history-root .ppah-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; color: var(--ppah-muted); font-size: 12.5px; line-height: 1.4; }
#ppilot-history-root .ppah-row-meta-icon { width: 15px; height: 15px; color: var(--ppah-muted); }
#ppilot-history-root .ppah-row-meta-text { color: var(--ppah-muted); }
#ppilot-history-root .ppah-row-exam { overflow-wrap: anywhere; }
#ppilot-history-root .ppah-dot { color: #94a3b8; }
#ppilot-history-root .ppah-row-score { grid-area: score; display: flex; justify-content: center; }
#ppilot-history-root .ppah-ring { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
#ppilot-history-root .ppah-ring-svg { width: 100%; height: 100%; }
#ppilot-history-root .ppah-ring-track { stroke: #e9edf6; }
#ppilot-history-root .ppah-ring-arc { stroke: var(--ppah-royal); transition: stroke-dasharray .6s ease; }
#ppilot-history-root .ppah-ring--high .ppah-ring-arc { stroke: #16a34a; }
#ppilot-history-root .ppah-ring--mid .ppah-ring-arc { stroke: #d97706; }
#ppilot-history-root .ppah-ring--low .ppah-ring-arc { stroke: #dc2626; }
#ppilot-history-root .ppah-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ppah-ink); font-size: 13px; font-weight: 800; }
#ppilot-history-root .ppah-ring--low .ppah-ring-value { color: var(--ppah-red); }
#ppilot-history-root .ppah-ring--na .ppah-ring-value { color: var(--ppah-muted); }
#ppilot-history-root .ppah-row-metrics { grid-area: metrics; min-width: 0; }
#ppilot-history-root .ppah-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
#ppilot-history-root .ppah-metric { display: flex; flex-direction: column-reverse; min-width: 0; }
#ppilot-history-root .ppah-metric-label { color: var(--ppah-muted); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
#ppilot-history-root .ppah-metric-label { white-space: nowrap; }
#ppilot-history-root .ppah-metric-value { color: var(--ppah-ink); font-size: 14.5px; font-weight: 750; line-height: 1.3; white-space: nowrap; }
#ppilot-history-root .ppah-metric--green .ppah-metric-value { color: var(--ppah-green); }
#ppilot-history-root .ppah-metric--red .ppah-metric-value { color: var(--ppah-red); }
#ppilot-history-root .ppah-metrics-note { color: var(--ppah-muted); font-size: 13px; line-height: 1.45; }
#ppilot-history-root .ppah-row-actions { grid-area: actions; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#ppilot-history-root .ppah-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
#ppilot-history-root .ppah-pill-text { color: inherit; text-transform: uppercase; letter-spacing: .04em; }
#ppilot-history-root .ppah-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
#ppilot-history-root .ppah-pill--done { background: #e8f7ef; color: var(--ppah-green); }
#ppilot-history-root .ppah-pill--progress { background: #fff4d6; color: #7a3d00; }
#ppilot-history-root .ppah-cta { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
#ppilot-history-root .ppah-inline-result { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ppah-line); }

/* Pagination footer */
#ppilot-history-root .ppah-list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
#ppilot-history-root .ppah-showing { color: var(--ppah-body); font-size: 13.5px; font-weight: 600; }
#ppilot-history-root .ppah-pager-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#ppilot-history-root .ppah-page,
#ppilot-history-root .ppah-page:hover,
#ppilot-history-root .ppah-page:focus {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; min-height: 40px; padding: 0 10px; margin: 0;
	border-radius: 10px; border: 1px solid #cdd6e8; background: #ffffff; color: var(--ppah-navy); font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1;
}
#ppilot-history-root .ppah-page-text { color: inherit; }
#ppilot-history-root .ppah-page:hover { border-color: #9fb0d6; }
#ppilot-history-root .ppah-page--current,
#ppilot-history-root .ppah-page--current:hover,
#ppilot-history-root .ppah-page--current:focus { background: var(--ppah-navy); border-color: var(--ppah-navy); color: #ffffff; }
#ppilot-history-root .ppah-page[disabled] { cursor: not-allowed; color: #4b5565; background: #f1f4f9; border-color: #dfe5f0; }
#ppilot-history-root .ppah-page .ppah-icon { width: 18px; height: 18px; }
#ppilot-history-root .ppah-page-gap { color: var(--ppah-muted); padding: 0 2px; }
#ppilot-history-root .ppah-perpage { display: flex; align-items: center; gap: 8px; }
#ppilot-history-root .ppah-perpage-label { color: var(--ppah-body); font-size: 13.5px; font-weight: 600; }
#ppilot-history-root .ppah-perpage .ppah-select { width: 84px; }

/* ---- TREND ---- */
#ppilot-history-root .ppah-trend-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: -4px 0 10px; }
#ppilot-history-root .ppah-range .ppah-select { width: auto; min-width: 148px; font-size: 14px; }
#ppilot-history-root .ppah-card-link,
#ppilot-history-root .ppah-card-link:visited,
#ppilot-history-root .ppah-card-link:hover,
#ppilot-history-root .ppah-card-link:focus { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 8px; color: var(--ppah-royal); font-size: 13.5px; font-weight: 700; }
#ppilot-history-root .ppah-card-link-text { color: var(--ppah-royal); }
#ppilot-history-root .ppah-card-link .ppah-icon { width: 16px; height: 16px; }
#ppilot-history-root .ppah-trend[aria-busy="true"] .ppah-chart { opacity: .55; }
#ppilot-history-root .ppah-chart { margin: 0; }
#ppilot-history-root .ppah-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
#ppilot-history-root .ppah-legend-item { display: inline-flex; align-items: center; gap: 6px; }
#ppilot-history-root .ppah-legend-text { color: var(--ppah-body); font-size: 12.5px; font-weight: 600; }
#ppilot-history-root .ppah-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
#ppilot-history-root .ppah-swatch--acc { background: #2547d0; }
#ppilot-history-root .ppah-swatch--score { background: #a21caf; }
#ppilot-history-root .ppah-chart-svg { display: block; width: 100%; height: auto; }
#ppilot-history-root .ppah-grid { stroke: #e6eaf4; stroke-width: 1; }
#ppilot-history-root .ppah-axis { fill: #4b5565; font-size: 11px; font-family: var(--ppah-font); }
#ppilot-history-root .ppah-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
#ppilot-history-root .ppah-line--acc { stroke: #2547d0; }
#ppilot-history-root .ppah-line--score { stroke: #a21caf; stroke-dasharray: 6 4; }
#ppilot-history-root .ppah-dotp { fill: #ffffff; stroke-width: 2.5; }
#ppilot-history-root .ppah-dotp.ppah-line--acc { stroke: #2547d0; }
#ppilot-history-root .ppah-dotp.ppah-line--score { stroke: #a21caf; stroke-dasharray: none; }
#ppilot-history-root .ppah-chart-caption { color: var(--ppah-muted); font-size: 12.5px; line-height: 1.45; margin: 8px 0 0; }

/* ---- SUBJECT BARS ---- */
#ppilot-history-root .ppah-bars { display: flex; flex-direction: column; gap: 10px; }
#ppilot-history-root .ppah-bar { display: grid; grid-template-columns: minmax(0, 1fr) 52px; grid-template-areas: "name value" "track track"; gap: 4px 10px; align-items: center; }
#ppilot-history-root .ppah-bar-name { grid-area: name; color: var(--ppah-ink); font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ppilot-history-root .ppah-bar-track { grid-area: track; display: block; height: 9px; border-radius: 999px; background: #e9edf6; overflow: hidden; }
#ppilot-history-root .ppah-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2547d0, #6d3fd8); }
#ppilot-history-root .ppah-bar--low .ppah-bar-fill { background: linear-gradient(90deg, #ef4444, #f97316); }
#ppilot-history-root .ppah-bar--high .ppah-bar-fill { background: linear-gradient(90deg, #10b981, #16a34a); }
#ppilot-history-root .ppah-bar-value { grid-area: value; color: var(--ppah-ink); font-size: 13.5px; font-weight: 800; text-align: right; }

/* ---- INSIGHTS ---- */
#ppilot-history-root .ppah-insights { display: grid; grid-template-columns: 1fr; gap: 10px; }
#ppilot-history-root .ppah-insight { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid transparent; min-width: 0; }
#ppilot-history-root .ppah-insight-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #ffffff; flex: 0 0 auto; }
#ppilot-history-root .ppah-insight-icon .ppah-icon { width: 18px; height: 18px; }
#ppilot-history-root .ppah-insight-body { min-width: 0; }
#ppilot-history-root .ppah-insight-title { color: var(--ppah-ink); font-size: 14px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
#ppilot-history-root .ppah-insight-text { color: var(--ppah-body); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
#ppilot-history-root .ppah-insight--red { background: #fef3f2; border-color: #fde2df; }
#ppilot-history-root .ppah-insight--red .ppah-insight-icon { color: var(--ppah-red); }
#ppilot-history-root .ppah-insight--amber { background: #fff8eb; border-color: #fdebc8; }
#ppilot-history-root .ppah-insight--amber .ppah-insight-icon { color: var(--ppah-amber); }
#ppilot-history-root .ppah-insight--green { background: #ecfaf2; border-color: #cdeedb; }
#ppilot-history-root .ppah-insight--green .ppah-insight-icon { color: var(--ppah-green); }
#ppilot-history-root .ppah-insight--blue { background: #eef4ff; border-color: #dbe6fe; }
#ppilot-history-root .ppah-insight--blue .ppah-insight-icon { color: var(--ppah-royal); }
#ppilot-history-root .ppah-insight--purple { background: #f5f1ff; border-color: #e7ddfe; }
#ppilot-history-root .ppah-insight--purple .ppah-insight-icon { color: var(--ppah-purple); }
#ppilot-history-root .ppah-insight-action,
#ppilot-history-root .ppah-insight-action:visited,
#ppilot-history-root .ppah-insight-action:hover,
#ppilot-history-root .ppah-insight-action:focus {
	display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: 2px 0 0; padding: 0; border: 0; background: none;
	color: var(--ppah-royal); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
}
#ppilot-history-root .ppah-insight-action-text { color: var(--ppah-royal); }
#ppilot-history-root .ppah-insight-action .ppah-icon { width: 16px; height: 16px; }

/* ---- EMPTY / LOADING / ERROR ---- */
#ppilot-history-root .ppah-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 16px; border-radius: 14px; background: var(--ppah-bg); }
#ppilot-history-root .ppah-empty--compact { padding: 18px 12px; }
#ppilot-history-root .ppah-empty--onboard { padding: 40px 16px; background: #ffffff; border: 1px dashed #cdd6e8; }
#ppilot-history-root .ppah-empty-icon { width: 40px; height: 40px; color: var(--ppah-royal); margin-bottom: 4px; }
#ppilot-history-root .ppah-empty-title { color: var(--ppah-ink); font-size: 16px; font-weight: 750; line-height: 1.35; }
#ppilot-history-root .ppah-empty-text { color: var(--ppah-muted); font-size: 14px; line-height: 1.55; max-width: 460px; }
#ppilot-history-root .ppah-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
#ppilot-history-root .ppah-empty .ppah-btn { margin-top: 6px; }
#ppilot-history-root .ppah-loading,
#ppilot-history-root .ppah-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; border-radius: var(--ppah-radius); background: var(--ppah-card); border: 1px solid var(--ppah-line); text-align: center; }
#ppilot-history-root .ppah-loading--inline { padding: 32px 16px; border: 0; }
#ppilot-history-root .ppah-loading-text { color: var(--ppah-body); font-weight: 600; }
#ppilot-history-root .ppah-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #dbe2f0; border-top-color: var(--ppah-royal); animation: ppah-spin .8s linear infinite; }
@keyframes ppah-spin { to { transform: rotate(360deg); } }

/* ---- attempt-row layouts by LIST width (container queries) ---- */
@container (min-width: 560px) {
	#ppilot-history-root .ppah-row-grid {
		grid-template-columns: 44px 64px minmax(0, 1fr) auto;
		grid-template-areas: "icon info info info" ". score metrics actions";
	}
	#ppilot-history-root .ppah-metrics { grid-template-columns: repeat(4, minmax(0, auto)); gap: 4px 18px; }
	#ppilot-history-root .ppah-row-actions { flex-direction: column; align-items: flex-end; justify-content: center; }
}
@container (min-width: 860px) {
	#ppilot-history-root .ppah-row-grid {
		grid-template-columns: 44px minmax(0, 1fr) 66px minmax(0, 310px) 132px;
		grid-template-areas: "icon info score metrics actions";
	}
	#ppilot-history-root .ppah-row-score { padding-left: 12px; border-left: 1px solid var(--ppah-line); }
	#ppilot-history-root .ppah-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; }
	#ppilot-history-root .ppah-row-actions { align-items: stretch; }
	#ppilot-history-root .ppah-row-actions .ppah-pill { align-self: flex-end; }
}

/* ---- ≥ 600px ---- */
@media (min-width: 600px) {
	#ppilot-history-root .ppah-hero { padding: 28px; }
	#ppilot-history-root .ppah-hero-title { font-size: 30px; }
	#ppilot-history-root .ppah-hero-art { display: block; }
	/* v0.57.1 hotfix: same >=0.6 end-stop floor as the mobile/base rule above. */
	/* v0.57.2: same verbatim Dashboard gradient as the base rule above. */
	#ppilot-history-root .ppah-hero--image { background-image: linear-gradient(90deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.72) 45%, rgba(11, 31, 69, 0.6) 72%, rgba(11, 31, 69, 0.28) 100%), var(--ppah-hero-desktop, var(--ppah-hero-mobile, none)); }
	#ppilot-history-root .ppah-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#ppilot-history-root .ppah-card { padding: 20px; }
	#ppilot-history-root .ppah-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#ppilot-history-root .ppah-daterange { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 767px) {
	#ppilot-history-root .ppah-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ≥ 768px: filters always visible (no drawer) ---- */
@media (min-width: 768px) {
	#ppilot-history-root .ppah-filter-toggle { display: none; }
	#ppilot-history-root .ppah-filter-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#ppilot-history-root .ppah-daterange { grid-column: span 3; }
	#ppilot-history-root .ppah-field--clear { grid-column: span 1; }
	#ppilot-history-root .ppah-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	#ppilot-history-root .ppah-trend-host { grid-column: 1 / -1; }
	#ppilot-history-root .ppah-insights-card { grid-column: auto; }
}

/* ---- ≥ 1024px ---- */
@media (min-width: 1024px) {
	#ppilot-history-root .ppah-hero { padding: 32px 36px; }
	#ppilot-history-root .ppah-hero-title { font-size: 34px; }
	#ppilot-history-root .ppah-hero-art { width: 160px; height: 160px; margin-right: 12px; }
	#ppilot-history-root .ppah-filter-fields { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr) auto; align-items: end; }
	#ppilot-history-root .ppah-daterange { grid-column: auto; }
	#ppilot-history-root .ppah-field--clear { grid-column: auto; }
}

/* ---- ≥ 1280px: two-column page, six-up stats ---- */
@media (min-width: 1280px) {
	#ppilot-history-root .ppah-stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	#ppilot-history-root .ppah-layout { grid-template-columns: minmax(0, 1fr) 380px; }
	#ppilot-history-root .ppah-aside { display: flex; align-items: stretch; }
	#ppilot-history-root .ppah-filter-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#ppilot-history-root .ppah-daterange { grid-column: span 3; }
	#ppilot-history-root .ppah-field--clear { grid-column: span 1; }
	#ppilot-history-root .ppah-stat { padding: 14px 12px; gap: 10px; }
	#ppilot-history-root .ppah-stat-value { font-size: 21px; }
	#ppilot-history-root .ppah-aside .ppah-card-title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	#ppilot-history-root *,
	#ppilot-history-root *::before,
	#ppilot-history-root *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	#ppilot-history-root .ppah-btn--primary:hover { transform: none; }
}