/* ==========================================================================
   Dashboard theme — site-wide since 2026-09-15
   WEBSITE_THEME.md, "align with the dashboard dark theme". The tokens live in
   theme.json; this layer restates base.css's :root aliases (which resolve
   before any body-level override can reach them) and sweeps the components
   whose colours or shapes are hard-coded. Scoped under body.hdl-theme-dashboard,
   which functions.php now adds on every page, so removing that one class
   reverts the site.
   ========================================================================== */

/* 1. Tokens, and the theme's own variables mapped onto them ---------------- */
body.hdl-theme-dashboard {
	--hdl-bg: #1d1d1d;
	--hdl-surface: #2d2d2d;
	--hdl-card: #2e2e2e;
	--hdl-menu: #393939;
	--hdl-elevated: #4a4a4a;
	--hdl-border: #3a3a3a;
	--hdl-border-strong: #404040;
	--hdl-fill-1: rgba( 248, 248, 248, 0.07 );
	--hdl-fill-2: rgba( 248, 248, 248, 0.12 );
	--hdl-outline: rgba( 248, 248, 248, 0.2 );
	--hdl-outline-hover: rgba( 248, 248, 248, 0.33 );
	--hdl-text: #f8f8f8;
	--hdl-text-label: #fafcfc;
	--hdl-text-2: #dae0e4;
	--hdl-text-3: #b0b6ba;
	--hdl-text-muted: #8f8f8f;
	--hdl-text-faint: #7a7e83;
	--hdl-placeholder: #8a8a8a;
	--hdl-blue: #007bff;
	--hdl-blue-hover: #0069d9;
	--hdl-blue-light: #58aaff;
	--hdl-blue-tint: rgba( 0, 123, 255, 0.14 );
	--hdl-blue-ring: rgba( 0, 123, 255, 0.25 );
	--hdl-success: #28a745;
	--hdl-success-bright: #29d583;
	--hdl-violet: #6a3bff;
	--hdl-warning: #ffc107;
	--hdl-danger: #dc3545;
	--hdl-danger-light: #e97b86;
	--hdl-radius-control: 5px;
	--hdl-radius-card: 6px;
	--hdl-radius-pill: 999px;
	--hdl-shadow-menu: 0 16px 40px rgba( 0, 0, 0, 0.5 );
	--hdl-shadow-modal: 0 24px 60px rgba( 0, 0, 0, 0.6 );
	/* Satoshi, confirmed by the owner 2026-09-15. Written out, not var( --wp--preset--font-family--display ):
	   this same rule sets that preset to var( --hdl-font ), and the cycle made both invalid, so every
	   page fell back to the browser serif. */
	--hdl-font: Satoshi, system-ui, -apple-system, "Segoe UI", sans-serif;

	--wp--preset--color--base: var( --hdl-bg );
	--wp--preset--color--surface: var( --hdl-surface );
	--wp--preset--color--surface-card: var( --hdl-card );
	--wp--preset--color--contrast: var( --hdl-text );
	--wp--preset--color--body-text: var( --hdl-text-2 );
	--wp--preset--color--muted: var( --hdl-text-3 );
	--wp--preset--color--dim: var( --hdl-text-muted );
	--wp--preset--color--accent: var( --hdl-blue );
	--wp--preset--color--accent-hover: var( --hdl-blue-hover );
	--wp--preset--color--accent-bright: var( --hdl-blue-light );
	--wp--preset--color--accent-deep: var( --hdl-blue-hover );
	--wp--preset--color--teal: var( --hdl-blue-light );
	--wp--preset--color--teal-soft: var( --hdl-blue-light );
	--wp--preset--color--on-accent: #fff;
	--wp--preset--color--light-band: #f8f8f8;
	--wp--preset--font-family--display: var( --hdl-font );
	--wp--preset--font-family--sans: var( --hdl-font );

	--wp--custom--hairline: var( --hdl-border );
	--wp--custom--hairline-strong: var( --hdl-border-strong );
	--wp--custom--rule-dotted: var( --hdl-border );
	--wp--custom--wash--faint: rgba( 0, 123, 255, 0.07 );
	--wp--custom--wash--soft: rgba( 0, 123, 255, 0.1 );
	--wp--custom--wash--medium: var( --hdl-blue-tint );
	--wp--custom--wash--strong: var( --hdl-blue-tint );
	--wp--custom--wash--heavy: rgba( 0, 123, 255, 0.34 );
	--wp--custom--surface-raised: var( --hdl-card );
	--wp--custom--surface-deep: var( --hdl-bg );
	--wp--custom--surface-lift: var( --hdl-card );
	--wp--custom--surface-panel: var( --hdl-surface );
	--wp--custom--ink: var( --hdl-text );
	--wp--custom--slate: var( --hdl-text-3 );
	--wp--custom--slate-deep: var( --hdl-text-muted );
	--wp--custom--app--shell: var( --hdl-surface );
	--wp--custom--app--bar: var( --hdl-card );
	--wp--custom--app--side: var( --hdl-surface );
	--wp--custom--app--radius: var( --hdl-radius-card );
	--wp--custom--app--radius-control: var( --hdl-radius-control );
	--wp--custom--status--ok: var( --hdl-success-bright );
	--wp--custom--shadow--app: var( --hdl-shadow-modal );
	--wp--custom--shadow--button: none;
	--wp--custom--shadow--button-hover: none;
	--wp--custom--shadow--accent: none;
	--wp--custom--header-bar-height: 64px;
	--wp--custom--header-bar-height-compact: 60px;

	/*
	 * base.css declares these aliases on :root as var( --wp--preset-- … ).
	 * A custom property is resolved where it is declared, so :root has
	 * already turned each one into its green/Satoshi value and body only
	 * inherits the result — redefining the presets above does not reach
	 * them. Every alias is therefore restated here.
	 */
	--font-display: var( --hdl-font );
	--font-sans: var( --hdl-font );
	--accent-rgb: 0, 123, 255;
	--teal-rgb: 88, 170, 255;
	--mint: var( --hdl-blue );
	--mint-bright: var( --hdl-blue-light );
	--emerald: var( --hdl-blue );
	--emerald-deep: var( --hdl-blue-hover );
	--mint-soft: rgba( 0, 123, 255, 0.34 );
	--mint-wash: var( --hdl-blue-tint );
	--dark: var( --hdl-bg );
	--dark-2: var( --hdl-bg );
	--dark-3: var( --hdl-card );
	--paper: var( --hdl-card );
	--paper-2: var( --hdl-bg );
	--paper-3: var( --hdl-surface );
	--bg-raised: var( --hdl-card );
	--ink: var( --hdl-text );
	--ink-2: var( --hdl-text-2 );
	--slate: var( --hdl-text-3 );
	--slate-2: var( --hdl-text-muted );
	--on-dark: var( --hdl-text );
	--on-dark-mut: var( --hdl-text-3 );
	--line: var( --hdl-border );
	--line-2: var( --hdl-border );
	--on-dark-line: var( --hdl-border );
	--shadow-mint: none;

	background: var( --hdl-bg );
	color: var( --hdl-text-2 );
	line-height: 1.55;
}

html:has( body.hdl-theme-dashboard ) {
	background: var( --hdl-bg, #1d1d1d );
}

/* 2. Typography ----------------------------------------------------------- */
body.hdl-theme-dashboard :is( h1, h2, h3, h4, .sec-title, .hx-t, .h26 h1, .page-hero h1, .h-display, .cs-h1, .stmt, .stmt-dark ) {
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var( --hdl-text );
}

body.hdl-theme-dashboard :is( .rail h3, .starts h3, .bl-card h3 ) {
	font-weight: 600;
	font-size: clamp( 18px, 1.4vw, 20px );
}

body.hdl-theme-dashboard :is( p, .hx-sub, .sec-sub, .rail p, .starts p ) {
	color: var( --hdl-text-2 );
}

body.hdl-theme-dashboard :is( .bl-card p, .bl-meta, .rail .k, .promo span ) {
	color: var( --hdl-text-3 );
}

body.hdl-theme-dashboard .breadcrumbs {
	color: var( --hdl-text-muted );
}

/* Eyebrows: 11px 600 uppercase, faint. base.css forces these with !important. */
body.hdl-theme-dashboard :is( .eyebrow, .rail .n, .promo .lbl, .hx-scroll ) {
	font-family: var( --hdl-font ) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --hdl-text-faint ) !important;
}

/* 3. Buttons -------------------------------------------------------------- */
body.hdl-theme-dashboard .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var( --hdl-radius-control ) !important;
	font-family: var( --hdl-font );
	font-weight: 600;
	background: transparent;
	border: 1px solid var( --hdl-outline );
	color: var( --hdl-text ) !important;
	box-shadow: none !important;
}

body.hdl-theme-dashboard :is( .btn-lg, .btn-sm ) {
	padding: 0 18px;
}

body.hdl-theme-dashboard .btn:hover {
	background: var( --hdl-fill-1 );
	border-color: var( --hdl-outline-hover );
	color: var( --hdl-text ) !important;
}

body.hdl-theme-dashboard :is( .btn-primary, .btn-dark, .btn.btn-primary, .hx-cta .btn-primary ) {
	background: var( --hdl-blue );
	border-color: var( --hdl-blue );
	color: #fff !important;
}

body.hdl-theme-dashboard :is( .btn-primary, .btn-dark ):hover {
	background: var( --hdl-blue-hover );
	border-color: var( --hdl-blue-hover );
	color: #fff !important;
}

body.hdl-theme-dashboard .btn-link {
	min-height: 0;
	padding: 0;
	border: 0;
	color: var( --hdl-blue-light ) !important;
}

body.hdl-theme-dashboard .btn-link:hover {
	background: transparent;
	text-decoration: underline;
}

body.hdl-theme-dashboard :is( .btn, a, button ):focus-visible {
	outline: none;
	border-color: var( --hdl-blue );
	box-shadow: 0 0 0 3px var( --hdl-blue-ring ) !important;
}

/* 4. Header and navigation ------------------------------------------------ */
body.hdl-theme-dashboard .mh-ann {
	background: var( --hdl-surface );
	border-bottom: 1px solid var( --hdl-border );
}

body.hdl-theme-dashboard .mh-ann a {
	color: var( --hdl-blue-light );
}

body.hdl-theme-dashboard .mh-bar {
	background: var( --hdl-surface );
	border: 0;
	border-bottom: 1px solid var( --hdl-border );
}

body.hdl-theme-dashboard :is( .mh-tab, .mh-sub a, .mh-act .lang ) {
	color: var( --hdl-text-3 );
}

body.hdl-theme-dashboard :is( .mh-tab:hover, .mh-tab[ aria-expanded="true" ], .mh-sub a:hover ) {
	color: var( --hdl-text );
}

body.hdl-theme-dashboard .mh-sub a[ aria-current="page" ] {
	color: var( --hdl-text );
}

body.hdl-theme-dashboard .mh-tab .pm {
	background: var( --hdl-fill-1 );
	border-radius: var( --hdl-radius-control );
	color: var( --hdl-text-3 );
}

body.hdl-theme-dashboard .mh-tab[ aria-expanded="true" ] .pm {
	background: var( --hdl-blue-tint );
	color: var( --hdl-blue-light );
}

body.hdl-theme-dashboard .mh-cta {
	background: var( --hdl-blue );
	color: #fff !important;
	font-weight: 600;
}

body.hdl-theme-dashboard .mh-cta:hover {
	background: var( --hdl-blue-hover );
	color: #fff !important;
}

body.hdl-theme-dashboard .mh-burger {
	background: var( --hdl-fill-1 );
	border-left: 1px solid var( --hdl-border );
}

body.hdl-theme-dashboard :is( .mh-sheet, .mh-sub ) {
	background: var( --hdl-surface );
	border-color: var( --hdl-border );
}

body.hdl-theme-dashboard .mh-sheet {
	background: var( --hdl-menu );
	border-radius: 0 0 var( --hdl-radius-card ) var( --hdl-radius-card );
	box-shadow: var( --hdl-shadow-menu );
}

/* 5. Pills and badges ----------------------------------------------------- */
body.hdl-theme-dashboard :is( .hx-tag, .sec-chip ) {
	font-family: var( --hdl-font );
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var( --hdl-blue-tint );
	color: var( --hdl-blue-light );
	border-radius: var( --hdl-radius-pill );
}

body.hdl-theme-dashboard .hx-tag i {
	background: var( --hdl-success-bright );
	box-shadow: 0 0 0 3px rgba( 41, 213, 131, 0.25 );
}

/* 6. Sections: one ground, hairline dividers ------------------------------ */
body.hdl-theme-dashboard :is( .surface-2, .surface-forest, .hx, .lava ) {
	background: var( --hdl-bg );
}

body.hdl-theme-dashboard .surface-2 {
	border-top: 1px solid var( --hdl-border );
}

/* 7. Cards ---------------------------------------------------------------- */
body.hdl-theme-dashboard :is( .rail article, .duo-card, .bl-card, .promo a ) {
	background: var( --hdl-card );
	border: 1px solid transparent;
	border-radius: var( --hdl-radius-card );
	box-shadow: none;
}

body.hdl-theme-dashboard :is( .rail article, .duo-card, .bl-card, .promo a ):hover {
	background: var( --hdl-card );
	border-color: var( --hdl-fill-2 );
}

body.hdl-theme-dashboard .bl-media {
	background: var( --hdl-surface );
	border-radius: var( --hdl-radius-card ) var( --hdl-radius-card ) 0 0;
	overflow: hidden;
}

body.hdl-theme-dashboard .bl-cats {
	color: var( --hdl-blue-light );
}

body.hdl-theme-dashboard .duo-card i {
	background: var( --hdl-blue-light );
}

body.hdl-theme-dashboard :is( .rail-nav button, .promo .arw ) {
	background: var( --hdl-fill-1 );
	border: 1px solid var( --hdl-outline );
	border-radius: var( --hdl-radius-control );
}

body.hdl-theme-dashboard .rail-nav button:hover {
	background: var( --hdl-fill-2 );
	border-color: var( --hdl-outline-hover );
}

body.hdl-theme-dashboard .starts > div {
	border-color: var( --hdl-border );
}

body.hdl-theme-dashboard :is( .stmt-dark .hlb, .stmt-dark .sq, .stmt-dark .hlg, .bl-cap i, .bl-by i ) {
	background: var( --hdl-blue );
	color: #fff;
}

/* 8. Light sections: invert surfaces, keep the blue (section 5) ------------ */
body.hdl-theme-dashboard .claims {
	background: #f8f8f8;
	color: #1d1d1d;
}

body.hdl-theme-dashboard .claims li {
	color: #7a7e83;
	border-color: #e3e6e8;
}

body.hdl-theme-dashboard .claims li.on {
	color: #1d1d1d;
}

body.hdl-theme-dashboard .claims .ic {
	background: #e3e6e8;
	color: #7a7e83;
	border-radius: var( --hdl-radius-card );
}

body.hdl-theme-dashboard .claims li.on .ic {
	background: var( --hdl-blue );
	color: #fff;
}

/*
 * Scoped to the section, not bare .stmt: .stmt is a <p>, and the general text
 * rule above is :is( p, …, .rail p ) — :is() takes its most specific argument,
 * so that rule scored 0,2,2 and painted this statement #DAE0E4 on #F8F8F8.
 */
body.hdl-theme-dashboard :is( .st, .claims, .band ) .stmt {
	color: #1d1d1d;
}

body.hdl-theme-dashboard :is( .st, .claims, .band ) p:not( .stmt ) {
	color: #4a4a4a;
}

body.hdl-theme-dashboard .band {
	background: #f8f8f8;
	color: #1d1d1d;
	border-block: 1px solid #e3e6e8;
}

body.hdl-theme-dashboard :is( .band-h, .band .logo-word ) {
	color: #7a7e83;
}

body.hdl-theme-dashboard .band .logo-word:hover {
	color: #1d1d1d;
}

body.hdl-theme-dashboard .st {
	background: #f8f8f8;
	color: #1d1d1d;
}

body.hdl-theme-dashboard .st-chip {
	font-family: var( --hdl-font );
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: #e3e6e8;
	color: #1d1d1d;
	border-radius: var( --hdl-radius-pill );
}

body.hdl-theme-dashboard .st-foot .arw {
	color: #7a7e83;
}

body.hdl-theme-dashboard .st-ic {
	border-radius: var( --hdl-radius-control );
}

/* 9. Hero glow: blue + violet, a touch of green, slow ---------------------- */
body.hdl-theme-dashboard .lava {
	filter: none;
}

body.hdl-theme-dashboard .grain {
	opacity: 0.05;
}

body.hdl-theme-dashboard .blob-1 {
	background: radial-gradient( ellipse at 50% 60%, rgba( 0, 123, 255, 0.55 ), transparent 62% );
	filter: blur( 50px );
}

body.hdl-theme-dashboard .blob-2 {
	background: radial-gradient( ellipse, rgba( 106, 59, 255, 0.45 ), transparent 60% );
	filter: blur( 50px );
}

body.hdl-theme-dashboard .blob-3 {
	background: radial-gradient( ellipse, rgba( 0, 123, 255, 0.35 ), transparent 60% );
	filter: blur( 50px );
}

body.hdl-theme-dashboard .blob-4 {
	background: radial-gradient( ellipse, rgba( 41, 213, 131, 0.28 ), transparent 60% );
	filter: blur( 40px );
}

body.hdl-theme-dashboard .blob-5 {
	background: radial-gradient( ellipse, rgba( 106, 59, 255, 0.3 ), transparent 60% );
	filter: blur( 40px );
}

body.hdl-theme-dashboard :is( .blob-1, .blob-2, .blob-3, .blob-4, .blob-5 ) {
	animation-duration: 18s !important;
}

body.hdl-theme-dashboard .hx-scroll::after {
	background: linear-gradient( rgba( 88, 170, 255, 0.8 ), transparent );
}

/* One glow composition per page: the footer's lava stays dark. */
body.hdl-theme-dashboard :is( .ft-lava, .ft-bloom, .ft-bloom2 ) {
	display: none;
}

/* ==========================================================================
   Site-wide sweep: everything the home page did not exercise
   ========================================================================== */

/* 10. Hero backgrounds (rays on 73 pages, edge, space, wave/iso/pulse/rain) */
body.hdl-theme-dashboard :is( .ray-1, .ray-11 ) {
	--ray: rgba( 0, 123, 255, 0.55 );
}

body.hdl-theme-dashboard :is( .ray-2, .ray-10 ) {
	--ray: rgba( 0, 123, 255, 0.7 );
}

body.hdl-theme-dashboard :is( .ray-3, .ray-9 ) {
	--ray: rgba( 106, 59, 255, 0.7 );
}

body.hdl-theme-dashboard :is( .ray-4, .ray-5, .ray-7, .ray-8 ) {
	--ray: rgba( 88, 170, 255, 0.9 );
}

body.hdl-theme-dashboard .rays-field b {
	background: linear-gradient( 180deg, rgba( 0, 123, 255, 0 ) 0%, var( --ray, var( --hdl-blue ) ) 30%, rgba( 0, 123, 255, 0.12 ) 100% );
}

body.hdl-theme-dashboard .h26-edge {
	background:
		linear-gradient( 90deg, var( --hdl-blue ) 0%, rgba( 0, 123, 255, 0.55 ) 4%, rgba( 0, 123, 255, 0.14 ) 12%, transparent 24% ),
		linear-gradient( 270deg, var( --hdl-violet ) 0%, rgba( 106, 59, 255, 0.45 ) 4%, rgba( 106, 59, 255, 0.12 ) 12%, transparent 24% );
}

body.hdl-theme-dashboard .space .halo {
	background: radial-gradient( circle, rgba( 0, 123, 255, 0.34 ) 0%, rgba( 106, 59, 255, 0.12 ) 40%, transparent 66% );
}

body.hdl-theme-dashboard .space .disc {
	box-shadow: 0 0 0 1px rgba( 88, 170, 255, 0.5 ), 0 -10px 60px -12px rgba( 88, 170, 255, 0.7 ), 0 -46px 170px 6px rgba( 0, 123, 255, 0.42 );
}

body.hdl-theme-dashboard .space .disc::after {
	background: radial-gradient( 120% 30% at 50% 0%, rgba( 88, 170, 255, 0.4 ), rgba( 0, 123, 255, 0.12 ) 40%, transparent 62% );
}

body.hdl-theme-dashboard .hbg-wave .matrix {
	background-image: radial-gradient( rgba( 88, 170, 255, 0.5 ) 1.5px, transparent 1.6px );
}

body.hdl-theme-dashboard .hbg-pulse .ring {
	background: linear-gradient( 90deg, transparent, rgba( 88, 170, 255, 0.62 ) 18%, #dae0e4 50%, rgba( 88, 170, 255, 0.62 ) 82%, transparent );
}

body.hdl-theme-dashboard .hbg-wave .matrix.m2 {
	background-image: radial-gradient( rgba( 0, 123, 255, 0.85 ) 2px, transparent 2.1px );
}

body.hdl-theme-dashboard .hbg-wave .bloom {
	background: radial-gradient( 50% 100% at 50% 100%, rgba( 0, 123, 255, 0.5 ) 0%, rgba( 106, 59, 255, 0.14 ) 44%, transparent 74% );
}

body.hdl-theme-dashboard .hbg-iso .glow {
	background: radial-gradient( circle, rgba( 0, 123, 255, 0.26 ) 0%, transparent 62% );
}

body.hdl-theme-dashboard .hbg-iso .iso {
	background-image:
		repeating-linear-gradient( 30deg, rgba( 0, 123, 255, 0.22 ) 0 1px, transparent 1px 78px ),
		repeating-linear-gradient( -30deg, rgba( 0, 123, 255, 0.22 ) 0 1px, transparent 1px 78px );
}

body.hdl-theme-dashboard .hbg-pulse .core {
	background: radial-gradient( closest-side, rgba( 0, 123, 255, 0.4 ), transparent 74% );
}

body.hdl-theme-dashboard .hbg-rain .sweep {
	background: linear-gradient( 180deg, transparent 40%, rgba( 0, 123, 255, 0.16 ) 52%, transparent 64% );
}

body.hdl-theme-dashboard .hbg-rain .col {
	background: repeating-linear-gradient( var( --hdl-blue ) 0 11px, transparent 11px 58px );
}

/* 11. Cards and panels: 6px, flat card colour */
body.hdl-theme-dashboard :is( .card, .card-dark, .glass-quote, .plan, .compare, .ctable, .form-card, .code-block, .code-snip, .app, .preview, .lead-box.chat ) {
	border-radius: var( --hdl-radius-card ) !important;
}

body.hdl-theme-dashboard :is( .inds a, .status-banner, .svc-list, .metric, .doc-table, .doc-callout, .report, .usecase, .arch-layer, .post, .feature-post, .endpoint, .step, .mig-step, .promo .is-pending ) {
	border-radius: var( --hdl-radius-card );
}

body.hdl-theme-dashboard :is( .form-card, .lead-box.chat ) {
	box-shadow: var( --hdl-shadow-modal ) !important;
}

body.hdl-theme-dashboard .inds a {
	background: var( --hdl-card );
	border-color: transparent;
}

body.hdl-theme-dashboard :is( .inds a, .cs-next ):hover {
	background: var( --hdl-card );
	border-color: var( --hdl-fill-2 );
}

body.hdl-theme-dashboard .glass-quote::before {
	background: linear-gradient( 150deg, rgba( 0, 123, 255, 0.5 ), rgba( 0, 123, 255, 0.05 ) 40%, rgba( 248, 248, 248, 0.05 ) );
}

body.hdl-theme-dashboard :is( .secret, .secret .tag, .win.on > div:first-child, .ent ) {
	border-color: rgba( 0, 123, 255, 0.45 );
}

body.hdl-theme-dashboard :is( .ent, .soon ) {
	background: var( --hdl-blue-tint );
}

body.hdl-theme-dashboard .soon {
	border-color: rgba( 0, 123, 255, 0.35 );
}

/* 12. Segmented controls, chips, tabs: 5px */
body.hdl-theme-dashboard :is( .toggle-bill, .toggle-bill button, .seg, .seg button, .chan, .chan button, .chip, .cb-tab, .endpoint .m ) {
	border-radius: var( --hdl-radius-control ) !important;
}

body.hdl-theme-dashboard .app-chip.on {
	border-color: rgba( 0, 123, 255, 0.5 );
}

/* 13. Data, code and API colours */
body.hdl-theme-dashboard .bars i {
	background: linear-gradient( 180deg, var( --hdl-blue ), rgba( 0, 123, 255, 0.22 ) );
}

body.hdl-theme-dashboard .ep .m.get {
	color: var( --hdl-blue-light );
	border-color: rgba( 0, 123, 255, 0.45 );
	background: var( --hdl-blue-tint );
}

body.hdl-theme-dashboard :is( .ep .m.post, .endpoint .m.post ) {
	color: var( --hdl-success-bright );
	background: rgba( 41, 213, 131, 0.16 );
}

body.hdl-theme-dashboard :is( .ep-terms b, .code-block .p, .app .rob b, .pl .grp, .notes .lbl, .f-hit ) {
	color: var( --hdl-blue-light );
}

/* 14. Kit block stylesheets (app/storefront mockups, demo, report) */
body.hdl-theme-dashboard .app .osheet .q.f {
	border-color: rgba( 0, 123, 255, 0.55 );
	background: rgba( 0, 123, 255, 0.1 );
}

body.hdl-theme-dashboard .app .bl.on {
	border-color: rgba( 0, 123, 255, 0.55 );
	background: rgba( 0, 123, 255, 0.07 );
}

body.hdl-theme-dashboard .app .bl.ghost {
	border-color: rgba( 0, 123, 255, 0.5 );
	background: rgba( 0, 123, 255, 0.04 );
	color: var( --hdl-blue-light );
}

body.hdl-theme-dashboard .app .scan {
	border-color: rgba( 0, 123, 255, 0.4 );
	background: rgba( 0, 123, 255, 0.07 );
}

body.hdl-theme-dashboard .chip.info {
	background: var( --hdl-blue-tint );
	color: var( --hdl-blue-light );
}

body.hdl-theme-dashboard .f-line.on {
	background: rgba( 0, 123, 255, 0.05 );
}

body.hdl-theme-dashboard .rp-cover-lg {
	box-shadow: var( --hdl-shadow-modal );
}

/* 15. Forms: theme fields and hdl-forms */
body.hdl-theme-dashboard {
	--hdl-form-field-bg: var( --hdl-fill-1 );
	--hdl-form-field-border: transparent;
	--hdl-form-field-radius: var( --hdl-radius-control );
	--hdl-form-accent: var( --hdl-blue );
	--hdl-form-focus-ring: var( --hdl-blue-ring );
	--hdl-form-error: var( --hdl-danger );
	--hdl-form-success: var( --hdl-success-bright );
}

body.hdl-theme-dashboard :is( .field input, .field select, .field textarea, .lf-input, .chat-input input, .addbar input, .addbar select, .hdl-form__field input, .hdl-form__field select, .hdl-form__field textarea ) {
	min-height: 44px;
	padding: 0 14px;
	background: var( --hdl-fill-1 ) !important;
	border: 1px solid transparent !important;
	border-radius: var( --hdl-radius-control ) !important;
	color: var( --hdl-text );
	font-family: var( --hdl-font );
}

body.hdl-theme-dashboard :is( .field textarea, .hdl-form__field textarea ) {
	padding: 12px 14px;
}

body.hdl-theme-dashboard :is( .field, .hdl-form__field ) :is( input, textarea )::placeholder {
	color: var( --hdl-placeholder );
}

body.hdl-theme-dashboard :is( .field input, .field select, .field textarea, .hdl-form__field input, .hdl-form__field select, .hdl-form__field textarea ):hover {
	border-color: var( --hdl-outline-hover ) !important;
}

body.hdl-theme-dashboard :is( .field input, .field select, .field textarea, .lf-input, .hdl-form__field input, .hdl-form__field select, .hdl-form__field textarea ):focus {
	outline: none;
	border-color: var( --hdl-blue ) !important;
	box-shadow: 0 0 0 3px var( --hdl-blue-ring );
}

body.hdl-theme-dashboard :is( .field input.err, .field select.err, .field textarea.err, .hdl-form__field [aria-invalid="true"] ) {
	border-color: var( --hdl-danger ) !important;
	outline-color: var( --hdl-danger );
}

body.hdl-theme-dashboard :is( .field .hint, .hdl-form__error ) {
	font-size: 12.5px;
	color: var( --hdl-danger-light );
}

body.hdl-theme-dashboard .field label {
	font-size: 12px;
	color: var( --hdl-text-label );
}

body.hdl-theme-dashboard .field select option {
	background: var( --hdl-menu );
	color: var( --hdl-text );
}

/* 16. Responsibility matrix: data colours on the brief's tokens */
body.hdl-theme-dashboard .who .c.yes {
	color: var( --hdl-blue-light );
}

body.hdl-theme-dashboard .who .c.no {
	color: var( --hdl-text-faint );
}

/* ==========================================================================
   17. Motion — one quiet vocabulary, all of it off under reduced motion
   ========================================================================== */
body.hdl-theme-dashboard {
	--hdl-ease: cubic-bezier( 0.2, 0.7, 0.3, 1 );
	--hdl-dur-fast: 160ms;
	--hdl-dur-reveal: 600ms;
}

/* Interactive states: colour, border and ring ease; nothing moves. */
body.hdl-theme-dashboard :is( a, button, .btn, .mh-tab, .mh-tab .pm, .mh-cta, .mh-sub a, .card, .plan, .rail article, .duo-card, .bl-card, .promo a, .inds a, .cs-next, .rail-nav button, .faq summary, .field input, .field select, .field textarea, .hdl-form__field input, .hdl-form__field select, .hdl-form__field textarea ) {
	transition:
		color var( --hdl-dur-fast ) ease,
		background-color var( --hdl-dur-fast ) ease,
		border-color var( --hdl-dur-fast ) ease,
		box-shadow var( --hdl-dur-fast ) ease,
		opacity var( --hdl-dur-fast ) ease;
}

/*
 * Scroll reveal. base.css transitions only transform, so opacity jumped from
 * 0 to 1 the moment .in landed and nothing visibly faded. Opacity now eases
 * with it. Declared after the interactive rule so a revealed card keeps its
 * fade; the colour properties are repeated so it keeps its hover easing too.
 * site.js's per-element stagger (transition-delay) is untouched.
 */
body.hdl-theme-dashboard [data-reveal] {
	transform: translateY( 12px );
	transition:
		opacity var( --hdl-dur-reveal ) var( --hdl-ease ),
		transform var( --hdl-dur-reveal ) var( --hdl-ease ),
		color var( --hdl-dur-fast ) ease,
		background-color var( --hdl-dur-fast ) ease,
		border-color var( --hdl-dur-fast ) ease;
}

body.hdl-theme-dashboard [data-reveal].in {
	opacity: 1;
	transform: none;
}

html.no-js body.hdl-theme-dashboard [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Page to page: a short cross-fade (View Transitions; Chrome, Edge, Safari 18.2+).
   The header is named so it holds still while the content fades. Browsers
   without support navigate exactly as before. */
@view-transition {
	navigation: auto;
}

::view-transition-old( root ),
::view-transition-new( root ) {
	animation-duration: 220ms;
	animation-timing-function: ease;
}

body.hdl-theme-dashboard .mh {
	view-transition-name: hdl-header;
}

@media ( prefers-reduced-motion: reduce ) {
	@view-transition {
		navigation: none;
	}

	body.hdl-theme-dashboard [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	body.hdl-theme-dashboard :is( a, button, .btn, .mh-tab, .mh-cta, .card, .rail article, .duo-card, .bl-card, .promo a, .inds a, .field input, .hdl-form__field input ) {
		transition: none;
	}
}