/* =====================================================================
   "Was this article useful?" under an article (template-parts/article-rate.php), dark design since 2026-10-26.
   The block opens the dark end of the article: the soft light at its top was the comments' light; the comments right
   under it (and the related studies, when an article has no comments) begin in the colour it ends with, so they run on.
   The question, then one glass panel cut in two equal halves: to rate on the left, to share on the right.
   The stars of WP-PostRatings are drawn as yellow outlines until one points at them, and filled up to the chosen one;
   the readers' average is said in words under them (the plugin's own line stays in its box, hidden).
   After a vote (assets/js/wd-rate.js: class is-rated, and is-just-rated for that moment) the stars give way to the
   thanks, and the sharing half lights up with a yellow ring.
   Loaded by header.php on articles, after the theme's style-en.css.
   ===================================================================== */

.wd-rate{--r-y:#ffc107;--r-text:#d5dce6;--r-muted:#8d9cb0;--r-soft:#a9b8ca;--r-gut:clamp(16px,4vw,64px);
	position:relative;isolation:isolate;margin:0;padding:clamp(56px,5.5vw,92px) 0 clamp(40px,4vw,64px);
	background:radial-gradient(70% 420px at 14% 0%,rgba(12,106,136,.3) 0%,rgba(12,106,136,0) 72%),radial-gradient(50% 360px at 92% 12%,rgba(143,184,255,.07) 0%,rgba(143,184,255,0) 70%),linear-gradient(180deg,#182f4c 0,#172b45 50%,#182f4c 100%);
	color:var(--r-text);font-family:Transat,sans-serif;font-weight:300;font-size:16px;line-height:1.5;letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased}
.wd-rate *,.wd-rate *::before,.wd-rate *::after{box-sizing:border-box}
.wd-rate p{margin:0;padding:0}
.wd-rate svg{display:block;flex:none}
.wd-rate a:focus{outline:0}
.wd-rate a:focus-visible{outline:2px solid var(--r-y);outline-offset:3px}
.wd-rate__in{width:min(1040px,100% - 2 * var(--r-gut));margin:0 auto}

/* the question: white with the yellow line, as the other dark sections */
.wd-rate .wd-rate__title{margin:0 0 clamp(24px,2.4vw,32px);padding:0;border:0;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:clamp(28px,1.1vw + 17px,40px);line-height:1.15;letter-spacing:-.005em;text-align:left;text-transform:none;
	text-decoration:underline;text-decoration-color:var(--r-y);text-decoration-thickness:3px;text-underline-offset:.22em}

/* the panel and its two halves */
.wd-rate__panel{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px;
	background:radial-gradient(90% 70% at 100% 100%,rgba(58,111,134,.34) 0%,rgba(58,111,134,0) 62%),radial-gradient(70% 55% at 0% 0%,rgba(143,184,255,.08) 0%,rgba(143,184,255,0) 60%),linear-gradient(160deg,#22314d 0%,#1b283f 52%,#16263b 100%);
	box-shadow:0 40px 80px -48px rgba(0,0,0,.85)}
/* the thin line of light on the upper left edge, as on the panels of About */
.wd-rate__panel::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
	background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.07) 28%,rgba(255,255,255,0) 52%,rgba(143,184,255,.14));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.wd-rate__panel > :only-child{grid-column:1 / -1}
.wd-rate__part{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;padding:clamp(28px,3vw,40px) clamp(24px,3vw,40px)}
.wd-rate__part + .wd-rate__part{box-shadow:inset 1px 0 0 rgba(255,255,255,.1)}
.wd-rate .wd-rate__label{color:#fff;font-weight:700;font-size:17px;line-height:1.35}
.wd-rate .wd-rate__part--share .wd-rate__label{font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:300;font-size:18px;letter-spacing:.01em;transition:color .3s ease}

/* ---------- the stars of WP-PostRatings ---------- */
.wd-rate .wp-postratings{--wd-g:6px;--wp-postratings-size:30px;--wp-postratings-gap:var(--wd-g);--wp-postratings-color-on:#ffc107;--wp-postratings-color-hover:#ffc107;--wp-postratings-color-off:rgba(255,193,7,.78);display:block;margin:0;
	--wd-star-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.12 6.57L12 17.46l-5.9 3.1 1.12-6.57L2.45 9.34l6.6-.96z'/%3E%3C/svg%3E");
	--wd-star-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3.3l2.7 5.47 6.03.88-4.36 4.25 1.03 6-5.4-2.84-5.4 2.84 1.03-6L3.27 9.65l6.03-.88z'/%3E%3C/svg%3E")}
/* the plugin's own line with the average and the votes (it is written in words under the stars instead) */
.wd-rate .wp-postratings > .total{display:none}
.wd-rate .wp-postratings .post-ratings,.wd-rate .wp-postratings .post-ratings_in,.wd-rate .wp-postratings .imaga-reting{display:block;margin:0;padding:0}
/* empty until one points at them: the average is not painted into the stars */
.wd-rate .wp-postratings-vote{display:inline-flex;flex-wrap:nowrap;justify-content:flex-start}
.wd-rate .wp-postratings-vote label{--wp-postratings-step-fill:0% !important;margin:0;padding:6px 0}
.wd-rate .wp-postratings-vote .wp-postratings-item{-webkit-mask-image:var(--wd-star-off);mask-image:var(--wd-star-off)}
.wd-rate .wp-postratings-scale label:hover .wp-postratings-item,.wd-rate .wp-postratings-scale label:hover ~ label .wp-postratings-item,
.wd-rate .wp-postratings-scale input:checked + label .wp-postratings-item,.wd-rate .wp-postratings-scale input:checked + label ~ label .wp-postratings-item,
.wd-rate .wp-postratings-scale input:focus-visible + label .wp-postratings-item,.wd-rate .wp-postratings-scale input:focus-visible + label ~ label .wp-postratings-item{-webkit-mask-image:var(--wd-star-on);mask-image:var(--wd-star-on)}
.wd-rate .wp-postratings-scale input:focus-visible + label{outline:2px solid var(--r-y);outline-offset:2px;border-radius:4px}
.wd-rate .wp-postratings[aria-busy="true"]{opacity:.5}
/* the readers' average */
.wd-rate .wd-rate__score{display:flex;align-items:center;gap:10px;margin-top:4px;color:var(--r-soft);font-size:15px;line-height:1.45}
.wd-rate .wd-rate__score b{color:#fff;font-weight:700;font-size:18px}
.wd-rate .wd-rate__star{width:18px;height:18px;fill:var(--r-y)}
/* the thanks after the vote */
.wd-rate .wd-rate__thanks{display:none;align-items:center;gap:12px;min-height:44px;color:#fff;font-weight:700;font-size:17px;line-height:1.35}
.wd-rate .wd-rate__thanks i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--r-y);color:#1a2334}
.wd-rate .wd-rate__thanks svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wd-rate.is-rated .wd-rate__part--rate .wd-rate__label,.wd-rate.is-rated .wd-rate__stars{display:none}
.wd-rate.is-rated .wd-rate__thanks{display:flex}

/* ---------- the share buttons: the networks' colours, readable on the dark ground, words in sentence case ---------- */
.wd-rate__buttons{display:flex;flex-wrap:wrap;gap:8px}
.wd-rate .wd-share{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:0 16px;border:0;border-radius:999px;
	font-family:Transat,sans-serif;font-weight:700;font-size:15.5px;line-height:1.2;letter-spacing:.01em;text-decoration:none;text-transform:none;white-space:nowrap;
	box-shadow:0 12px 26px -14px rgba(0,0,0,.85);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.wd-rate .wd-share svg{width:18px;height:18px;fill:currentColor}
.wd-rate .wd-share--fb,.wd-rate .wd-share--fb:visited{background:#1766d6;color:#fff}
.wd-rate .wd-share--x,.wd-rate .wd-share--x:visited{background:#0b0f14;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 12px 26px -14px rgba(0,0,0,.85);color:#fff}
.wd-rate .wd-share--x svg{width:16px;height:16px}
.wd-rate .wd-share--mail,.wd-rate .wd-share--mail:visited{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);color:#fff}
@media (hover: hover){
	.wd-rate .wd-share--fb:hover{background:#1b74f0;color:#fff}
	.wd-rate .wd-share--x:hover{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 12px 26px -14px rgba(0,0,0,.85);color:#fff}
	.wd-rate .wd-share--mail:hover{box-shadow:inset 0 0 0 1px var(--r-y);color:#fff}
}
.wd-rate .wd-rate__count{margin-top:4px;color:var(--r-soft);font-size:15px;line-height:1.45}
.wd-rate .wd-rate__count b{color:#fff;font-weight:700;font-size:18px}

/* ---------- right after the vote: the sharing half lights up ---------- */
.wd-rate__part--share::after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;z-index:-1;border-radius:16px;background:rgba(255,193,7,.05);
	box-shadow:inset 0 0 0 1.5px rgba(255,193,7,.55),0 0 0 6px rgba(255,193,7,.07);opacity:0;transition:opacity .4s ease;pointer-events:none}
.wd-rate.is-just-rated .wd-rate__part--share::after{opacity:1}
.wd-rate.is-just-rated .wd-rate__part--share .wd-rate__label{color:#fff}

/* ---------- the comments (or the related studies) right under this block begin in its last colour ---------- */
.wd-rate + .wd-talk{background:radial-gradient(50% 360px at 88% 520px,rgba(58,111,134,.12) 0%,rgba(58,111,134,0) 70%),linear-gradient(180deg,#182f4c 0,#172b45 360px,#132744 100%)}
.wd-rate + .wd-related{background:radial-gradient(55% 45% at 82% 34%,rgba(58,111,134,.18) 0%,rgba(58,111,134,0) 70%),linear-gradient(180deg,#182f4c 0,#17253b 240px,#1a2334 420px)}

/* ---------- tablets and phones: the halves one under the other ---------- */
@media (max-width: 767.98px){
	.wd-rate__panel{grid-template-columns:minmax(0,1fr)}
	.wd-rate__part + .wd-rate__part{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
	.wd-rate__part{padding:26px 20px}
	.wd-rate .wp-postratings{--wd-g:5px;--wp-postratings-size:clamp(21px,6.6vw,30px)}
	.wd-rate .wd-rate__buttons .wd-share{flex:1 1 auto}
	.wd-rate .wd-rate__buttons .wd-share--mail{flex-basis:100%}
	.wd-rate__part--share::after{top:8px;right:8px;bottom:8px;left:8px;border-radius:14px}
}
@media (max-width: 359.98px){
	.wd-rate__part{padding:24px 16px}
	.wd-rate .wp-postratings{--wd-g:3px}
	.wd-rate .wd-share{padding:0 14px}
}
/* the halves side by side on a narrow tablet: smaller stars where the browser cannot measure the half (below) */
@media (min-width: 768px) and (max-width: 959.98px){
	.wd-rate .wp-postratings{--wp-postratings-size:24px;--wd-g:5px}
}
/* the stars always as big as their half allows, up to 30px, all ten in one row */
@supports (width: 1cqi){
	.wd-rate__part{container-type:inline-size}
	.wd-rate .wp-postratings{--wp-postratings-size:clamp(18px,calc((100cqi - 9 * var(--wd-g)) / 10),30px)}
}
@media (prefers-reduced-motion: reduce){
	.wd-rate .wd-share,.wd-rate__part--share::after,.wd-rate .wd-rate__part--share .wd-rate__label{transition:none}
}