body.tg-article-detail .tg-article-shell .tg-article-views { color: #345b8a; white-space: nowrap; }
body.tg-article-detail .tg-article-shell .tg-article-rating {
  position: relative; isolation: isolate;
  margin: 30px 0 26px; padding: 24px; border: 1px solid #c2ddf0; border-radius: 16px;
  background: linear-gradient(115deg, #f4f9ff 5%, #e2f1ff 50%, #ddf5f4 100%);
  background-size: 160% 100%; background-position: 0 50%; color: #304f75;
  box-shadow: 0 9px 28px -14px rgb(45 118 176 / 28%), inset 0 1px 0 rgb(255 255 255 / 85%);
  transition: background-position .6s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Decorative dots stay behind the content and never intercept controls. */
body.tg-article-detail .tg-article-shell .tg-article-rating::before {
  content: ''; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 85%) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
body.tg-article-detail .tg-article-shell .tg-article-rating:focus-within {
  background-position: 100% 50%; border-color: #9fcce7;
  box-shadow: 0 12px 30px -14px rgb(45 118 176 / 34%), inset 0 1px 0 rgb(255 255 255 / 85%);
}
body.tg-article-detail .tg-article-shell .tg-rating-intro { display: flex; gap: 13px; align-items: flex-start; }
body.tg-article-detail .tg-article-shell .tg-rating-symbol {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  background: #fff; border: 1px solid #cce2f3; border-radius: 13px;
  box-shadow: 0 4px 12px rgb(62 122 174 / 8%); font: 30px/1 Arial, sans-serif; color: #315d96;
}
body.tg-article-detail .tg-article-shell .tg-rating-intro p { margin: 0; font-size: 14px; line-height: 1.7; }
body.tg-article-detail .tg-article-shell .tg-rating-intro .tg-rating-title { font-size: 19px; font-weight: 700; line-height: 1.5; margin-bottom: 4px; color: #244b7a; }
body.tg-article-detail .tg-article-shell .tg-rating-summary { margin: 15px 0 12px; font-size: 14px; font-weight: 600; color: #48617f; }
body.tg-article-detail .tg-article-shell .tg-article-rating form { margin: 0; }
body.tg-article-detail .tg-article-shell .tg-article-rating fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
body.tg-article-detail .tg-article-shell .tg-article-rating legend { margin-bottom: 8px; padding: 0; text-transform: none; font-size: 13px; font-weight: 400; color: #48617f; }
body.tg-article-detail .tg-article-shell .tg-rating-choices { position: relative; display: flex; flex-wrap: nowrap; max-width: 244px; gap: 6px; margin: 0 0 14px; }
body.tg-article-detail .tg-article-shell .tg-rating-choices input,
body.tg-article-detail .tg-article-shell .tg-rating-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.tg-article-detail .tg-article-shell .tg-rating-choices label {
  position: relative; box-sizing: border-box; flex: 0 1 44px; min-width: 30px;
  display: grid; place-items: center; width: 44px; min-height: 44px; margin: 0; border: 1px solid #cbd7e5;
  border-radius: 10px; background: #fff; color: #71829a; cursor: pointer; font: 29px/1 Arial, sans-serif;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.tg-article-detail .tg-article-shell .tg-rating-choices label.is-selected { color: #a85e08; background: #fff1d4; border-color: #ccaa72; }
body.tg-article-detail .tg-article-shell .tg-rating-choices label > span[aria-hidden] { display: block; transform-origin: 50% 65%; }
body.tg-article-detail .tg-article-shell .tg-rating-choices label::before,
body.tg-article-detail .tg-article-shell .tg-rating-choices label::after {
  content: ''; position: absolute; pointer-events: none; width: 7px; height: 7px;
  top: 2px; right: 4px; background: #bd7b10; opacity: 0;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}
body.tg-article-detail .tg-article-shell .tg-rating-choices label::after { width: 5px; height: 5px; top: auto; right: auto; bottom: 5px; left: 4px; }
body.tg-article-detail .tg-article-shell .tg-rating-choices input:focus-visible + label { outline: 3px solid #305f99; outline-offset: 3px; }
body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:disabled label { cursor: default; }
body.tg-article-detail .tg-article-shell .tg-rating-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
body.tg-article-detail .tg-article-shell .tg-rating-actions button {
  min-height: 44px; min-width: 145px; margin: 0; padding: 10px 18px; border: 1px solid #315d96;
  border-radius: 9px; background: #315d96; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5;
  letter-spacing: normal; text-transform: none; box-shadow: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.tg-article-detail .tg-article-shell .tg-rating-actions button:disabled { opacity: .6; cursor: default; }
body.tg-article-detail .tg-article-shell .tg-rating-actions button:focus-visible { outline: 3px solid #ab4259; outline-offset: 3px; }
body.tg-article-detail .tg-article-shell .tg-rating-actions span { font-size: 13px; color: #48617f; }
body.tg-article-detail .tg-article-shell .tg-rating-status { min-height: 1.7em; margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: #345578; }
/* A brief thank-you follows a confirmed new vote, equally for every score. */
body.tg-article-detail .tg-article-shell .tg-rating-actions button { position: relative; overflow: visible; }
body.tg-article-detail .tg-article-shell .tg-article-rating[data-tg-thanked] .tg-rating-actions button:disabled {
  opacity: 1; background: #276b72; border-color: #276b72; color: #fff;
}
body.tg-article-detail .tg-article-shell .tg-article-rating[data-tg-thanked] .tg-rating-status { color: #27656c; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  body.tg-article-detail .tg-article-shell .tg-article-rating[data-tg-celebrating] .tg-rating-actions button::before,
  body.tg-article-detail .tg-article-shell .tg-article-rating[data-tg-celebrating] .tg-rating-actions button::after {
    content: ''; position: absolute; left: 50%; top: 0; width: 5px; height: 7px;
    pointer-events: none; opacity: 0; border-radius: 2px; background: #e3ac47;
    box-shadow: -53px -6px #5daab8, -32px -27px #de91a5, -9px -37px #6da1da, 23px -30px #e3ac47, 49px -10px #7bbeb0;
    animation: tg-rating-thanks-confetti 1.25s ease-out both;
  }
  body.tg-article-detail .tg-article-shell .tg-article-rating[data-tg-celebrating] .tg-rating-actions button::after {
    width: 4px; height: 4px; border-radius: 50%; background: #6da1da;
    box-shadow: -43px -18px #e3ac47, -20px -35px #7bbeb0, 13px -43px #de91a5, 36px -22px #6da1da, 56px -4px #e3ac47;
    animation-delay: .08s;
  }
  body.tg-article-detail .tg-article-shell .tg-article-rating[data-tg-celebrating] .tg-rating-status { animation: tg-rating-thanks-reveal .35s ease-out both; }
}
@keyframes tg-rating-thanks-confetti {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.15); }
  18% { opacity: .9; }
  55% { opacity: .8; transform: translate(-50%, -12px) scale(1) rotate(6deg); }
  100% { opacity: 0; transform: translate(-50%, 10px) scale(1.12) rotate(16deg); }
}
@keyframes tg-rating-thanks-reveal { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  body.tg-article-detail .tg-article-shell .tg-article-rating:hover {
    background-position: 100% 50%; border-color: #9fcce7;
    box-shadow: 0 12px 30px -14px rgb(45 118 176 / 34%), inset 0 1px 0 rgb(255 255 255 / 85%);
  }
  /* Hover previews a score without changing the radio value or submitting it. */
  body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:not(:disabled) .tg-rating-choices:has(label:hover) label {
    background: #fff; color: #71829a; border-color: #cbd7e5;
  }
  body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:not(:disabled) .tg-rating-choices:has(label:hover) label:is(:hover, :has(~ label:hover)) {
    background: #fff1d4; color: #a85e08; border-color: #ccaa72;
  }
  body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:not(:disabled) .tg-rating-choices label:hover {
    background: #fff1d4; color: #a85e08; border-color: #ccaa72; box-shadow: 0 4px 12px rgb(167 112 27 / 16%);
  }
  body.tg-article-detail .tg-article-shell .tg-rating-actions button:not(:disabled):hover { background: #244b7a; color: #fff; box-shadow: 0 5px 12px rgb(49 93 150 / 20%); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: no-preference) {
  body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:not(:disabled) .tg-rating-choices input:checked + label > span[aria-hidden] { animation: tg-rating-pop .34s ease-out; }
  @media (hover: hover) and (pointer: fine) {
    body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:not(:disabled) .tg-rating-choices input + label:hover > span[aria-hidden] { animation: tg-rating-wiggle .48s ease-out; }
    body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:not(:disabled) .tg-rating-choices label:hover::before,
    body.tg-article-detail .tg-article-shell .tg-article-rating fieldset:not(:disabled) .tg-rating-choices label:hover::after { animation: tg-rating-spark .5s ease-out; }
  }
}
@keyframes tg-rating-wiggle { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) rotate(-9deg) scale(1.12); } 65% { transform: translateY(-1px) rotate(7deg) scale(1.06); } }
@keyframes tg-rating-pop { 0%, 100% { transform: none; } 45% { transform: scale(1.15); } }
@keyframes tg-rating-spark { 0% { opacity: 0; transform: translateY(3px) scale(.4); } 40% { opacity: .85; } 100% { opacity: 0; transform: translateY(-5px) scale(1.1); } }
@media (max-width: 600px) {
  body.tg-article-detail .tg-article-shell .tg-article-rating { padding: 18px 14px; border-radius: 12px; }
  body.tg-article-detail .tg-article-shell .tg-rating-intro { gap: 10px; }
  body.tg-article-detail .tg-article-shell .tg-rating-intro .tg-rating-title { font-size: 17px; }
  body.tg-article-detail .tg-article-shell .tg-rating-symbol { flex-basis: 36px; width: 36px; height: 36px; font-size: 26px; }
}
@media (max-width: 360px) {
  body.tg-article-detail .tg-article-shell .tg-rating-choices { gap: 4px; }
  body.tg-article-detail .tg-article-shell .tg-rating-choices label { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  body.tg-article-detail .tg-article-shell .tg-article-rating,
  body.tg-article-detail .tg-article-shell .tg-rating-choices label,
  body.tg-article-detail .tg-article-shell .tg-rating-actions button { transition: none; transform: none; }
}