/**
 * Coin Republic × Portfolio Crypto Engine
 *
 * Token overrides only. The plugin's own stylesheet does the layout; this maps
 * its palette onto the Coin Republic brand and gives its pages a dark ground.
 *
 * Nothing here uses !important. The file is enqueued after the plugin's, so
 * equal-specificity rules win on order — if a rule stops working, check the
 * enqueue dependency before reaching for !important.
 */

/* ==========================================================
   1 · BRAND TOKENS
   ========================================================== */
.pce{
	/* accent: the plugin ships electric blue, we are orange */
	--pce-accent:#F26B21;
	--pce-accent-2:#FF8A3D;
	--pce-accent-ink:#1A1206;
	--pce-accent-soft:rgba(242,107,33,.14);
	--pce-accent-rgb:242,107,33;
	--pce-accent-2-rgb:255,138,61;

	/* amber highlight for forecast badges — gold, from the hero backdrop */
	--pce-highlight:#C99A3E;
	--pce-highlight-soft:rgba(201,154,62,.16);
	--pce-highlight-rgb:201,154,62;

	/* market semantics stay conventional: green up, red down */
	--pce-up:#16C784;
	--pce-down:#EA3943;
	--pce-up-soft:rgba(22,199,132,.14);
	--pce-down-soft:rgba(234,57,67,.14);
	--pce-up-rgb:22,199,132;
	--pce-down-rgb:234,57,67;
	--pce-flat:#8A97AC;
	--pce-flat-soft:rgba(138,151,172,.14);

	/* geometry to match the theme */
	--pce-radius:8px;
	--pce-radius-lg:14px;
	--pce-radius-pill:999px;

	/* the theme's two-shadow elevation, not one flat drop */
	--pce-shadow-sm:0 1px 2px rgba(0,0,0,.30), 0 2px 6px -2px rgba(0,0,0,.36);
	--pce-shadow-md:0 2px 4px rgba(0,0,0,.32), 0 10px 22px -8px rgba(0,0,0,.48);
	--pce-shadow-lg:0 4px 8px rgba(0,0,0,.34), 0 22px 42px -14px rgba(0,0,0,.58);
	--pce-shadow-xl:0 8px 16px rgba(0,0,0,.36), 0 40px 74px -22px rgba(0,0,0,.66);

	--pce-sheen:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
}

/* dark palette — the theme's night surfaces */
html[data-pce-theme="dark"] .pce,
html:not([data-pce-theme]) .pce{
	--pce-bg:#0A0B0F;
	--pce-surface:#12141B;
	--pce-surface-2:#171A23;
	--pce-surface-3:#1E222D;
	--pce-border:#262B36;
	--pce-border-strong:#39404F;
	--pce-text:#F2F4F8;
	--pce-text-2:#B7C0CF;
	--pce-muted:#7E8798;
	--pce-hairline:inset 0 0 0 1px rgba(255,255,255,.05);
	--pce-inner-top:inset 0 1px 0 rgba(255,255,255,.08);
	--pce-grid:rgba(255,255,255,.035);
}

/* light palette, for anyone who flips the switch */
html[data-pce-theme="light"] .pce{
	--pce-bg:#F5F0E8;
	--pce-surface:#FFFFFF;
	--pce-surface-2:#F7F3EC;
	--pce-surface-3:#EFE8DC;
	--pce-border:#E4DBCC;
	--pce-border-strong:#D2C6B2;
	--pce-text:#16181D;
	--pce-text-2:#4A4E58;
	--pce-muted:#84899A;
	--pce-hairline:inset 0 0 0 1px rgba(22,24,29,.05);
	--pce-inner-top:inset 0 1px 0 rgba(255,255,255,.9);
	--pce-grid:rgba(22,24,29,.04);
	--pce-shadow-sm:0 1px 2px rgba(22,24,29,.06), 0 2px 6px -2px rgba(22,24,29,.10);
	--pce-shadow-md:0 2px 4px rgba(22,24,29,.06), 0 8px 18px -8px rgba(22,24,29,.18);
	--pce-shadow-lg:0 3px 6px rgba(22,24,29,.07), 0 16px 32px -12px rgba(22,24,29,.24);
	--pce-shadow-xl:0 6px 12px rgba(22,24,29,.08), 0 28px 52px -18px rgba(22,24,29,.30);
	--pce-sheen:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
}

/* ==========================================================
   2 · TYPOGRAPHY — inherit the theme's three roles
   ========================================================== */
.pce{font-family:var(--display)}
.pce h1,.pce h2,.pce h3,.pce h4,.pce h5{
	font-family:var(--display);letter-spacing:-.025em;
}
.pce .pce-num,
.pce [class*="pce-price"],
.pce [class*="pce-change"],
.pce [class*="pce-stat__value"],
.pce table td,
.pce time{
	font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.pce p,.pce .pce-prose{font-family:var(--serif)}

/* ==========================================================
   3 · DARK PAGE GROUND
   ==========================================================
   A dark card sitting on the site's cream reads as a mistake.
   On the plugin's own pages the content area goes dark, edge to
   edge, while the masthead and footer stay light.
   ========================================================== */
body.cr-pce-page #content{background:var(--night);padding-bottom:56px}

/* Only the outermost .pce is the page container. PCE_Render::wrap() emits a
   second .pce div around every component, so styling the class alone gives
   each component its own max-width and padding — which is what left the
   market panel stranded at a third of the width with dead space beside it. */
body.cr-pce-page main.pce{
	background:transparent;
	max-width:var(--maxw);margin:0 auto;padding:20px var(--pad) 0;
}
body.cr-pce-page main.pce .pce{
	max-width:none;width:100%;margin:0;padding:0;background:transparent;
}
body.cr-pce-page .adlb{background:var(--night)}

/* the leaderboard placeholder should not be a white slab on the dark ground */
body.cr-pce-page .adzone.is-empty{
	background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.16);
}
body.cr-pce-page .adzone__empty{color:rgba(255,255,255,.4)}

/* the footer keeps its own light treatment; give it a seam */
body.cr-pce-page .ftrads-wrap{border-top:1px solid rgba(255,255,255,.08)}

/* ==========================================================
   4 · DEPTH — align with the theme's hover language
   ========================================================== */
.cr-depth .pce-card,
.cr-depth .pce-panel,
.cr-depth .pce-stat,
.cr-depth .pce-section,
.cr-depth .pce-directory__item,
.cr-depth .pce-trending__item,
.cr-depth .pce-timeline__item{
	transition:transform .38s var(--lift), box-shadow .38s var(--lift), border-color .25s ease;
}
.cr-depth .pce-card:hover,
.cr-depth .pce-panel:hover,
.cr-depth .pce-stat:hover,
.cr-depth .pce-directory__item:hover{
	box-shadow:var(--pce-shadow-lg);
	border-color:rgba(var(--pce-accent-rgb),.45);
}
.cr-depth .pce-trending__item:hover,
.cr-depth .pce-timeline__item:hover{transform:translateX(4px)}

/* buttons and chips lift the same way they do in the theme */
.cr-depth .pce-btn,
.cr-depth .pce-chip,
.cr-depth .pce-back{
	transition:transform .22s var(--lift), box-shadow .22s var(--lift), background .18s ease;
}
.cr-depth .pce-btn:hover,
.cr-depth .pce-back:hover{
	transform:translateY(-2px);
	box-shadow:0 10px 30px -10px rgba(var(--pce-accent-rgb),.55);
}
.cr-depth .pce-btn:active,
.cr-depth .pce-back:active{transform:translateY(0)}
.cr-depth .pce-chip:hover{transform:translateY(-2px)}

/* coin logo lifts off the hero */
.cr-depth .pce-hero__logo{
	transition:transform .45s var(--lift), filter .45s ease;
	filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.cr-depth .pce-coin-page:hover .pce-hero__logo{transform:translateY(-3px) scale(1.04)}

/* table rows follow the theme's row-slide */
.cr-depth .pce table tbody tr{transition:background .2s ease, transform .25s var(--lift)}
.cr-depth .pce table tbody tr:hover{
	background:var(--pce-surface-2);transform:translateX(3px);
}

/* ==========================================================
   5 · ACCESSIBILITY
   ========================================================== */
.pce :focus-visible{outline:2px solid var(--pce-accent);outline-offset:3px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
	.cr-depth .pce *,
	.cr-depth .pce *::before,
	.cr-depth .pce *::after{
		transition:none !important;animation:none !important;transform:none !important;
	}
}
@media (hover:none){
	.cr-depth .pce-3d{transform:none}
}

/* ==========================================================
   6 · RESPONSIVE
   ========================================================== */
@media (max-width:640px){
	body.cr-pce-page #content{padding-bottom:32px}
	body.cr-pce-page .pce{padding:0 var(--pad)}
}


/* ==========================================================
   7 · ARCHIVE LAYOUT
   ==========================================================
   Six market figures were stacking two-wide inside a narrow
   boxed panel. They now run as a full-width band of stat
   cards, which is what removes the empty space.
   ========================================================== */
.pce-market{width:100%}
.pce-market__grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

body.cr-pce-page .pce-market{
	background:transparent;border:0;box-shadow:none;padding:0;
}
body.cr-pce-page .pce-market__head{
	margin-bottom:14px;padding-bottom:12px;
	border-bottom:2px solid var(--pce-border);
}
body.cr-pce-page .pce-market__title{
	font-family:var(--display);font-size:20px;letter-spacing:-.02em;
}
body.cr-pce-page .pce-market__grid{
	grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;
}
body.cr-pce-page .pce-stat{
	background:var(--pce-surface);border:1px solid var(--pce-border);
	border-radius:var(--pce-radius-lg);padding:18px 20px;
	box-shadow:var(--pce-shadow-sm), var(--pce-inner-top);
	position:relative;overflow:hidden;
}
/* a hairline of brand colour along the top edge of every figure */
body.cr-pce-page .pce-stat::before{
	content:"";position:absolute;inset:0 0 auto;height:2px;
	background:linear-gradient(90deg,var(--pce-accent),transparent);
	opacity:.55;transition:opacity .3s ease;
}
body.cr-pce-page .pce-stat:hover::before{opacity:1}
body.cr-pce-page .pce-stat__label{
	font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--pce-muted);
}
body.cr-pce-page .pce-stat__value{
	font-family:var(--mono);font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;
}

/* page head */
body.cr-pce-page .pce-archive__head{
	align-items:flex-end;margin-bottom:26px;
	padding-bottom:16px;border-bottom:2px solid var(--pce-border);
}
body.cr-pce-page .pce-archive__title{
	font-family:var(--display);font-size:clamp(28px,3.6vw,44px);font-weight:900;
}

/* topbar: back link as a real control, toggle to the right */
body.cr-pce-page .pce-topbar{
	justify-content:space-between;margin-bottom:18px;
}
body.cr-pce-page .pce-back{
	display:inline-flex;align-items:center;gap:8px;
	padding:9px 16px;border-radius:var(--pce-radius-pill);
	border:1px solid var(--pce-border);background:var(--pce-surface);
	font-family:var(--display);font-weight:700;font-size:13.5px;
	color:var(--pce-text);
}
body.cr-pce-page .pce-back:hover{
	border-color:var(--pce-accent);color:var(--pce-accent);
}

/* table and search fill the measure */
body.cr-pce-page .pce-table-wrap,
body.cr-pce-page .pce-archive__search{width:100%}
body.cr-pce-page .pce-archive__search{max-width:none;margin-bottom:20px}

/* the disclaimer was floating alone in a dark field */
body.cr-pce-page .pce-disclaimer,
body.cr-pce-page .pce-updated{
	font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
}

/* ==========================================================
   8 · EXTRA DEPTH ON THE FIGURES
   ========================================================== */
.cr-depth body.cr-pce-page .pce-stat,
body.cr-depth.cr-pce-page .pce-stat{
	transition:transform .38s var(--lift), box-shadow .38s var(--lift), border-color .25s ease;
}
body.cr-depth.cr-pce-page .pce-stat:hover{
	transform:translateY(-4px);
	box-shadow:var(--pce-shadow-lg), var(--pce-inner-top);
	border-color:rgba(var(--pce-accent-rgb),.5);
}
body.cr-depth.cr-pce-page .pce-stat::after{
	content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
	background:var(--pce-sheen);transform:translateX(-120%);
	transition:transform .85s var(--lift);
}
body.cr-depth.cr-pce-page .pce-stat:hover::after{transform:translateX(120%)}