/* Gauges widget (widgets/gauges/gauges.js): the overall planet, one bar graph of the elements and the mood. */
.gg__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; }
.gg__main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.gg__planet { width: 168px; height: 168px; margin-bottom: 6px; }
.gg__lbl { font-family: var(--wk-display); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wk-copper); }
.gg__sub { font-size: 11.5px; color: var(--muted); max-width: 24ch; }
.gg__bars { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 24px; }
/* Gridlines at every quarter behind the bars, with the scale along the top. */
.gg__bars::before { content: ''; position: absolute; left: 0; right: 0; top: 20px; bottom: 18px; pointer-events: none; background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 25% 100% repeat-x; box-shadow: inset -1px 0 0 var(--line); }
.gg__axis { position: absolute; left: 0; right: 0; top: 0; height: 14px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gg__axis span { position: absolute; top: 0; transform: translateX(-50%); }
.gg__axis span:nth-child(1) { left: 0; transform: none; }
.gg__axis span:nth-child(2) { left: 25%; }
.gg__axis span:nth-child(3) { left: 50%; }
.gg__axis span:nth-child(4) { left: 75%; }
.gg__axis span:nth-child(5) { right: 0; transform: none; }
.gg__el { position: relative; display: flex; flex-direction: column; gap: 5px; outline: none; }
.gg__bar { position: relative; display: block; height: 16px; border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.gg__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(-45deg, rgba(0,0,0,.2) 0 1px, transparent 1px 4px), var(--wk-copper); transition: width 1.4s cubic-bezier(.2,.8,.2,1), filter .25s ease; }
.gg.is-in .gg__bar i { width: calc(var(--v) * 100%); }
.gg__bar b { position: absolute; top: 50%; left: calc(var(--v) * 100% + 8px); transform: translateY(-50%); font-size: 18px; line-height: 1; font-weight: 600; opacity: 0; transition: opacity .4s ease 1.1s; }
.gg.is-in .gg__bar b { opacity: 1; }
.gg__name { font-size: 12px; color: var(--muted); transition: color .2s ease; }
.gg__el:hover .gg__name, .gg__el:focus-visible .gg__name { color: var(--wk-copper); }
.gg__el:hover .gg__bar i, .gg__el:focus-visible .gg__bar i { filter: brightness(1.15); }
.gg__mood { padding-top: 18px; border-top: 1px solid var(--line); }
.gg__mtext { display: flex; flex-direction: column; gap: 4px; }
.gg__mtext b { font-size: 30px; line-height: 1; font-weight: 600; }
.gg__mtext > span:not(.gg__lbl) { color: var(--ink-2); }
@media (max-width: 600px) {
  .gg__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .gg__bar i, .gg__bar b { transition: none; } }