/* ============ category & filtered-list pages: page head + course rows ============ */

.page-head{margin-bottom:16px}
.page-head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.cat-title{display:flex; align-items:center; gap:12px; margin:0 0 4px}
.cat-icon{
  width:42px; height:42px; display:grid; place-items:center; font-size:21px; flex:none;
  background:var(--accent-soft); color:var(--accent-ink); border-radius:11px;
}
.cat-sub{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin:0 0 8px}
.cat-desc{font-size:13px; color:var(--muted); margin:0 0 8px}
.page-head .bar-track{max-width:340px}

.filter-chips{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px}
.search-form{display:flex; gap:8px; margin-top:12px; max-width:420px}

.not-found{color:var(--muted); font-size:14px}
.not-found a{color:var(--accent-ink)}

/* ---------- group headers (filtered list page) ---------- */
.group{margin-bottom:22px}
.group-head{
  display:flex; align-items:center; gap:12px; margin:0 0 8px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}
.group-head .line{flex:1; height:1px; background:var(--line)}
.group-head .n{color:var(--muted); font-weight:400; letter-spacing:.04em; text-transform:none}

/* ---------- course rows ---------- */
.row{
  background:var(--surface); border:1px solid var(--line-soft);
  border-left:3px solid var(--todo); border-radius:10px;
  margin-bottom:6px; scroll-margin-top:20px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.row:hover{box-shadow:var(--shadow)}
.row[data-status="progress"]{border-left-color:var(--prog)}
.row[data-status="done"]{border-left-color:var(--done)}
.row[data-status="done"] .row-t{color:var(--muted)}
.row.flash{animation:flashring 1.6s ease-out 1}
@keyframes flashring{
  0%{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)}
  100%{box-shadow:0 0 0 3px transparent}
}

.row-main{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto auto;
  gap:2px 12px; align-items:center; padding:9px 12px 9px 14px; cursor:pointer;
}
.num{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted)}
.row[data-status="done"] .num::after{content:" ✓"; color:var(--done-text)}
.rm-title{min-width:0}
.row-t{
  font-family:var(--display); font-size:14.5px; font-weight:500;
  letter-spacing:-.01em; margin:0; line-height:1.25;
}
.flag-ico{color:var(--warn); font-size:12px; margin-left:4px; cursor:help}
.provider{font-family:var(--mono); font-size:11px; color:var(--muted); margin:1px 0 0}
.rm-meta{display:flex; gap:5px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.mchip{
  font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:6px;
  border:1px solid var(--line); color:var(--ink2); white-space:nowrap;
}
.mchip.cost{max-width:120px; overflow:hidden; text-overflow:ellipsis}
.mchip.cred-cert, .mchip.cred-badge{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:600}
.mchip.cred-paid{background:var(--prog-soft); border-color:transparent; color:var(--prog-text)}
.mchip.cred-none{color:var(--muted)}
.mchip.cred-unknown{border-style:dashed; color:var(--muted)}
.mchip.earned{background:var(--done-soft); border-color:transparent; color:var(--done-text); font-weight:600}
.rm-actions{display:flex; gap:7px; align-items:center}

.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted);
  background:var(--surface); border:0; padding:5px 9px; cursor:pointer; line-height:1.2;
  transition:background .15s, color .15s;
}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--ink)}
.seg button:focus-visible{outline-offset:-2px}
.seg button[data-v="todo"][aria-pressed="true"]{background:var(--todo-soft); color:var(--todo-text)}
.seg button[data-v="progress"][aria-pressed="true"]{background:var(--prog-soft); color:var(--prog-text)}
.seg button[data-v="done"][aria-pressed="true"]{background:var(--done-soft); color:var(--done-text)}

.iconlink{
  width:28px; height:28px; display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:13px; text-decoration:none;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:7px;
  transition:background .15s, color .15s;
}
.iconlink:hover{background:var(--accent); color:var(--surface)}
.details-btn{
  font-family:var(--mono); font-size:10.5px; font-weight:600; white-space:nowrap;
  color:var(--muted); background:none; border:1px solid var(--line); border-radius:7px;
  padding:6px 9px; cursor:pointer; transition:border-color .15s, color .15s;
}
.details-btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.details-btn[aria-expanded="true"]{color:var(--accent-ink); border-color:var(--accent)}

.row-details{
  border-top:1px solid var(--line-soft); background:var(--surface2);
  padding:12px 16px 14px 60px;
}
.row-details dl{margin:0 0 10px; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px}
.row-details dl:last-child{margin-bottom:0}
.row-details dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding-top:2px; white-space:nowrap;
}
.row-details dd{margin:0; color:var(--ink2)}
.details-link{margin:10px 0 0}
.flag{
  display:flex; gap:9px; margin:0 0 10px; padding:8px 11px;
  background:var(--warn-soft); border-left:2px solid var(--warn); border-radius:0 6px 6px 0;
  font-size:12.5px; color:var(--warn-text);
}
.flag b{font-weight:600}
.go{
  display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:600;
  color:var(--accent-ink); text-decoration:none; padding:7px 12px;
  border:1px solid var(--accent); border-radius:8px; background:var(--accent-soft);
  transition:background .15s, color .15s;
}
.go:hover{background:var(--accent); color:var(--surface)}
.nolink{font-family:var(--mono); font-size:11px; color:var(--muted); font-style:italic}

.empty{
  padding:38px 0; text-align:center; color:var(--muted);
  font-family:var(--mono); font-size:13px;
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .row-main{
    grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:"num title" "num meta" "num actions";
    row-gap:7px; padding:10px 12px;
  }
  .num{grid-area:num; align-self:start; padding-top:2px}
  .rm-title{grid-area:title}
  .rm-meta{grid-area:meta; justify-content:flex-start}
  .rm-actions{grid-area:actions}
  .seg button{padding:7px 13px}
  .row-details{padding:12px 14px}
  .row-details dl{grid-template-columns:1fr; gap:1px 0}
  .row-details dt{padding-top:7px}
  .filter-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .filter-chips::-webkit-scrollbar{display:none}
}