/* A label accompanies every progress color, including zero-percent states. */
.status-not-started { --status-ink: #b42336; --status-fill: #ef5261; --status-soft: #fff1f2; --status-border: #fecdd3; }
.status-in-progress { --status-ink: #65459a; --status-fill: #a58bd4; --status-soft: #f3eefb; --status-border: #d4c5eb; }
.status-completed { --status-ink: #09663c; --status-fill: #12965b; --status-soft: #ddf7e9; --status-border: #68c995; }
.progress-status { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.3; color: var(--status-ink); background: var(--status-soft); border: 1px solid var(--status-border); }
.progress-status > span { font-size: .7rem; }
.progress-status.status-in-progress { color: #65459a; background: #e9dff7; border-color: #d4c5eb; }
.progress-status.status-completed { color: #fff; background: #087443; border-color: #087443; }
.status-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.status-legend > span:last-child { font-size: .78rem; color: var(--muted); }
#learningDashboard > .stats-grid { margin-bottom: 24px; }
#learningDashboard .stat-card { border: 1px solid #dcd7fa; border-top: 4px solid #8b6bea; background: linear-gradient(135deg, #fff, #f3efff); }
#learningDashboard .stat-card:nth-child(2) { border-color: #c3d9fc; border-top-color: #4888e8; background: linear-gradient(135deg, #fff, #edf5ff); }
#learningDashboard .stat-card:nth-child(3) { border-color: #b6e6e3; border-top-color: #209c98; background: linear-gradient(135deg, #fff, #eafaf8); }
#learningDashboard .stat-card:nth-child(4) { border-color: #f3d6b2; border-top-color: #e9943d; background: linear-gradient(135deg, #fff, #fff5e8); }
#learningDashboard .stat-card:nth-child(5) { border-color: #f1c9dc; border-top-color: #d96b9a; background: linear-gradient(135deg, #fff, #fff0f6); }
#learningDashboard .stat-card:nth-child(6) { border-color: #d5cdfa; border-top-color: #9472e8; background: linear-gradient(135deg, #fff, #f2edff); }
#learningDashboard .completion-card { border-color: var(--status-border); border-top-color: var(--status-fill); background: linear-gradient(135deg, #fff, var(--status-soft)); }
#learningDashboard .completion-card .stat-value { color: var(--status-ink); }
#learningDashboard .stat-card::after { opacity: .45; }
#learningDashboard .segment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#learningDashboard .category-card { padding: 20px; border: 1px solid var(--status-border); border-left: 4px solid var(--status-fill); border-radius: 16px; background: linear-gradient(125deg, #fff, var(--status-soft)); min-width: 0; }
#learningDashboard .category-card.status-in-progress { border-style: dashed; border-left-style: solid; background: #f3eefb; }
#learningDashboard .category-card.status-completed { background: #ddf7e9; }
#learningDashboard .category-card .segment-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
#learningDashboard .category-card a { font-size: 1.2rem; line-height: 1.45; font-weight: 700; color: var(--text); text-decoration: none; }
#learningDashboard .category-card .progress-status { font-size: .95rem; padding: 8px 12px; }
#learningDashboard .category-card .progress-status > span { font-size: .9rem; }
#learningDashboard .category-card a:hover { text-decoration: underline; }
#learningDashboard .category-card[data-category] { position: relative; }
#learningDashboard .category-card[data-category] .segment-head a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
#learningDashboard .category-card[data-category]:hover { box-shadow: 0 6px 20px rgba(23, 32, 51, .12); }
#learningDashboard .category-card[data-category]:focus-within { outline: 3px solid #7e5dab; outline-offset: 3px; }
.category-count { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 20px 0 12px; color: var(--status-ink); }
.category-count strong { font-size: 2.4rem; letter-spacing: -.04em; }
.category-count small { font-size: 1.35rem; margin-left: 2px; }
.category-count > span { font-size: 1rem; line-height: 1.5; color: var(--muted); }
#learningDashboard .category-card .segment-progress { height: 8px; background: #e2e8f0; }
#learningDashboard .category-card .segment-progress > span { background: var(--status-fill); }
#learningDashboard .category-card.status-in-progress .segment-progress > span { background: repeating-linear-gradient(45deg, #a58bd4 0 8px, #c5b2e7 8px 16px); }
/* Decorative technology logos sit behind card content without intercepting clicks. */
#learningDashboard .technology-card-title { font-size: 1.2rem; line-height: 1.45; }
#learningDashboard .technology-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
#learningDashboard .category-card[data-technology]:hover { box-shadow: 0 6px 20px rgba(23, 32, 51, .12); }
#learningDashboard .category-card[data-technology]:focus-within { outline: 3px solid var(--technology-accent); outline-offset: 3px; }
#learningDashboard .category-card[data-technology] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, #fff 0%, var(--technology-tint, #eef2ff) 100%);
  border-color: var(--technology-accent, #6366f1);
  border-style: solid;
}
#learningDashboard [data-technology] .category-count { color: var(--technology-accent); }
#learningDashboard [data-technology] .category-count > span {
  color: #425066;
  background: rgba(255, 255, 255, .85);
  padding: 3px 7px;
  border-radius: 6px;
}
#learningDashboard .category-card[data-technology] .segment-progress > span { background: var(--technology-accent); }
#learningDashboard [data-technology]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--technology-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 165px 165px;
  opacity: .45;
  pointer-events: none;
}
[data-technology="python"] { --technology-logo: url('/images/icons/python.svg'); --technology-accent: #306998; --technology-tint: #fff0b3; }
[data-technology="docker"] { --technology-logo: url('/images/icons/docker.svg'); --technology-accent: #087bb5; --technology-tint: #cceeff; }
[data-technology="kubernetes"] { --technology-logo: url('/images/icons/kubernetes.svg'); --technology-accent: #326ce5; --technology-tint: #dce7ff; }
[data-technology="aws"] { --technology-logo: url('/images/icons/aws.svg'); --technology-accent: #a85b00; --technology-tint: #ffe5b8; }
[data-technology="linux"] { --technology-logo: url('/images/icons/linux.svg'); --technology-accent: #806400; --technology-tint: #fff1b8; }
[data-technology="git"] { --technology-logo: url('/images/icons/git.svg'); --technology-accent: #c43e2b; --technology-tint: #ffddd4; }
[data-technology="jenkins"] { --technology-logo: url('/images/icons/jenkins.svg'); --technology-accent: #b3333a; --technology-tint: #f9dce0; }
[data-technology="terraform"] { --technology-logo: url('/images/icons/terraform.svg'); --technology-accent: #7039bb; --technology-tint: #e9dcff; }
[data-technology="monitoring"] { --technology-logo: url('/images/icons/monitoring.svg'); --technology-accent: #b94a19; --technology-tint: #ffdfc9; }
[data-technology="bash"] { --technology-logo: url('/images/icons/bash-badge.svg'); --technology-accent: #327b32; --technology-tint: #dcf2cb; }
@media (max-width: 560px) {
  #learningDashboard [data-technology]::before { background-size: 125px 125px; }
}
#trackStatus { margin: 12px 0; }
.hero-card[data-progress-state="not-started"] .progress-bar { background: rgba(253, 164, 175, .3); }
.hero-card[data-progress-state="not-started"] .progress-bar > span { background: #fb7185; }
.hero-card[data-progress-state="in-progress"] .progress-bar { background: rgba(255, 255, 255, .18); }
.hero-card[data-progress-state="in-progress"] .progress-bar > span { background: repeating-linear-gradient(45deg, #a58bd4 0 8px, #c5b2e7 8px 16px); }
.hero-card[data-progress-state="completed"] .progress-bar { background: rgba(110, 231, 183, .25); }
.hero-card[data-progress-state="completed"] .progress-bar > span { background: #6ee7b7; }
.nav-status { width: 8px; height: 8px; border-radius: 50%; background: var(--status-fill); flex-shrink: 0; }
@media (max-width: 720px) { #learningDashboard .segment-list { grid-template-columns: minmax(0, 1fr); } }
.dashboard-auth-dialog {
  width: min(480px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 36px 28px 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(23, 32, 51, .25);
  text-align: center;
}
.dashboard-auth-dialog::backdrop { background: rgba(17, 24, 39, .55); backdrop-filter: blur(4px); }
.dashboard-auth-close { position: absolute; top: 12px; right: 12px; font-size: 24px; }
.dashboard-auth-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 8px auto 20px; border-radius: 20px; background: var(--brand-soft); color: var(--brand); font-size: 26px; }
.dashboard-auth-dialog h2 { font-family: 'Sora', sans-serif; font-size: 1.5rem; line-height: 1.35; }
.dashboard-auth-dialog p { color: var(--muted); line-height: 1.7; }
.dashboard-auth-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.dashboard-auth-actions a { flex: 1; min-width: 110px; padding: 13px 16px; }
.dashboard-auth-dialog .dashboard-auth-storage { font-size: .8rem; }
.dashboard-auth-guest { border: 0; background: transparent; color: var(--brand); padding: 12px; cursor: pointer; font-weight: 600; }
.dashboard-auth-dialog :focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
body:has(.dashboard-auth-dialog[open]) { overflow: hidden; }