/* Skill viz styles — work inside .a4-page */
.a4-page .sk { display: flex; flex-direction: column; gap: 6px; }

/* Bar */
.a4-page .sk-bar li { display: flex; flex-direction: column; gap: 3px; }
.a4-page .sk-row { display: flex; justify-content: space-between; font-size: 9pt; }
.a4-page .sk-name { font-weight: 500; }
.a4-page .sk-pct { color: var(--c-muted); font-size: 8.5pt; }
.a4-page .sk-bar-track {
  height: 6px; background: var(--c-primary-light); border-radius: 4px; overflow: hidden;
}
.a4-page .sk-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: 4px;
}

/* Dots */
.a4-page .sk-dots li { display: flex; justify-content: space-between; align-items: center; font-size: 9pt; }
.a4-page .sk-dots .dots { display: inline-flex; gap: 3px; }
.a4-page .sk-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--c-primary);
  background: transparent;
}
.a4-page .sk-dots .dot.on { background: var(--c-primary); }

/* List */
.a4-page .sk-list li {
  display: flex; justify-content: space-between;
  padding: 3px 0; font-size: 9pt;
  border-bottom: 1px dotted var(--c-line);
}
.a4-page .sk-list li:last-child { border-bottom: 0; }
.a4-page .sk-list .sk-lvl { color: var(--c-primary); font-weight: 600; font-size: 8.5pt; }

/* Pie */
.a4-page .sk-pie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.a4-page .sk-pie li { display: flex; align-items: center; gap: 6px; font-size: 9pt; }
.a4-page .sk-pie-svg .pie-track { fill: none; stroke: var(--c-primary-light); stroke-width: 5; }
.a4-page .sk-pie-svg .pie-fill { fill: none; stroke: var(--c-primary); stroke-width: 5; stroke-linecap: round; }
.a4-page .sk-pie-svg .pie-text { font-size: 9px; font-weight: 700; fill: var(--c-primary-dark); }

/* Dark-sidebar variant for hobby chips */
.tpl-modern-tech .tpl-aside .hobby,
.tpl-cobalt .cb-aside .hobby,
.tpl-onyx .hobby {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}
.tpl-onyx .hobby { background: rgba(18, 195, 244, 0.18); border-color: rgba(18, 195, 244, 0.30); color: #d0e8f4; }

/* When skill viz is inside a dark sidebar, invert key colors */
.tpl-modern-tech .tpl-aside .sk-bar-track { background: rgba(255,255,255,.18); }
.tpl-modern-tech .tpl-aside .sk-bar-fill  { background: linear-gradient(90deg, #fff, var(--c-accent)); }
.tpl-modern-tech .tpl-aside .sk-pct       { color: rgba(255,255,255,.7); }
.tpl-modern-tech .tpl-aside .sk-dots .dot { border-color: #fff; }
.tpl-modern-tech .tpl-aside .sk-dots .dot.on { background: #fff; }
.tpl-modern-tech .tpl-aside .sk-list .sk-lvl { color: var(--c-accent); }
.tpl-modern-tech .tpl-aside .sk-list li { border-bottom-color: rgba(255,255,255,.18); }
.tpl-modern-tech .tpl-aside .sk-pie-svg .pie-track { stroke: rgba(255,255,255,.22); }
.tpl-modern-tech .tpl-aside .sk-pie-svg .pie-fill  { stroke: var(--c-accent); }
.tpl-modern-tech .tpl-aside .sk-pie-svg .pie-text  { fill: #fff; }