.um-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.um-nav a, .um-prereqs a {
  display: inline-flex; align-items: center; box-sizing: border-box;
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--a);
  font-size: 14px; text-decoration: none; overflow-wrap: anywhere;
}
.um-nav a[aria-current="page"] { border-color: var(--a); background: var(--ok-soft); font-weight: 700; }
.um-nav a:focus-visible, #unit-map a:focus-visible { outline: 3px solid var(--hl); outline-offset: 2px; }
.um-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; list-style: none; font-size: 14px; }
.um-ok { color: var(--a); }
.um-weak { color: var(--no); }
.um-grade { border-top: 2px solid var(--line); margin-top: 28px; scroll-margin-top: 16px; }
.um-grade > h3 { font-size: 22px; color: var(--fg); }
.um-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.um-book { min-width: 0; }
.um-book > h4 { margin: 8px 0 16px; font-size: 18px; color: var(--muted); }
.um-units { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.um-unit {
  min-width: 0; padding: 16px; border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: var(--radius); background: var(--card); overflow-wrap: anywhere;
}
.um-unit.st-mastered { border-left-color: var(--a); background: var(--ok-soft); }
.um-unit.st-weak { border-left-color: var(--no); background: var(--no-soft); }
.um-unit.pl-basic { border-left-color: var(--a); border-left-style: dashed; }
.um-unit.pl-rusty { border-left-color: var(--b); border-left-style: dashed; }
.um-unit.pl-not-yet { border-left-color: var(--no); border-left-style: dashed; }
.um-placement { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px 16px; margin: 14px 0; }
.um-placement h3 { font-size: 18px; margin: 0 0 4px; color: var(--fg); }
.um-placement h4 { font-size: 15px; margin: 14px 0 4px; color: var(--fg); }
.um-placement a { display: inline-flex; align-items: center; min-height: 44px; color: var(--a); font-size: 15px; font-weight: 600; }
.um-placement p { margin: 0; font-size: 14px; }
.um-placement ul { list-style: none; margin: 0; padding: 0; }
.um-placement li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 15px; }
.um-pl-state { flex: none; font-weight: 700; }
.um-pl-basic { color: var(--a); }
.um-pl-rusty { color: var(--b); }
.um-pl-not-yet { color: var(--no); }
.um-pl-not-learned, .um-pl-untested { color: var(--muted); }
.um-unit h5 { margin: 0; font-size: 18px; }
.um-unit-link { display: flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; }
.um-unit-link:hover { text-decoration: underline; }
.um-state { margin: 4px 0 12px; font-size: 14px; color: var(--muted); }
.st-mastered .um-state { color: var(--a); }
.st-weak .um-state { color: var(--no); }
.um-help { font-size: 15px; line-height: 1.8; margin: 8px 0; }
.um-prereqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 14px; }
.um-prereqs a { max-width: 100%; }
body[data-wiki-stage="primary"] header.top a,
body[data-wiki-stage="primary"] header.top summary { min-height: 44px; min-width: 44px; box-sizing: border-box; }
body[data-wiki-stage="primary"] header.top .wk-topbtn[hidden] { display: none; }
#unit-map[hidden], #ws-root[hidden] { display: none; }
@media (max-width: 650px) {
  .um-books { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .um-unit { padding: 12px; }
}